From 6da98ecf9574b7191281237449ccd34f9015f001 Mon Sep 17 00:00:00 2001
From: Sean Brydon <sean@cal.com>
Date: Mon, 18 Sep 2023 14:30:53 +0100
Subject: [PATCH] Add inital username/email tests

---
 apps/web/pages/signup.tsx         | 15 ++++++--
 apps/web/playwright/signup.e2e.ts | 59 +++++++++++++++++++++++++++++++
 2 files changed, 71 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/playwright/signup.e2e.ts

diff --git a/apps/web/pages/signup.tsx b/apps/web/pages/signup.tsx
index f5c1d84001..5c14375a28 100644
--- a/apps/web/pages/signup.tsx
+++ b/apps/web/pages/signup.tsx
@@ -80,7 +80,7 @@ function UsernameField({
 
   return (
     <div>
-      <TextField {...props} {...register("username")} />
+      <TextField {...props} {...register("username")} data-testid="signup-usernamefield" />
       {!formState.isSubmitting && (
         <div className="text-gray text-default flex items-center text-sm">
           <p className="flex items-center text-sm ">
@@ -190,7 +190,9 @@ export default function Signup({ prepopulateFormValues, token, orgSlug }: Signup
         <HeadSeo title={t("sign_up")} description={t("sign_up")} />
         <div className="flex w-full flex-col px-4 pt-6 md:px-16 lg:px-28">
           {/* Header */}
-          {errors.apiError && <Alert severity="error" message={errors.apiError?.message} />}
+          {errors.apiError && (
+            <Alert severity="error" message={errors.apiError?.message} data-testid="signup-error-message" />
+          )}
           <div className="flex flex-col gap-3 ">
             <h1 className="font-cal text-[28px] ">
               {IS_CALCOM ? t("create_your_calcom_account") : t("create_your_account")}
@@ -215,6 +217,7 @@ export default function Signup({ prepopulateFormValues, token, orgSlug }: Signup
               <UsernameField
                 label={t("username")}
                 premium={premiumUsername}
+                data-testid="signup-usernamefield"
                 setPremium={(value) => setPremiumUsername(value)}
                 addOnLeading={
                   orgSlug
@@ -223,10 +226,16 @@ export default function Signup({ prepopulateFormValues, token, orgSlug }: Signup
                 }
               />
               {/* Email */}
-              <TextField {...register("email")} label={t("email")} type="email" />
+              <TextField
+                {...register("email")}
+                label={t("email")}
+                type="email"
+                data-testid="signup-emailfield"
+              />
 
               {/* Password */}
               <PasswordField
+                data-testid="signup-passwordfield"
                 label={t("password")}
                 {...register("password")}
                 hintErrors={["caplow", "min", "num"]}
diff --git a/apps/web/playwright/signup.e2e.ts b/apps/web/playwright/signup.e2e.ts
new file mode 100644
index 0000000000..4aa3eb8ba2
--- /dev/null
+++ b/apps/web/playwright/signup.e2e.ts
@@ -0,0 +1,59 @@
+import { test } from "./lib/fixtures";
+
+test.describe.configure({ mode: "parallel" });
+
+test.describe("Signup Validation", async () => {
+  test.afterAll(async ({ users }) => {
+    await users.deleteAll();
+  });
+  test("Username is taken", async ({ page, users }) => {
+    // log in trail user
+    await test.step("Sign up", async () => {
+      const pro = await users.create({
+        username: "pro",
+      });
+
+      await page.goto("/signup");
+      await page.waitForLoadState("networkidle");
+
+      const alertMessage = "Username or email is already taken";
+
+      // Fill form
+      await page.locator('input[name="username"]').fill("pro");
+      await page.locator('input[name="email"]').fill("pro@example.com");
+      await page.locator('input[name="password"]').fill("Password99!");
+
+      // Submit form
+
+      await page.click('button[type="submit"]');
+      const alert = await page.waitForSelector('[data-testid="alert"]');
+
+      await expect(alert).toHaveText(alertMessage);
+    });
+  });
+  test("Email is taken", async ({ page, users }) => {
+    // log in trail user
+    await test.step("Sign up", async () => {
+      await users.create({
+        username: "pro",
+      });
+
+      await page.goto("/signup");
+      await page.waitForLoadState("networkidle");
+
+      const alertMessage = "Username or email is already taken";
+
+      // Fill form
+      await page.locator('input[name="username"]').fill("randomuserwhodoesntexist");
+      await page.locator('input[name="email"]').fill("pro@example.com");
+      await page.locator('input[name="password"]').fill("Password99!");
+
+      // Submit form
+
+      await page.click('button[type="submit"]');
+      const alert = await page.waitForSelector('[data-testid="alert"]');
+
+      await expect(alert).toHaveText(alertMessage);
+    });
+  });
+});