shoc-frontend-new/e2e/auth/login.spec.ts

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

const TEST_USER = {
  id: 1,
  email: "user@seahavenind.com",
  name: "Test User",
};

async function mockSession(page: Page, isAuthenticated: () => boolean = () => false) {
  await page.route("**/api/Authentication/GetCurrentUser", async (route) => {
    if (isAuthenticated()) {
      await route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify({ data: TEST_USER }),
      });
      return;
    }

    await route.fulfill({
      status: 401,
      contentType: "application/json",
      body: JSON.stringify({ message: "Unauthorized" }),
    });
  });
}

async function mockDashboardStats(page: Page) {
  await page.route("**/api/Dashboard/Stats", async (route) => {
    await route.fulfill({
      status: 200,
      contentType: "application/json",
      body: JSON.stringify({
        data: {
          openWorkOrders: 0,
          pendingApprovals: 0,
          scheduledPMs: 0,
          activeAssets: 0,
        },
      }),
    });
  });
}

test.describe("Login page", () => {
  test.beforeEach(async ({ page }) => {
    await mockSession(page);
    await mockDashboardStats(page);
  });

  test("loads login page with form fields", async ({ page }) => {
    await page.goto("/login");

    await expect(page.getByRole("heading", { name: "Welcome back" })).toBeVisible();
    await expect(page.locator("#login-email")).toBeVisible();
    await expect(page.locator("#login-password")).toBeVisible();
    await expect(page.getByRole("button", { name: "Sign In" })).toBeVisible();
  });

  test("shows client-side validation errors on empty submit", async ({ page }) => {
    await page.goto("/login");

    await page.getByRole("button", { name: "Sign In" }).click();

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

  test("shows error message for invalid credentials", async ({ page }) => {
    await page.route("**/api/Authentication/Login", async (route) => {
      await route.fulfill({
        status: 401,
        contentType: "application/json",
        body: JSON.stringify({ message: "Invalid credentials" }),
      });
    });

    await page.goto("/login");

    await page.locator("#login-email").fill("user@seahavenind.com");
    await page.locator("#login-password").fill("wrong-password");
    await page.getByRole("button", { name: "Sign In" }).click();

    await expect(page.getByText("Invalid email or password. Please try again.")).toBeVisible();
    await expect(page).toHaveURL(/\/login$/);
  });

  test("logs in successfully and navigates to dashboard", async ({ page }) => {
    let authenticated = false;

    await page.unroute("**/api/Authentication/GetCurrentUser");
    await mockSession(page, () => authenticated);

    await page.route("**/api/Authentication/Login", async (route) => {
      authenticated = true;
      await route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify({ data: TEST_USER }),
      });
    });

    await page.goto("/login");

    await page.locator("#login-email").fill("user@seahavenind.com");
    await page.locator("#login-password").fill("secret123");
    await page.getByRole("button", { name: "Sign In" }).click();

    await expect(page).toHaveURL(/\/$/);
    await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible();
    await expect(page.getByRole("heading", { name: "Welcome back" })).not.toBeVisible();
  });
});