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

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

const TEST_USER = {
  token: "test-jwt-token",
  expiration: new Date(Date.now() + 60 * 60 * 1000).toISOString(),
  email: "user@seahavenind.com",
  userRoles: "Admin",
  phoneNumber: "5551234567",
  fullname: "Test User",
  id: "1",
};

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 page.addInitScript(() => {
      localStorage.removeItem("auth");
    });
    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("disables submit until email and password are valid", async ({ page }) => {
    await page.goto("/login");

    const submitButton = page.getByRole("button", { name: "Sign In" });

    await expect(submitButton).toBeDisabled();

    await page.locator("#login-email").fill("not-an-email");
    await page.locator("#login-password").fill("secret123");
    await expect(submitButton).toBeDisabled();

    await page.locator("#login-email").fill("user@seahavenind.com");
    await expect(submitButton).toBeEnabled();
  });

  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 }) => {
    await page.route("**/api/Authentication/Login", async (route) => {
      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();

    const storedAuth = await page.evaluate(() => localStorage.getItem("auth"));
    expect(storedAuth).toContain(TEST_USER.token);
    expect(storedAuth).toContain(TEST_USER.fullname);
  });
});