chore(clerk-js): Keyless prompt content updates

.changeset/puny-onions-hide.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Updates keyless prompt content

integration/tests/next-quickstart-keyless.test.ts

@@ -78,6 +78,17 @@ test.describe('Keyless mode @quickstart', () => {
 
     await u.po.keylessPopover.waitForMounted();
 
+    // Popover now starts expanded by default
+    expect(await u.po.keylessPopover.isExpanded()).toBe(true);
+
+    // Verify new content appears when expanded
+    const notSignedInContent = u.po.keylessPopover.getNotSignedInContent();
+    await expect(notSignedInContent.temporaryKeysText).toBeVisible();
+    await expect(notSignedInContent.dashboardText).toBeVisible();
+    await expect(notSignedInContent.bulletList).toBeVisible();
+
+    // Test collapsing and expanding
+    await u.po.keylessPopover.toggle();
     expect(await u.po.keylessPopover.isExpanded()).toBe(false);
     await u.po.keylessPopover.toggle();
     expect(await u.po.keylessPopover.isExpanded()).toBe(true);
@@ -117,6 +128,12 @@ test.describe('Keyless mode @quickstart', () => {
 
     await u.po.keylessPopover.waitForMounted();
     expect(await u.po.keylessPopover.isExpanded()).toBe(true);
+
+    // Verify claimed state content
+    const claimedContent = u.po.keylessPopover.getClaimedContent();
+    await expect(claimedContent.title).toBeVisible();
+    await expect(claimedContent.description).toBeVisible();
+
     await expect(u.po.keylessPopover.promptToUseClaimedKeys()).toBeVisible();
 
     const [newPage] = await Promise.all([
@@ -130,6 +147,74 @@ test.describe('Keyless mode @quickstart', () => {
     });
   });
 
+  // Skipped: This test requires creating a user via backend API, which needs CLERK_SECRET_KEY.
+  // Keyless mode is designed to work without keys, so we skip this test for now.
+  // TODO: Revisit when we have a way to test signed-in states in keyless mode without backend API access.
+  test.skip('Signed-in user sees updated prompt content.', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+
+    // Create and sign in a user
+    const fakeUser = u.services.users.createFakeUser({
+      fictionalEmail: true,
+      withPassword: true,
+    });
+    await u.services.users.createBapiUser(fakeUser);
+
+    await u.page.goToAppHome();
+    await u.page.waitForClerkJsLoaded();
+
+    // Sign in
+    await u.po.signIn.goTo();
+    await u.po.signIn.signInWithEmailAndInstantPassword({
+      email: fakeUser.email,
+      password: fakeUser.password,
+    });
+    await u.po.expect.toBeSignedIn();
+
+    // Navigate back to home to see the keyless prompt
+    await u.page.goToAppHome();
+    await u.po.keylessPopover.waitForMounted();
+
+    // Verify prompt is expanded by default when signed in
+    expect(await u.po.keylessPopover.isExpanded()).toBe(true);
+
+    // Verify signed-in content
+    const signedInContent = u.po.keylessPopover.getSignedInContent();
+    await expect(signedInContent.title).toBeVisible();
+    await expect(signedInContent.description).toBeVisible();
+    await expect(signedInContent.bulletList).toBeVisible();
+
+    // Verify bullet items are present
+    await expect(signedInContent.bulletItems.first()).toBeVisible();
+
+    // Verify "Configure your application" button is visible
+    await expect(u.po.keylessPopover.promptsToClaim()).toBeVisible();
+
+    await fakeUser.deleteIfExists();
+  });
+
+  test('Not signed-in user sees updated prompt content.', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.page.goToAppHome();
+    await u.page.waitForClerkJsLoaded();
+    await u.po.expect.toBeSignedOut();
+
+    await u.po.keylessPopover.waitForMounted();
+
+    // Popover starts expanded by default
+    expect(await u.po.keylessPopover.isExpanded()).toBe(true);
+
+    // Verify not signed-in content
+    const notSignedInContent = u.po.keylessPopover.getNotSignedInContent();
+    await expect(notSignedInContent.title).toBeVisible();
+    await expect(notSignedInContent.temporaryKeysText).toBeVisible();
+    await expect(notSignedInContent.bulletList).toBeVisible();
+    await expect(notSignedInContent.dashboardText).toBeVisible();
+
+    // Verify bullet items are present
+    await expect(notSignedInContent.bulletItems.first()).toBeVisible();
+  });
+
   test('Claimed application with keys inside .env, on dismiss, keyless prompt is removed.', async ({
     page,
     context,
@@ -152,6 +237,12 @@ test.describe('Keyless mode @quickstart', () => {
 
     await page.reload();
     await u.po.keylessPopover.waitForMounted();
+
+    // Verify success state content
+    const successContent = u.po.keylessPopover.getSuccessContent();
+    await expect(successContent.title).toBeVisible();
+    await expect(successContent.configuredText).toBeVisible();
+
     await u.po.keylessPopover.promptToDismiss().click();
 
     await u.po.keylessPopover.waitForUnmounted();