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 } from "storybook/test";
4 import BlobHeader from "./BlobHeader.svelte";
5
6 type PlayContext = Pick<
7 StoryContext<Record<string, unknown>>,
8 "canvas" | "canvasElement" | "userEvent"
9 >;
10
11 const copiesContents = async ({ canvas, userEvent }: PlayContext) => {
12 const written: string[] = [];
13 Object.defineProperty(navigator, "clipboard", {
14 value: { writeText: async (text: string) => written.push(text) },
15 configurable: true
16 });
17 await userEvent.click(canvas.getByRole("button", { name: "Copy contents" }));
18 await expect(written).toEqual(["export const answer = 42;\n"]);
19
20 await expect(canvas.getByRole("link", { name: "View raw" })).toHaveAttribute(
21 "href",
22 "/dawn/tangled/raw/main/web/src/lib/components/repo/BlobView.svelte"
23 );
24 const download = canvas.getByRole("link", { name: "Download" });
25 await expect(download).toHaveAttribute("download", "BlobView.svelte");
26 };
27
28 const showsLanguageChip = async ({ canvas, canvasElement }: PlayContext) => {
29 await expect(canvas.getByText("Svelte")).toBeVisible();
30 await expect(canvasElement.querySelector(".size-2.rounded-full")).not.toBeNull();
31 };
32
33 const flipsView = async ({ canvas, userEvent }: PlayContext) => {
34 await userEvent.click(canvas.getByRole("button", { name: "View code" }));
35 await expect(canvas.getByRole("button", { name: "View rendered" })).toBeVisible();
36 };
37
38 const { Story } = defineMeta({
39 title: "Repo/BlobHeader",
40 component: BlobHeader,
41 tags: ["autodocs"],
42 args: {
43 ownerHandle: "dawn",
44 repoName: "tangled",
45 ref: "main",
46 path: "web/src/lib/components/repo/BlobView.svelte",
47 kind: "code",
48 sizeLabel: "4.2 kB",
49 lines: 87,
50 copyText: "export const answer = 42;\n"
51 }
52 });
53</script>
54
55<Story name="Code file" play={copiesContents} />
56
57<Story
58 name="Language chip"
59 args={{ path: "web/src/App.svelte", language: "Svelte" }}
60 play={showsLanguageChip}
61/>
62
63<Story
64 name="Markdown rendered"
65 args={{ kind: "markup", path: "docs/guide.md", view: "rendered" }}
66 play={flipsView}
67/>
68
69<Story
70 name="Wrap toggle"
71 args={{ showWrap: true }}
72 play={async ({ canvas, userEvent }: PlayContext) => {
73 const toggle = canvas.getByRole("checkbox", { name: "Wrap" });
74 await expect(toggle).not.toBeChecked();
75 await userEvent.click(toggle);
76 await expect(toggle).toBeChecked();
77 }}
78/>
79
80<Story
81 name="Submodule"
82 args={{ kind: "submodule", path: "vendor/spindle", sizeLabel: null, lines: null, copyText: null }}
83 play={async ({ canvas }: PlayContext) => {
84 await expect(canvas.getByText("spindle")).toBeVisible();
85 await expect(canvas.queryByRole("link", { name: "View raw" })).toBeNull();
86 await expect(canvas.queryByRole("button", { name: "Download" })).toBeNull();
87 }}
88/>