import { MantineProvider, v8CssVariablesResolver } from "@mantine/core";
import { MarkdownViewer } from "@src/primitives/MarkdownViewer";
import { MANTINE_THEME } from "@src/theme/mantine";
import { describe, expect, it } from "vitest";
import { mountStory, nextFrame } from "../../_setup/e2e-helpers";
import { md, mdViewer } from "../../_setup/markdown-classes";

const FIXTURE = `# Hello

Paragraph **bold**.
`;

describe("MarkdownViewer / render", () => {
    it("exercises shared preview class names without mounting CodeMirror", async () => {
        mountStory(
            <MantineProvider
                theme={MANTINE_THEME}
                cssVariablesResolver={v8CssVariablesResolver}
                forceColorScheme="dark"
            >
                <MarkdownViewer content={FIXTURE} />
            </MantineProvider>,
        );
        await nextFrame();
        await nextFrame();

        const root = document.querySelector(`.${mdViewer.viewerRoot}`);
        expect(root).not.toBeNull();
        expect(document.querySelector(".cm-editor")).toBeNull();

        expect(root?.querySelector(`.${md.heading}`)).not.toBeNull();
        expect(root?.querySelector(`.${md.h1}`)).not.toBeNull();
        expect(root?.querySelector(`.${md.strong}`)).not.toBeNull();
    });
});
