Add unit tests

LauraBeatris · LauraBeatris · commit 02c415775d03 · 2025-07-31T18:59:34.000-03:00
diff --git a/packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskSelectOrganization/SelectOrganizationScreen.tsx b/packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskSelectOrganization/SelectOrganizationScreen.tsx
@@ -20,6 +20,7 @@ import { OrganizationPreview } from '@/ui/elements/OrganizationPreview';
 import { Add } from '@/ui/icons';
 import { handleError } from '@/ui/utils/errorHandler';
 
+// TODO -> Do not use stuff from OrganizationList
 import { useOrganizationListInView } from '../../../OrganizationList/OrganizationListPage';
 import {
   OrganizationListPreviewButton,
@@ -44,7 +45,6 @@ export const SelectOrganizationScreen = withCardStateProvider(
     const userInvitationsData = userInvitations.data?.filter(a => !!a);
     const userSuggestionsData = userSuggestions.data?.filter(a => !!a);
 
-    // TODO -> Set organization as active
     return (
       <Col elementDescriptor={descriptors.main}>
         <OrganizationPreviewListItems elementDescriptor={descriptors.taskSelectOrganizationPreviewItems}>
diff --git a/packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskSelectOrganization/__tests__/TaskSelectOrganization.test.tsx b/packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskSelectOrganization/__tests__/TaskSelectOrganization.test.tsx
@@ -0,0 +1,168 @@
+import { describe } from '@jest/globals';
+import userEvent from '@testing-library/user-event';
+
+import { bindCreateFixtures, render } from '@/testUtils';
+
+import { TaskSelectOrganization } from '../';
+
+const { createFixtures } = bindCreateFixtures('TaskSelectOrganization');
+
+describe('TaskSelectOrganization', () => {
+  it('does not render component without existing session task', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withForceOrganizationSelection();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        create_organization_enabled: true,
+      });
+    });
+
+    const { queryByText, queryByRole } = render(<TaskSelectOrganization />, { wrapper });
+
+    expect(queryByText('Setup your account')).not.toBeInTheDocument();
+    expect(queryByText('Tell us a bit about your organization')).not.toBeInTheDocument();
+    expect(queryByRole('button', { name: /sign out/i })).not.toBeInTheDocument();
+  });
+
+  it('renders component when session task exists', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withForceOrganizationSelection();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        create_organization_enabled: true,
+        tasks: [{ key: 'select-organization' }],
+      });
+    });
+
+    const { getByText, getByRole } = render(<TaskSelectOrganization />, { wrapper });
+
+    expect(getByText('Setup your account')).toBeInTheDocument();
+    expect(getByText('Tell us a bit about your organization')).toBeInTheDocument();
+    expect(getByRole('button', { name: /sign out/i })).toBeInTheDocument();
+  });
+
+  it('shows create organization screen when user has no existing resources', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withForceOrganizationSelection();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        create_organization_enabled: true,
+        tasks: [{ key: 'select-organization' }],
+      });
+    });
+
+    const { getByRole, getByText } = render(<TaskSelectOrganization />, { wrapper });
+
+    // Should show create organization form by default when no existing resources
+    expect(getByRole('textbox', { name: /name/i })).toBeInTheDocument();
+    expect(getByText('Create organization')).toBeInTheDocument();
+  });
+
+  it('shows select organization screen when user has existing organizations', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withForceOrganizationSelection();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        create_organization_enabled: true,
+        organization_memberships: [{ name: 'Test Org', slug: 'test-org' }],
+        tasks: [{ key: 'select-organization' }],
+      });
+    });
+
+    const { getByText, queryByRole } = render(<TaskSelectOrganization />, { wrapper });
+
+    expect(getByText('Test Org')).toBeInTheDocument();
+    expect(getByText('Create organization')).toBeInTheDocument();
+    expect(queryByRole('textbox', { name: /name/i })).not.toBeInTheDocument();
+  });
+
+  it('allows switching between select and create organization screens', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withForceOrganizationSelection();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        create_organization_enabled: true,
+        organization_memberships: [{ name: 'Existing Org', slug: 'existing-org' }],
+        tasks: [{ key: 'select-organization' }],
+      });
+    });
+
+    const { getByText, getByRole, queryByRole, queryByText } = render(<TaskSelectOrganization />, { wrapper });
+
+    expect(getByText('Existing Org')).toBeInTheDocument();
+    expect(getByText('Create organization')).toBeInTheDocument();
+    expect(queryByRole('textbox', { name: /name/i })).not.toBeInTheDocument();
+
+    const createButton = getByText('Create organization');
+    await userEvent.click(createButton);
+
+    expect(getByRole('textbox', { name: /name/i })).toBeInTheDocument();
+    expect(getByRole('button', { name: /create organization/i })).toBeInTheDocument();
+    expect(getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+    expect(queryByText('Existing Org')).not.toBeInTheDocument();
+
+    const cancelButton = getByRole('button', { name: /cancel/i });
+    await userEvent.click(cancelButton);
+
+    expect(getByText('Existing Org')).toBeInTheDocument();
+    expect(getByText('Create organization')).toBeInTheDocument();
+    expect(queryByRole('textbox', { name: /name/i })).not.toBeInTheDocument();
+  });
+
+  it('displays user identifier in sign out section', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withForceOrganizationSelection();
+      f.withUser({
+        email_addresses: ['user@test.com'],
+        create_organization_enabled: true,
+        tasks: [{ key: 'select-organization' }],
+      });
+    });
+
+    const { getByText } = render(<TaskSelectOrganization />, { wrapper });
+
+    expect(getByText(/user@test\.com/)).toBeInTheDocument();
+    expect(getByText('Sign out')).toBeInTheDocument();
+  });
+
+  it('handles sign out correctly', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withForceOrganizationSelection();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        create_organization_enabled: true,
+        tasks: [{ key: 'select-organization' }],
+      });
+    });
+
+    const { getByRole } = render(<TaskSelectOrganization />, { wrapper });
+    const signOutButton = getByRole('button', { name: /sign out/i });
+
+    await userEvent.click(signOutButton);
+
+    expect(fixtures.clerk.signOut).toHaveBeenCalled();
+  });
+
+  it('renders with username when email is not available', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withForceOrganizationSelection();
+      f.withUser({
+        username: 'testuser',
+        create_organization_enabled: true,
+        tasks: [{ key: 'select-organization' }],
+      });
+    });
+
+    const { getByText } = render(<TaskSelectOrganization />, { wrapper });
+
+    expect(getByText(/testuser/)).toBeInTheDocument();
+  });
+});
diff --git a/packages/clerk-js/src/ui/utils/test/fixtureHelpers.ts b/packages/clerk-js/src/ui/utils/test/fixtureHelpers.ts
@@ -10,6 +10,7 @@ import type {
   PublicUserDataJSON,
   SamlAccountJSON,
   SessionJSON,
+  SessionTask,
   SignInJSON,
   SignUpJSON,
   UserJSON,
@@ -49,6 +50,7 @@ const createUserFixtureHelpers = (baseClient: ClientJSON) => {
     external_accounts?: Array<OAuthProvider | Partial<ExternalAccountJSON>>;
     saml_accounts?: Array<Partial<SamlAccountJSON>>;
     organization_memberships?: Array<string | OrgParams>;
+    tasks?: SessionTask[];
   };
 
   const createPublicUserData = (params: WithUserParams) => {
@@ -87,6 +89,7 @@ const createUserFixtureHelpers = (baseClient: ClientJSON) => {
       last_active_token: {
         jwt: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2NzU4NzY3OTAsImRhdGEiOiJmb29iYXIiLCJpYXQiOjE2NzU4NzY3MzB9.Z1BC47lImYvaAtluJlY-kBo0qOoAk42Xb-gNrB2SxJg',
       },
+      tasks: params.tasks,
     } as SessionJSON;
     baseClient.sessions.push(session);
   };
