<script module lang="ts">
	import { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf";
	import { expect, waitFor } from "storybook/test";
	import PierreFile from "./PierreFile.svelte";

	const contents = `import { serve } from "./server";

// start the knot on the configured port
export const main = () => {
	serve({ port: 5555 });
};
`;

	type PlayContext = Pick<StoryContext<Record<string, unknown>>, "canvasElement">;

	// pierre renders into a shadow root, testing library cannot see through
	const rendersContents = async ({ canvasElement }: PlayContext) => {
		const host = canvasElement.querySelector("diffs-container");
		await expect(host?.shadowRoot).toBeTruthy();
		await waitFor(() => expect(host?.shadowRoot?.textContent).toContain("serve({ port: 5555 })"));
		await waitFor(() => expect(host?.shadowRoot?.querySelector("[data-diffs-header]")).toBeNull());
	};

	const { Story } = defineMeta({
		title: "Repo/PierreFile",
		component: PierreFile,
		tags: ["autodocs"],
		args: { name: "main.ts", contents }
	});
</script>

<Story name="TypeScript file" play={rendersContents} />

<Story
	name="Wrapped"
	args={{
		wrap: true,
		contents: `${contents}const url = "https://example.com/" + "a-very-long-path-segment-".repeat(8);\n`
	}}
	play={async (context) => {
		await rendersContents(context);
		const host = context.canvasElement.querySelector("diffs-container");
		await waitFor(() =>
			expect(host?.shadowRoot?.querySelector("[data-overflow='wrap']")).toBeTruthy()
		);
		await waitFor(() =>
			expect(host?.shadowRoot?.querySelector("[data-line] span[style]")).toBeTruthy()
		);
	}}
/>
