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

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