From ba1d90221df727d96df6880eaf1818c475247f0b Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Fri, 12 Jul 2024 12:08:29 -0700
Subject: [PATCH] chore(e2e): Test unstyled components for Astro (#3697)

Co-authored-by: panteliselef <panteliselef@outlook.com>
---
 .changeset/five-cycles-serve.md               |  3 ++
 .../lib/astro-components/SignOutButton.astro  | 36 --------------
 .../astro-node/src/pages/buttons.astro        | 21 ++++++++
 .../astro-node/src/pages/index.astro          |  5 +-
 .../astro-node/src/pages/react/index.astro    |  5 +-
 integration/tests/astro/components.test.ts    | 49 +++++++++++++++++++
 6 files changed, 77 insertions(+), 42 deletions(-)
 create mode 100644 .changeset/five-cycles-serve.md
 delete mode 100644 integration/templates/astro-node/src/lib/astro-components/SignOutButton.astro
 create mode 100644 integration/templates/astro-node/src/pages/buttons.astro

diff --git a/.changeset/five-cycles-serve.md b/.changeset/five-cycles-serve.md
new file mode 100644
index 0000000000..853d812bb3
--- /dev/null
+++ b/.changeset/five-cycles-serve.md
@@ -0,0 +1,3 @@
+---
+
+---
diff --git a/integration/templates/astro-node/src/lib/astro-components/SignOutButton.astro b/integration/templates/astro-node/src/lib/astro-components/SignOutButton.astro
deleted file mode 100644
index 07371b385a..0000000000
--- a/integration/templates/astro-node/src/lib/astro-components/SignOutButton.astro
+++ /dev/null
@@ -1,36 +0,0 @@
----
-import type { SignOutOptions } from "@clerk/types";
-interface Props extends SignOutOptions {
-  signOutUrl?: string;
-}
----
-
-<button data-sign-out-button>Sign out!</button>
-
-<script is:inline define:vars={{ props: Astro.props }}>
-  SIGN_OUT_BUTTON_PROPS = props;
-</script>
-
-<script>
-  import { $clerkStore } from "@clerk/astro/client";
-
-  const button = document.querySelector(
-    "[data-sign-out-button]",
-  ) as HTMLElement;
-
-  button?.addEventListener("click", (e) => {
-    e.preventDefault();
-
-    $clerkStore.get()?.signOut(
-      //@ts-ignore
-      SIGN_OUT_BUTTON_PROPS,
-    );
-
-    // @ts-ignore
-    if (SIGN_OUT_BUTTON_PROPS.signOutUrl)
-      window.location.replace(
-        // @ts-ignore
-        SIGN_OUT_BUTTON_PROPS.signOutUrl,
-      );
-  });
-</script>
diff --git a/integration/templates/astro-node/src/pages/buttons.astro b/integration/templates/astro-node/src/pages/buttons.astro
new file mode 100644
index 0000000000..a559cce8fc
--- /dev/null
+++ b/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>
diff --git a/integration/templates/astro-node/src/pages/index.astro b/integration/templates/astro-node/src/pages/index.astro
index 534342bfdb..5559f27e25 100644
--- a/integration/templates/astro-node/src/pages/index.astro
+++ b/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>
diff --git a/integration/templates/astro-node/src/pages/react/index.astro b/integration/templates/astro-node/src/pages/react/index.astro
index a16549eea0..c15a8c3ee5 100644
--- a/integration/templates/astro-node/src/pages/react/index.astro
+++ b/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>
diff --git a/integration/tests/astro/components.test.ts b/integration/tests/astro/components.test.ts
index b693b8e75a..94fee15124 100644
--- a/integration/tests/astro/components.test.ts
+++ b/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();