chore(e2e): Test unstyled components for Astro (#3697)

Co-authored-by: panteliselef <[email protected]>

.changeset/five-cycles-serve.md

@@ -0,0 +1,3 @@
+---
+
+---

integration/templates/astro-node/src/pages/buttons.astro

@@ -0,0 +1,21 @@
+---
+import { SignInButton, SignUpButton } from '@clerk/astro/components';
+
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout title="Welcome to Astro.">
+  <SignInButton
+    mode="modal"
+    fallbackRedirectUrl="/user"
+  >
+    Sign in
+  </SignInButton>
+
+  <SignUpButton
+    mode="modal"
+    fallbackRedirectUrl="/user"
+  >
+    Sign up
+  </SignUpButton>
+</Layout>

integration/templates/astro-node/src/pages/index.astro

@@ -1,9 +1,8 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import Card from "../components/Card.astro";
-import SignOutButton from "../lib/astro-components/SignOutButton.astro";
 
-import { SignedIn, SignedOut, OrganizationSwitcher } from "@clerk/astro/components";
+import { SignedIn, SignedOut, SignOutButton, OrganizationSwitcher } from "@clerk/astro/components";
 ---
 
 <Layout title="Welcome to Astro.">
@@ -18,7 +17,7 @@ import { SignedIn, SignedOut, OrganizationSwitcher } from "@clerk/astro/componen
       }}
       afterSelectOrganizationUrl="/organization"
     />
-    <SignOutButton />
+    <SignOutButton>Sign out!</SignOutButton>
   </SignedIn>
 
   <div class="h-12"></div>

integration/templates/astro-node/src/pages/react/index.astro

@@ -1,9 +1,8 @@
 ---
 import Layout from "../../layouts/react/Layout.astro";
 import Card from "../../components/Card.astro";
-import SignOutButton from "../../lib/astro-components/SignOutButton.astro";
 
-import { SignedIn, SignedOut, OrganizationSwitcher } from "@clerk/astro/react";
+import { SignedIn, SignedOut, SignOutButton, OrganizationSwitcher } from "@clerk/astro/react";
 ---
 
 <Layout title="Welcome to Astro.">
@@ -19,7 +18,7 @@ import { SignedIn, SignedOut, OrganizationSwitcher } from "@clerk/astro/react";
       }}
       afterSelectOrganizationUrl="/organization"
     />
-    <SignOutButton />
+    <SignOutButton client:load>Sign out!</SignOutButton>
   </SignedIn>
 
   <div class="h-12"></div>

integration/tests/astro/components.test.ts

@@ -97,6 +97,55 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
     await expect(u.page.getByText('Sign out!')).toBeVisible();
   });
 
+  test('SignInButton renders and respects props', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+
+    await u.page.goToRelative('/buttons');
+    await u.po.expect.toBeSignedOut();
+    await u.page.waitForClerkJsLoaded();
+
+    await u.page.getByRole('button', { name: /Sign in/i }).click();
+
+    await u.po.signIn.waitForMounted();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+
+    await u.page.waitForAppUrl('/user');
+
+    await u.po.expect.toBeSignedIn();
+  });
+
+  test('SignUpButton renders and respects props', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    const fakeUser = u.services.users.createFakeUser({
+      fictionalEmail: true,
+      withPhoneNumber: true,
+      withUsername: true,
+    });
+
+    await u.page.goToRelative('/buttons');
+    await u.page.waitForClerkJsLoaded();
+
+    await u.page.getByRole('button', { name: /Sign up/i }).click();
+
+    await u.po.signUp.waitForMounted();
+
+    // Fill in sign up form
+    await u.po.signUp.signUpWithEmailAndPassword({
+      email: fakeUser.email,
+      password: fakeUser.password,
+    });
+
+    // Verify email
+    await u.po.signUp.enterTestOtpCode();
+
+    await u.page.waitForAppUrl('/user');
+
+    // Check if user is signed in
+    await u.po.expect.toBeSignedIn();
+
+    await fakeUser.deleteIfExists();
+  });
+
   test('test updateClerkOptions by changing localization on the fly', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
     await u.po.signIn.goTo();