languard-servers-manager/frontend/tests-e2e/auth/login.spec.ts

import { test, expect } from "@playwright/test";
import { LoginPage } from "../pages/LoginPage";

test.describe("Login Flow", () => {
  let loginPage: LoginPage;

  test.beforeEach(async ({ page }) => {
    loginPage = new LoginPage(page);
    await loginPage.goto();
  });

  test("should display login form", async () => {
    await expect(loginPage.card).toBeVisible();
    await expect(loginPage.usernameInput).toBeVisible();
    await expect(loginPage.passwordInput).toBeVisible();
    await expect(loginPage.submitButton).toBeVisible();
    await expect(loginPage.submitButton).toContainText("Sign In");
  });

  test("should show Languard branding", async () => {
    await expect(loginPage.card.locator("h1")).toContainText("Languard");
    await expect(loginPage.card.locator("p")).toContainText("Server Manager");
  });

  test("should show validation errors on empty submit", async ({ page }) => {
    await loginPage.submitButton.click();
    await expect(page.locator("text=Username is required")).toBeVisible();
    await expect(page.locator("text=Password is required")).toBeVisible();
  });

  test("should show error on invalid credentials", async ({ page }) => {
    await loginPage.login("invalid", "credentials");
    await page.waitForResponse(
      (resp) => resp.url().includes("/api/auth/login"),
      { timeout: 10_000 },
    ).catch(() => {});
    await expect(loginPage.errorMessage).toBeVisible({ timeout: 10_000 });
  });

  test("should navigate to dashboard on successful login", async ({ page }) => {
    await page.route("**/api/auth/login", (route) =>
      route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify({
          success: true,
          data: {
            access_token: "mock-jwt-token",
            user: { id: 1, username: "admin", role: "admin" },
          },
        }),
      }),
    );

    await page.route("**/api/servers*", (route) =>
      route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify({ success: true, data: [] }),
      }),
    );

    await loginPage.login("admin", "password");
    await page.waitForURL("/", { timeout: 10_000 });
    await expect(page.locator("text=Dashboard")).toBeVisible();
  });

  test("should show loading state while submitting", async ({ page }) => {
    await page.route("**/api/auth/login", (route) =>
      route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify({
          success: true,
          data: {
            access_token: "mock-jwt-token",
            user: { id: 1, username: "admin", role: "admin" },
          },
        }),
        delay: 500,
      }),
    );

    await page.route("**/api/servers*", (route) =>
      route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify({ success: true, data: [] }),
      }),
    );

    await loginPage.login("admin", "password");
    await expect(loginPage.submitButton).toContainText("Signing in...");
  });
});