test: improve view transition e2e

clerk · Oct 17, 2024 · 1946e59 · 1946e59
1 parent 8765cd4
commit 1946e59
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 26 deletions.
diff --git a/integration/templates/astro-node/src/layouts/ViewTransitionsLayout.astro b/integration/templates/astro-node/src/layouts/ViewTransitionsLayout.astro
@@ -1,6 +1,5 @@
 ---
 import { ViewTransitions } from 'astro:transitions';
-import { SignedIn, SignedOut, UserButton } from "@clerk/astro/components";
 
 interface Props {
   title: string;
@@ -21,16 +20,6 @@ const { title } = Astro.props;
     <ViewTransitions />
   </head>
   <body>
-  <header>
-    <nav>
-      <SignedOut>
-        <a href="/sign-in">Sign In</a>
-      </SignedOut>
-      <SignedIn>
-        <UserButton />
-      </SignedIn>
-    </nav>
-  </header>
     <main>
       <slot />
     </main>

diff --git a/integration/templates/astro-node/src/pages/transitions/index.astro b/integration/templates/astro-node/src/pages/transitions/index.astro
@@ -0,0 +1,15 @@
+---
+import { SignedIn, SignedOut, UserButton } from "@clerk/astro/components";
+import Layout from "../../layouts/ViewTransitionsLayout.astro";
+---
+
+<Layout title="Sign in">
+  <div class="w-full flex justify-center">
+    <SignedOut>
+        <a href="/transitions/sign-in">Sign in</a>
+    </SignedOut>
+    <SignedIn>
+        <UserButton />
+    </SignedIn>
+  </div>
+</Layout>
diff --git a/integration/templates/astro-node/src/pages/transitions/profile.astro b/integration/templates/astro-node/src/pages/transitions/profile.astro
diff --git a/integration/templates/astro-node/src/pages/transitions/sign-in.astro b/integration/templates/astro-node/src/pages/transitions/sign-in.astro
@@ -5,6 +5,6 @@ import Layout from "../../layouts/ViewTransitionsLayout.astro";
 
 <Layout title="Sign in">
   <div class="w-full flex justify-center">
-    <SignIn forceRedirectUrl="/transitions/profile" />
+    <SignIn forceRedirectUrl="/transitions" />
   </div>
 </Layout>
diff --git a/integration/tests/astro/components.test.ts b/integration/tests/astro/components.test.ts
@@ -452,9 +452,17 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
     await expect(u.page.getByText('Not a member')).toBeVisible();
   });
 
-  test('renders components when view transitions is enabled', async ({ page, context }) => {
+  test('renders components and keep internal routing behavior when view transitions is enabled', async ({
+    page,
+    context,
+  }) => {
     const u = createTestUtils({ app, page, context });
-    await u.page.goToRelative('/transitions/sign-in');
+    await u.page.goToRelative('/transitions');
+    await u.page.getByRole('link', { name: /Sign in/i }).click();
+
+    // Components should be rendered on the new document
+    // when navigating through links
+    await u.page.waitForURL(`${app.serverUrl}/transitions/sign-in`);
     await u.po.signIn.waitForMounted();
 
     await u.po.signIn.setIdentifier(fakeAdmin.email);
@@ -465,5 +473,11 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
     await u.po.signIn.continue();
 
     await u.po.expect.toBeSignedIn();
+
+    // Internal Clerk routing should still work
+    await u.page.waitForURL(`${app.serverUrl}/transitions`);
+
+    // Components should be rendered on hard reload
+    await u.po.userButton.waitForMounted();
   });
 });
diff --git a/packages/astro/src/internal/swap-document.ts b/packages/astro/src/internal/swap-document.ts
@@ -1,5 +1,5 @@
-// eslint-disable-next-line import/no-unresolved
-import { swapFunctions } from 'astro:transitions/client';
+// @ts-expect-error: todo
+import { swapFunctions } from 'astro/virtual-modules/transitions-swap-functions.js';
 
 const PERSIST_ATTR = 'data-astro-transition-persist';
 const EMOTION_ATTR = 'data-emotion';