Frontend Testing¶

import { describe, it, expect, vi, beforeEach } from "vitest";

// Mock fetch globally
const mockFetch = vi.fn();
global.fetch = mockFetch;

import { catalog } from "@/lib/api-client";

describe("catalog API", () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it("should list components", async () => {
    mockFetch.mockResolvedValueOnce({
      ok: true,
      status: 200,
      json: () => Promise.resolve({ data: [], total: 0 }),
    });

    const result = await catalog.listComponents({ take: 10 });
    expect(result.total).toBe(0);
  });
});

import { describe, it, expect, vi } from "vitest";
import { render, screen, waitFor } from "@testing-library/react";

const mockListComponents = vi.fn();
vi.mock("@/lib/api-client", () => ({
  catalog: { listComponents: (...args) => mockListComponents(...args) },
}));

import CatalogPage from "@/app/(protected)/catalog/page";

it("should display components in table", async () => {
  mockListComponents.mockResolvedValue({
    data: [{ id: "1", name: "auth-service", kind: "service" }],
    total: 1,
  });

  render(<CatalogPage />);

  await waitFor(() => {
    expect(screen.getByText("auth-service")).toBeInTheDocument();
  });
});

import userEvent from "@testing-library/user-event";

it("should filter by search text", async () => {
  const user = userEvent.setup();
  // ... render component with data

  await user.type(screen.getByPlaceholderText("Filter..."), "payment");
  expect(screen.queryByText("auth-service")).not.toBeInTheDocument();
  expect(screen.getByText("payment-api")).toBeInTheDocument();
});

import { render, screen, act } from "@testing-library/react";
import { AuthProvider, useAuth } from "@/contexts/auth-context";

function TestConsumer() {
  const { isAuthenticated, login } = useAuth();
  return <span>{isAuthenticated ? "yes" : "no"}</span>;
}

it("should start unauthenticated", () => {
  render(<AuthProvider><TestConsumer /></AuthProvider>);
  expect(screen.getByText("no")).toBeInTheDocument();
});

await waitFor(() => {
  expect(screen.getByText("expected text")).toBeInTheDocument();
});

it("should show error on API failure", async () => {
  mockApi.mockRejectedValue(new Error("Network error"));
  render(<MyPage />);
  await waitFor(() => {
    expect(screen.getByText(/error/i)).toBeInTheDocument();
  });
});

import { setupAuthStorage } from "./helpers/setup-auth-storage";

test.beforeEach(async ({ page }) => {
  await setupAuthStorage(page);
});

// 1. Catch-all — registered first, lowest priority
await page.route("**/api/v1/**", (route) =>
  route.fulfill({ status: 200, contentType: "application/json", body: "[]" })
);

// 2. Specific routes — registered last, highest priority
await page.route("**/api/v1/catalog/components**", (route) =>
  route.fulfill({
    status: 200,
    contentType: "application/json",
    body: JSON.stringify({ data: [MOCK_COMPONENT], total: 1 }),
  })
);

test.describe("Page — unauthenticated access", () => {
  test.use({ storageState: { cookies: [], origins: [] } });

  test("redirects to /login", async ({ page }) => {
    await page.route("**/socket.io/**", (route) => route.abort());
    await page.goto("/protected-page");
    await expect(page).toHaveURL(/\/login/, { timeout: 10_000 });
  });
});