test(mosaic): cover OrganizationProfile and the switcher profile modals in integration tests

Author: austincalvelage

integration/templates/next-app-router-mosaic/src/app/organization-profile/page.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { MosaicProvider, OrganizationProfile } from '@clerk/mosaic';
+
+export default function Page() {
+  return (
+    <MosaicProvider>
+      <OrganizationProfile
+        customPages={[{ label: 'Custom page', path: 'custom-page', content: <p>custom-page-content</p> }]}
+      />
+    </MosaicProvider>
+  );
+}

integration/tests/mosaic/organization-profile.test.ts

@@ -0,0 +1,82 @@
+import type { Organization } from '@clerk/backend';
+import type { BrowserContext, Page } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+
+import type { FakeUser } from '../../testUtils';
+import { createTestUtils, testAgainstRunningApps } from '../../testUtils';
+
+testAgainstRunningApps({ withPattern: ['next.appRouterMosaic.*'] })('Mosaic OrganizationProfile @mosaic', ({ app }) => {
+  test.describe.configure({ mode: 'serial' });
+
+  let fakeUser: FakeUser;
+  let organization: Organization;
+  const cleanups: Array<() => Promise<unknown>> = [];
+
+  test.beforeAll(async () => {
+    const u = await createTestUtils({ app });
+    fakeUser = u.services.users.createFakeUser(test);
+    cleanups.push(() => fakeUser.deleteIfExists());
+    const user = await u.services.users.createBapiUser(fakeUser);
+    organization = await u.services.clerk.organizations.createOrganization({
+      name: `Mosaic ${Date.now()}`,
+      createdBy: user.id,
+    });
+    cleanups.push(() => u.services.clerk.organizations.deleteOrganization(organization.id));
+  });
+
+  test.afterAll(async () => {
+    const results = await Promise.allSettled(cleanups.map(cleanup => cleanup()));
+    await app.teardown();
+    const failures = results.flatMap(result => (result.status === 'rejected' ? [result.reason] : []));
+    if (failures.length > 0) {
+      throw new AggregateError(failures, 'Mosaic OrganizationProfile cleanup failed');
+    }
+  });
+
+  const path = '/organization-profile';
+  const tab = (page: Page, name: string) => page.getByRole('tab', { name, exact: true });
+
+  async function signIn({ page, context }: { page: Page; context: BrowserContext }) {
+    const u = await createTestUtils({ app, page, context });
+    await page.setViewportSize({ width: 1280, height: 800 });
+    await u.po.signIn.goTo();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+    await u.page.goToRelative(path);
+    await u.po.expect.toBeSignedIn();
+    await page.evaluate(orgId => window.Clerk?.setActive({ organization: orgId }), organization.id);
+    await page.waitForFunction(orgId => window.Clerk?.organization?.id === orgId, organization.id);
+    await expect(tab(page, 'General')).toBeVisible();
+    return u;
+  }
+
+  test('renders nothing when signed out', async ({ page, context }) => {
+    const u = await createTestUtils({ app, page, context });
+    await u.page.goToRelative(path);
+    await u.page.waitForClerkJsLoaded();
+
+    await expect(tab(page, 'General')).toHaveCount(0);
+  });
+
+  test('opens on the general page with the active organization', async ({ page, context }) => {
+    await signIn({ page, context });
+
+    await expect(tab(page, 'General')).toHaveAttribute('aria-selected', 'true');
+    await expect(page.getByText(organization.name).first()).toBeVisible();
+  });
+
+  test('switches to the members page', async ({ page, context }) => {
+    await signIn({ page, context });
+
+    await tab(page, 'Members').click();
+
+    await expect(tab(page, 'Members')).toHaveAttribute('aria-selected', 'true');
+    await expect(page.getByText(fakeUser.email)).toBeVisible();
+  });
+
+  test('renders a custom page', async ({ page, context }) => {
+    await signIn({ page, context });
+
+    await tab(page, 'Custom page').click();
+    await expect(page.getByText('custom-page-content')).toBeVisible();
+  });
+});

integration/tests/mosaic/organization-switcher.test.ts

@@ -86,13 +86,15 @@ testAgainstRunningApps({ withPattern: ['next.appRouterMosaic.*'] })(
     });
 
     test('renders a custom page inside the OrganizationProfile modal', async ({ page, context }) => {
+      await page.setViewportSize({ width: 1280, height: 800 });
       await signIn({ page, context });
 
       await trigger(page).click();
       await popup(page).getByRole('button', { name: 'Settings' }).click();
 
-      const profile = page.locator('.cl-organizationProfile-root');
-      await profile.getByText('Custom page').click();
+      await expect(page.getByRole('tab', { name: 'General', exact: true })).toHaveAttribute('aria-selected', 'true');
+      await expect(page.locator('.cl-organizationProfile-root')).toHaveCount(0);
+      await page.getByRole('tab', { name: 'Custom page', exact: true }).click();
       await expect(page.getByText('custom-page-content')).toBeVisible();
     });
   },