test(e2e): run composed profile suites against the bundled UI app

.changeset/guard-integration-app-boot-hooks.md

@@ -0,0 +1,2 @@
+---
+---

.github/workflows/ci.yml

@@ -380,6 +380,7 @@ jobs:
         test-name:
           [
             'generic',
+            'composed',
             'express',
             'fastify',
             'ap-flows',

.github/workflows/e2e-staging.yml

@@ -142,6 +142,7 @@ jobs:
           - 'sessions:staging'
           - 'handshake:staging'
           - 'generic'
+          - 'composed'
           - 'cache-components'
           - 'express'
           - 'hono'

integration/models/application.ts

@@ -142,6 +142,8 @@ export const application = (
             },
       });
 
+      cleanupFns.push(() => awaitableTreekill(proc.pid, 'SIGKILL'));
+
       const shouldExit = () => !!proc.exitCode && proc.exitCode !== 0;
       await waitForServer(runtimeServerUrl, {
         log,
@@ -150,7 +152,6 @@ export const application = (
         acceptAnyResponse: opts.acceptAnyResponse,
       });
       log(`Server started at ${runtimeServerUrl}, pid: ${proc.pid}`);
-      cleanupFns.push(() => awaitableTreekill(proc.pid, 'SIGKILL'));
       state.serverUrl = runtimeServerUrl;
 
       // Setup Clerk testing tokens after the server is running
@@ -253,6 +254,8 @@ export const application = (
             },
       });
 
+      cleanupFns.push(() => awaitableTreekill(proc.pid, 'SIGKILL'));
+
       if (opts.detached) {
         const shouldExit = () => !!proc.exitCode && proc.exitCode !== 0;
         await waitForServer(runtimeServerUrl, { log, maxAttempts: Infinity, shouldExit });
@@ -261,7 +264,6 @@ export const application = (
       }
 
       log(`Server started at ${runtimeServerUrl}, pid: ${proc.pid}`);
-      cleanupFns.push(() => awaitableTreekill(proc.pid, 'SIGKILL'));
       state.serverUrl = runtimeServerUrl;
       return { port, serverUrl: runtimeServerUrl, pid: proc.pid };
     },

integration/templates/next-app-router-bundled-ui/src/app/composed/ensure-active-organization.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { useClerk, useOrganization, useOrganizationList } from '@clerk/nextjs';
+import { useEffect } from 'react';
+
+export function EnsureActiveOrganization() {
+  const { setActive } = useClerk();
+  const { organization } = useOrganization();
+  const { isLoaded, userMemberships } = useOrganizationList({ userMemberships: true });
+
+  useEffect(() => {
+    if (!isLoaded || organization) return;
+    const first = userMemberships?.data?.[0]?.organization;
+    if (first && setActive) {
+      void setActive({ organization: first.id });
+    }
+  }, [isLoaded, organization, userMemberships, setActive]);
+
+  return null;
+}

integration/templates/next-app-router-bundled-ui/src/app/composed/organization-security/page.tsx

@@ -0,0 +1,14 @@
+import { OrganizationProfileProvider, OrganizationProfileSecurityPanel } from '@clerk/ui/experimental';
+
+import { EnsureActiveOrganization } from '../ensure-active-organization';
+
+export default function Page() {
+  return (
+    <>
+      <EnsureActiveOrganization />
+      <OrganizationProfileProvider>
+        <OrganizationProfileSecurityPanel />
+      </OrganizationProfileProvider>
+    </>
+  );
+}

integration/templates/next-app-router-bundled-ui/src/app/composed/organization/page.tsx

@@ -0,0 +1,24 @@
+import {
+  OrganizationProfileDeleteSection,
+  OrganizationProfileGeneralPanel,
+  OrganizationProfileLeaveSection,
+  OrganizationProfileProfileSection,
+  OrganizationProfileProvider,
+} from '@clerk/ui/experimental';
+
+import { EnsureActiveOrganization } from '../ensure-active-organization';
+
+export default function Page() {
+  return (
+    <>
+      <EnsureActiveOrganization />
+      <OrganizationProfileProvider>
+        <OrganizationProfileGeneralPanel>
+          <OrganizationProfileProfileSection />
+          <OrganizationProfileLeaveSection />
+          <OrganizationProfileDeleteSection />
+        </OrganizationProfileGeneralPanel>
+      </OrganizationProfileProvider>
+    </>
+  );
+}

integration/templates/next-app-router-bundled-ui/src/app/composed/user/page.tsx

@@ -0,0 +1,30 @@
+import {
+  UserProfileAccountPanel,
+  UserProfileDeleteSection,
+  UserProfileEmailSection,
+  UserProfileMfaSection,
+  UserProfilePasswordSection,
+  UserProfilePhoneSection,
+  UserProfileProfileSection,
+  UserProfileProvider,
+  UserProfileSecurityPanel,
+  UserProfileUsernameSection,
+} from '@clerk/ui/experimental';
+
+export default function Page() {
+  return (
+    <UserProfileProvider>
+      <UserProfileAccountPanel>
+        <UserProfileProfileSection />
+        <UserProfileUsernameSection />
+        <UserProfileEmailSection />
+        <UserProfilePhoneSection />
+      </UserProfileAccountPanel>
+      <UserProfileSecurityPanel>
+        <UserProfilePasswordSection />
+        <UserProfileMfaSection />
+        <UserProfileDeleteSection />
+      </UserProfileSecurityPanel>
+    </UserProfileProvider>
+  );
+}

integration/templates/next-app-router-bundled-ui/src/app/themes/page.tsx

@@ -9,31 +9,31 @@ export default function ThemesPage() {
       <div>
         <h2>Dark</h2>
         <SignIn
-          appearance={{ baseTheme: dark }}
+          appearance={{ theme: dark }}
           routing='hash'
           fallback={<>Loading dark theme</>}
         />
       </div>
       <div>
         <h2>Neobrutalism</h2>
         <SignIn
-          appearance={{ baseTheme: neobrutalism }}
+          appearance={{ theme: neobrutalism }}
           routing='hash'
           fallback={<>Loading neobrutalism theme</>}
         />
       </div>
       <div>
         <h2>Shades of Purple</h2>
         <SignIn
-          appearance={{ baseTheme: shadesOfPurple }}
+          appearance={{ theme: shadesOfPurple }}
           routing='hash'
           fallback={<>Loading shadesOfPurple theme</>}
         />
       </div>
       <div>
         <h2>Shadcn</h2>
         <SignIn
-          appearance={{ baseTheme: shadcn }}
+          appearance={{ theme: shadcn }}
           routing='hash'
           fallback={<>Loading shadcn theme</>}
         />