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

// Mock @tanstack/react-router so we don't need a full router context.
// useLoaderData is supplied so the component can read the nonce from loader data.
vi.mock("@tanstack/react-router", () => ({
  createRootRoute: vi.fn((opts: { component: React.ComponentType }) => ({
    options: { component: opts.component },
    useLoaderData: () => ({ nonce: "test-nonce-abc" }),
  })),
  Outlet: () => <div data-testid="outlet" />,
}));

describe("Root route", () => {
  it("renders csp-nonce meta tag and Outlet", async () => {
    const { Route } = await import("./__root");
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const RootComponent = (Route as any).options
      .component as React.ComponentType;

    render(<RootComponent />);

    expect(screen.getByTestId("outlet")).toBeInTheDocument();
    const metaTag = document.querySelector('meta[name="csp-nonce"]');
    expect(metaTag).toBeInTheDocument();
    expect(metaTag?.getAttribute("content")).toBe("test-nonce-abc");
  });
});