alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf";
3 import { expect, waitFor } from "storybook/test";
4 import PierreFile from "./PierreFile.svelte";
5
6 const contents = `import { serve } from "./server";
7
8// start the knot on the configured port
9export const main = () => {
10 serve({ port: 5555 });
11};
12`;
13
14 type PlayContext = Pick<StoryContext<Record<string, unknown>>, "canvasElement">;
15
16 // pierre renders into a shadow root, testing library cannot see through
17 const rendersContents = async ({ canvasElement }: PlayContext) => {
18 const host = canvasElement.querySelector("diffs-container");
19 await expect(host?.shadowRoot).toBeTruthy();
20 await waitFor(() => expect(host?.shadowRoot?.textContent).toContain("serve({ port: 5555 })"));
21 await waitFor(() => expect(host?.shadowRoot?.querySelector("[data-diffs-header]")).toBeNull());
22 };
23
24 const { Story } = defineMeta({
25 title: "Repo/PierreFile",
26 component: PierreFile,
27 tags: ["autodocs"],
28 args: { name: "main.ts", contents }
29 });
30</script>
31
32<Story name="TypeScript file" play={rendersContents} />
33
34<Story
35 name="Wrapped"
36 args={{
37 wrap: true,
38 contents: `${contents}const url = "https://example.com/" + "a-very-long-path-segment-".repeat(8);\n`
39 }}
40 play={async (context) => {
41 await rendersContents(context);
42 const host = context.canvasElement.querySelector("diffs-container");
43 await waitFor(() =>
44 expect(host?.shadowRoot?.querySelector("[data-overflow='wrap']")).toBeTruthy()
45 );
46 await waitFor(() =>
47 expect(host?.shadowRoot?.querySelector("[data-line] span[style]")).toBeTruthy()
48 );
49 }}
50/>