Skip to content

test(frontend): add Svelte component tests for OAuth UI #370

Description

@fpindej

Problem

OAuth UI components (OAuthProviderButtons, ConnectedAccountsCard, DisconnectDialog, OAuthProviderButton) have no tests. The current vitest setup runs in node environment without DOM/jsdom, so Svelte component rendering tests are not possible.

Proposed approach

  1. Add @testing-library/svelte and jsdom (or happy-dom) to dev dependencies
  2. Configure a separate vitest environment for component tests (e.g., *.component.test.ts files use jsdom)
  3. Write tests for:
    • OAuthProviderButtons: mock fetch, verify buttons render for returned providers, verify nothing renders when no providers
    • ConnectedAccountsCard: verify connect/disconnect button states based on linkedProviders and hasPassword props
    • DisconnectDialog: verify confirmation flow, unlink API call, error handling
    • OAuthProviderButton: verify icon rendering, loading/disabled states

Context

  • Server-side logic is already tested (callback page.server.test.ts in PR test(auth): add OAuth external authentication tests #369)
  • This requires DOM testing infrastructure that doesn't exist yet
  • Consider setting up the DOM test infrastructure as a shared effort that benefits all future component tests, not just OAuth

Related

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    featureNew feature or enhancementfrontendFrontend (SvelteKit)

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions