import { renderToString } from "react-dom/server";
import { describe, expect, test } from "vitest";
import { AppStateView } from "./App";

describe("React app dashboard state view", () => {
  test("renders loading dashboard state", () => {
    const html = renderToString(
      <AppStateView
        dashboard={{
          state: "loading",
          title: "Loading Dashboard",
          subtitle: "Fetching active model",
          message: "Waiting for the active dashboard document.",
        }}
      />,
    );

    expect(html).toContain("Loading Dashboard");
    expect(html).toContain("Fetching active model");
  });

  test("renders an accessible theme toggle with the active theme", () => {
    const html = renderToString(
      <AppStateView
        dashboard={{
          state: "loading",
          title: "Loading Dashboard",
          subtitle: "Fetching active model",
          message: "Waiting for the active dashboard document.",
        }}
        theme="dark"
        onThemeChange={() => undefined}
      />,
    );

    expect(html).toContain('data-ui-theme-toggle="true"');
    expect(html).toContain('data-ui-theme-current="dark"');
    expect(html).toContain('aria-label="Light theme"');
    expect(html).toContain('aria-pressed="false"');
    expect(html).toContain("Theme");
    expect(html).toContain("Dark");
    expect(html).toContain("Light");
  });
});