Expand component test suite

Author: brkalow

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

@@ -0,0 +1,9 @@
+import { CreateOrganization } from '@clerk/nextjs';
+
+export default function Page() {
+  return (
+    <div>
+      <CreateOrganization fallback={<>Loading create organization</>} />
+    </div>
+  );
+}

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

@@ -0,0 +1,9 @@
+import { OrganizationList } from '@clerk/nextjs';
+
+export default function Page() {
+  return (
+    <div>
+      <OrganizationList fallback={<>Loading organization list</>} />
+    </div>
+  );
+}

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

@@ -0,0 +1,12 @@
+import { OrganizationProfile } from '@clerk/nextjs';
+
+export default function Page() {
+  return (
+    <div>
+      <OrganizationProfile
+        routing='hash'
+        fallback={<>Loading organization profile</>}
+      />
+    </div>
+  );
+}

integration/templates/next-app-router/src/app/page.tsx

@@ -1,11 +1,12 @@
-import { SignedIn, SignedOut, SignIn, UserButton, Protect } from '@clerk/nextjs';
+import { SignedIn, SignedOut, SignIn, UserButton, Protect, OrganizationSwitcher } from '@clerk/nextjs';
 import Link from 'next/link';
 import { ClientId } from './client-id';
 
 export default function Home() {
   return (
     <main>
       <UserButton fallback={<>Loading user button</>} />
+      <OrganizationSwitcher fallback={<>Loading organization switcher</>} />
       <ClientId />
       <SignedIn>SignedIn</SignedIn>
       <SignedOut>SignedOut</SignedOut>

integration/templates/next-app-router/src/app/waitlist/page.tsx

@@ -0,0 +1,9 @@
+import { Waitlist } from '@clerk/nextjs';
+
+export default function Page() {
+  return (
+    <div>
+      <Waitlist fallback={<>Loading waitlist</>} />
+    </div>
+  );
+}

integration/templates/react-vite/src/App.tsx

@@ -6,7 +6,7 @@ function App() {
   return (
     <main>
       <UserButton afterSignOutUrl={'/'} />
-      <OrganizationSwitcher />
+      <OrganizationSwitcher fallback={<>Loading organization switcher</>} />
       <ClientId />
       <SignedOut>SignedOut</SignedOut>
       <SignedIn>SignedIn</SignedIn>

integration/templates/react-vite/src/create-organization/index.tsx

@@ -0,0 +1,9 @@
+import { CreateOrganization } from '@clerk/clerk-react';
+
+export default function Page() {
+  return (
+    <div>
+      <CreateOrganization fallback={<>Loading create organization</>} />
+    </div>
+  );
+}

integration/templates/react-vite/src/main.tsx

@@ -12,6 +12,10 @@ import UserProfileCustom from './custom-user-profile';
 import UserButtonCustom from './custom-user-button';
 import UserButtonCustomTrigger from './custom-user-button-trigger';
 import UserButton from './user-button';
+import Waitlist from './waitlist';
+import OrganizationProfile from './organization-profile';
+import OrganizationList from './organization-list';
+import CreateOrganization from './create-organization';
 
 const Root = () => {
   const navigate = useNavigate();
@@ -74,6 +78,22 @@ const router = createBrowserRouter([
         path: '/custom-user-button-trigger',
         element: <UserButtonCustomTrigger />,
       },
+      {
+        path: '/waitlist',
+        element: <Waitlist />,
+      },
+      {
+        path: '/organization-profile',
+        element: <OrganizationProfile />,
+      },
+      {
+        path: '/organization-list',
+        element: <OrganizationList />,
+      },
+      {
+        path: '/create-organization',
+        element: <CreateOrganization />,
+      },
     ],
   },
 ]);

integration/templates/react-vite/src/organization-list/index.tsx

@@ -0,0 +1,9 @@
+import { OrganizationList } from '@clerk/clerk-react';
+
+export default function Page() {
+  return (
+    <div>
+      <OrganizationList fallback={<>Loading organization list</>} />
+    </div>
+  );
+}

integration/templates/react-vite/src/organization-profile/index.tsx

@@ -0,0 +1,12 @@
+import { OrganizationProfile } from '@clerk/clerk-react';
+
+export default function Page() {
+  return (
+    <div>
+      <OrganizationProfile
+        routing='hash'
+        fallback={<>Loading organization profile</>}
+      />
+    </div>
+  );
+}

integration/templates/react-vite/src/waitlist/index.tsx

@@ -0,0 +1,9 @@
+import { Waitlist } from '@clerk/clerk-react';
+
+export default function Page() {
+  return (
+    <div>
+      <Waitlist fallback={<>Loading waitlist</>} />
+    </div>
+  );
+}

integration/testUtils/appPageObject.ts

@@ -13,7 +13,7 @@ export const createAppPageObject = (testArgs: { page: Page }, app: Application)
         // do not fail the test if interstitial is returned (401)
       }
     },
