languard-servers-manager/frontend/tests-e2e/dashboard/dashboard.spec.ts

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

test.describe("Dashboard", () => {
  let dashboardPage: DashboardPage;

  test.beforeEach(async ({ page }) => {
    // Set up auth token so we're logged in
    await page.addInitScript(() => {
      localStorage.setItem("languard_token", "mock-jwt-token");
    });

    // Mock the servers API
    await page.route("**/api/servers*", (route) =>
      route.fulfill({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify({
          success: true,
          data: [
            {
              id: 1,
              name: "Arma3 Main Server",
              game_type: "arma3",
              status: "running",
              port: 2302,
              max_players: 64,
              current_players: 32,
              restart_count: 2,
              auto_restart: true,
              created_at: "2026-01-01T00:00:00Z",
            },
            {
              id: 2,
              name: "Arma3 Test Server",
              game_type: "arma3",
              status: "stopped",
              port: 2303,
              max_players: 32,
              current_players: 0,
              restart_count: 0,
              auto_restart: false,
              created_at: "2026-01-02T00:00:00Z",
            },
          ],
        }),
      }),
    );

    dashboardPage = new DashboardPage(page);
    await dashboardPage.goto();
  });

  test("should display dashboard header", async () => {
    await expect(dashboardPage.content).toBeVisible();
    await expect(dashboardPage.content.locator("h1")).toContainText("Dashboard");
  });

  test("should show server count", async () => {
    await expect(dashboardPage.content.locator("text=2 servers configured")).toBeVisible();
  });

  test("should render server cards", async () => {
    const count = await dashboardPage.getServerCount();
    expect(count).toBe(2);
  });

  test("should display server names in cards", async () => {
    const name = await dashboardPage.getServerCardName(0);
    expect(name).toContain("Arma3 Main Server");
  });

  test("should show Add Server button", async () => {
    await expect(dashboardPage.addServerButton).toBeVisible();
    await expect(dashboardPage.addServerButton).toContainText("Add Server");
  });

  test("should show sidebar with server list", async () => {
    await expect(dashboardPage.sidebar).toBeVisible();
    await expect(dashboardPage.sidebar.locator("text=Servers")).toBeVisible();
    await expect(dashboardPage.sidebar.locator("text=Arma3 Main Server")).toBeVisible();
  });

  test("should show Stop button for running server", async () => {
    const firstCard = dashboardPage.serverCards.nth(0);
    await expect(firstCard.locator('button[aria-label^="Stop"]')).toBeVisible();
  });

  test("should show Start button for stopped server", async () => {
    const secondCard = dashboardPage.serverCards.nth(1);
    await expect(secondCard.locator('button[aria-label^="Start"]')).toBeVisible();
  });

  test("should display player count in server card", async () => {
    const firstCard = dashboardPage.serverCards.nth(0);
    await expect(firstCard.locator("text=32/64")).toBeVisible();
  });

  test("should navigate to server detail on card click", async ({ page }) => {
    const firstCard = dashboardPage.serverCards.nth(0);
    const link = firstCard.locator("xpath=ancestor::a");
    await link.click();
    await expect(page).toHaveURL(/\/servers\/1/);
  });
});

test.describe("Dashboard - Empty State", () => {
  test("should show empty state when no servers", async ({ page }) => {
    await page.addInitScript(() => {
      localStorage.setItem("languard_token", "mock-jwt-token");
    });

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

    const dashboardPage = new DashboardPage(page);
    await dashboardPage.goto();

    await expect(dashboardPage.emptyState).toBeVisible();
    await expect(dashboardPage.emptyState.locator("text=No servers configured yet")).toBeVisible();
  });
});

test.describe("Dashboard - Error State", () => {
  test("should show error state when API fails", async ({ page }) => {
    await page.addInitScript(() => {
      localStorage.setItem("languard_token", "mock-jwt-token");
    });

    await page.route("**/api/servers*", (route) =>
      route.fulfill({
        status: 500,
        contentType: "application/json",
        body: JSON.stringify({ success: false, error: "Internal Server Error" }),
      }),
    );

    const dashboardPage = new DashboardPage(page);
    await dashboardPage.goto();

    await expect(dashboardPage.errorMessage).toBeVisible({ timeout: 15_000 });
  });
});