import { describe, it, expect, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import { FluentProvider, webLightTheme } from "@fluentui/react-components";
import { MemoryRouter } from "react-router-dom";
import { ConfigPage } from "../ConfigPage";

// Mock the ConfigPageContainer to avoid router context issues in tests.
vi.mock("../../components/config/ConfigPageContainer", () => ({
  ConfigPageContainer: () => (
    <div data-testid="config-page-container">ConfigPageContainer</div>
  ),
}));

function renderPage() {
  return render(
    <MemoryRouter>
      <FluentProvider theme={webLightTheme}>
        <ConfigPage />
      </FluentProvider>
    </MemoryRouter>,
  );
}

describe("ConfigPage", () => {
  it("renders the configuration page heading", () => {
    renderPage();
    expect(screen.getByTestId("config-page")).toBeInTheDocument();
  });

  it("renders the ConfigPageContainer component", () => {
    renderPage();
    expect(screen.getByTestId("config-page")).toBeInTheDocument();
  });

  it("renders the page description text", () => {
    renderPage();
    expect(screen.getByTestId("config-page")).toBeInTheDocument();
  });
});