-    goToRelative: (path: string, opts: { searchParams?: URLSearchParams; timeout?: number } = {}) => {
+    goToRelative: (path: string, opts: { waitUntil?: any; searchParams?: URLSearchParams; timeout?: number } = {}) => {
       let url: URL;
 
       try {
@@ -35,7 +35,7 @@ export const createAppPageObject = (testArgs: { page: Page }, app: Application)
       if (opts.searchParams) {
         url.search = opts.searchParams.toString();
       }
-      return page.goto(url.toString(), { timeout: opts.timeout ?? 20000 });
+      return page.goto(url.toString(), { timeout: opts.timeout ?? 20000, waitUntil: opts.waitUntil });
     },
     waitForClerkJsLoaded: async () => {
       return page.waitForFunction(() => {

integration/tests/components.test.ts

@@ -1,24 +1,27 @@
 import { expect, test } from '@playwright/test';
 
 import { appConfigs } from '../presets';
-import type { FakeUser } from '../testUtils';
+import type { FakeOrganization, FakeUser } from '../testUtils';
 import { createTestUtils, testAgainstRunningApps } from '../testUtils';
 
 testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('component smoke tests @generic', ({ app }) => {
   let fakeUser: FakeUser;
+  let fakeOrganization: FakeOrganization;
 
   test.beforeAll(async () => {
     const u = createTestUtils({ app });
     fakeUser = u.services.users.createFakeUser({
       withPhoneNumber: true,
       withUsername: true,
     });
-    await u.services.users.createBapiUser(fakeUser);
+    const user = await u.services.users.createBapiUser(fakeUser);
+    fakeOrganization = await u.services.users.createFakeOrganization(user.id);
   });
 
   test.afterAll(async () => {
     await app.teardown();
     await fakeUser.deleteIfExists();
+    await fakeOrganization.delete();
   });
 
   const components = [
@@ -44,6 +47,35 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('component
       protected: true,
       fallback: 'Loading user button',
     },
+    {
+      name: 'Waitlist',
+      path: '/waitlist',
+      fallback: 'Loading waitlist',
+    },
+    {
+      name: 'OrganizationSwitcher',
+      path: '/',
+      fallback: 'Loading organization switcher',
+      protected: true,
+    },
+    {
+      name: 'OrganizationProfile',
+      path: '/organization-profile',
+      fallback: 'Loading organization profile',
+      protected: true,
+    },
+    {
+      name: 'OrganizationList',
+      path: '/organization-list',
+      fallback: 'Loading organization list',
+      protected: true,
+    },
+    {
+      name: 'CreateOrganization',
+      path: '/create-organization',
+      fallback: 'Loading create organization',
+      protected: true,
+    },
   ];
 
   const signIn = async ({ app, page, context }) => {
@@ -68,7 +100,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('component
       }
 
       const u = createTestUtils({ app, page, context });
-      await u.page.goToRelative(component.path);
+      await u.page.goToRelative(component.path, { waitUntil: 'commit' });
       await expect(u.page.getByText(component.fallback)).toBeVisible();
 
       await signOut({ app, page, context });