create-cen-app/my-cen-app/frontend/tests/sign-up.spec.ts

create an client-engineering-style app

import { type Page, expect, test } from "@playwright/test";

import { accessPassword } from "./config";
import { randomEmail, randomPassword } from "./utils/random";

test.use({ storageState: { cookies: [], origins: [] } });

type OptionsType = {
  exact?: boolean;
};

const fillForm = async (
  page: Page,
  full_name: string,
  email: string,
  password: string,
  confirm_password: string,
  accessPassword: string,
) => {
  await page.getByPlaceholder("Full Name").fill(full_name);
  await page.getByPlaceholder("Email").fill(email);
  await page.getByPlaceholder("Password", { exact: true }).fill(password);
  await page.getByPlaceholder("Repeat Password").fill(confirm_password);
  await page.getByPlaceholder("Access Password").fill(accessPassword);
};

const verifyInput = async (
  page: Page,
  placeholder: string,
  options?: OptionsType,
) => {
  const input = page.getByPlaceholder(placeholder, options);
  await expect(input).toBeVisible();
  await expect(input).toHaveText("");
  await expect(input).toBeEditable();
};

test("Inputs are visible, empty and editable", async ({ page }) => {
  await page.goto("/signup");

  await verifyInput(page, "Full Name");
  await verifyInput(page, "Email");
  await verifyInput(page, "Password", { exact: true });
  await verifyInput(page, "Repeat Password");
});

test("Sign Up button is visible", async ({ page }) => {
  await page.goto("/signup");

  await expect(page.getByRole("button", { name: "Sign Up" })).toBeVisible();
});

test("Log In link is visible", async ({ page }) => {
  await page.goto("/signup");

  await expect(page.getByRole("link", { name: "Log In" })).toBeVisible();
});

test("Sign up with valid name, email, and password", async ({ page }) => {
  const full_name = "Test User";
  const email = randomEmail();
  const password = randomPassword();

  await page.goto("/signup");
  await fillForm(page, full_name, email, password, password, accessPassword);
  await page.getByRole("button", { name: "Sign Up" }).click();
});

test("Sign up with invalid email", async ({ page }) => {
  await page.goto("/signup");

  await fillForm(
    page,
    "Playwright Test",
    "invalid-email",
    "changethis",
    "changethis",
    accessPassword,
  );
  await page.getByRole("button", { name: "Sign Up" }).click();

  await expect(page.getByText("Invalid email address")).toBeVisible();
});

test("Sign up with existing email", async ({ page }) => {
  const fullName = "Test User";
  const email = randomEmail();
  const password = randomPassword();

  // Sign up with an email
  await page.goto("/signup");

  await fillForm(page, fullName, email, password, password, accessPassword);
  await page.getByRole("button", { name: "Sign Up" }).click();

  await page.waitForURL("/login");

  // Sign up again with the same email
  await page.goto("/signup");

  await fillForm(page, fullName, email, password, password, accessPassword);
  await page.getByRole("button", { name: "Sign Up" }).click();

  await expect(
    page.getByText("The user with this email already exists in the system"),
  ).toBeVisible();
});

test("Sign up with weak password", async ({ page }) => {
  const fullName = "Test User";
  const email = randomEmail();
  const password = "weak";

  await page.goto("/signup");

  await fillForm(page, fullName, email, password, password, accessPassword);
  await page.getByRole("button", { name: "Sign Up" }).click();

  await expect(
    page.getByText("Password must be at least 8 characters"),
  ).toBeVisible();
});

test("Sign up with mismatched passwords", async ({ page }) => {
  const fullName = "Test User";
  const email = randomEmail();
  const password = randomPassword();
  const password2 = randomPassword();

  await page.goto("/signup");

  await fillForm(page, fullName, email, password, password2, accessPassword);
  await page.getByRole("button", { name: "Sign Up" }).click();

  await expect(page.getByText("Passwords do not match")).toBeVisible();
});

test("Sign up with missing full name", async ({ page }) => {
  const fullName = "";
  const email = randomEmail();
  const password = randomPassword();

  await page.goto("/signup");

  await fillForm(page, fullName, email, password, password, accessPassword);
  await page.getByRole("button", { name: "Sign Up" }).click();

  await expect(page.getByText("Full Name is required")).toBeVisible();
});

test("Sign up with missing email", async ({ page }) => {
  const fullName = "Test User";
  const email = "";
  const password = randomPassword();

  await page.goto("/signup");

  await fillForm(page, fullName, email, password, password, accessPassword);
  await page.getByRole("button", { name: "Sign Up" }).click();

  await expect(page.getByText("Email is required")).toBeVisible();
});

test("Sign up with missing password", async ({ page }) => {
  const fullName = "";
  const email = randomEmail();
  const password = "";

  await page.goto("/signup");

  await fillForm(page, fullName, email, password, password, accessPassword);
  await page.getByRole("button", { name: "Sign Up" }).click();

  await expect(page.getByText("Password is required")).toBeVisible();
});