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, fn } from "storybook/test";
4 import DiffTopbar from "./DiffTopbar.svelte";
5
6 type PlayContext = Pick<StoryContext<Record<string, unknown>>, "canvas" | "userEvent">;
7
8 const onToggleFiles = fn();
9 const onSetAllOpen = fn();
10
11 const { Story } = defineMeta({
12 title: "Repo/DiffTopbar",
13 component: DiffTopbar,
14 tags: ["autodocs"],
15 args: {
16 stat: { insertions: 19, deletions: 11, files_changed: 1 },
17 fileCount: 1
18 }
19 });
20</script>
21
22<Story name="Default" />
23
24<Story
25 name="Downloads"
26 args={{
27 downloadUrls: {
28 patch: "/dawn/tangled/commit/0123456789abcdef0123456789abcdef01234567.patch",
29 diff: "/dawn/tangled/commit/0123456789abcdef0123456789abcdef01234567.diff"
30 }
31 }}
32 play={async ({ canvas }: PlayContext) => {
33 await expect(canvas.getByRole("link", { name: ".patch" })).toHaveAttribute(
34 "href",
35 expect.stringContaining(".patch")
36 );
37 await expect(canvas.getByRole("link", { name: ".diff" })).toHaveAttribute(
38 "href",
39 expect.stringContaining(".diff")
40 );
41 // reloads on purpose, the client router would shadow the endpoint with the
42 // commit page's [ref] route and 404
43 for (const link of canvas.getAllByRole("link", { name: /^\./ })) {
44 await expect(link).toHaveAttribute("data-sveltekit-reload");
45 }
46 }}
47/>
48
49<Story
50 name="Toggles"
51 args={{
52 onToggleFiles,
53 onSetAllOpen,
54 allOpen: true,
55 filesOpen: true
56 }}
57 play={async ({ canvas, userEvent }: PlayContext) => {
58 await userEvent.click(canvas.getByTitle("Toggle file list"));
59 await expect(onToggleFiles).toHaveBeenCalledOnce();
60
61 await userEvent.click(canvas.getByRole("button", { name: /collapse all/i }));
62 await expect(onSetAllOpen).toHaveBeenCalledWith(false);
63 }}
64/>
65
66<Story
67 name="Collapsed"
68 args={{ allOpen: false, onSetAllOpen: fn() }}
69 play={async ({ canvas }: PlayContext) => {
70 await expect(canvas.getByRole("button", { name: /expand all/i })).toBeInTheDocument();
71 }}
72/>
73
74<Story
75 name="Split mode"
76 args={{ diffStyle: "split" }}
77 play={async ({ canvas }: PlayContext) => {
78 await expect(canvas.getByTitle("Unified diff")).toHaveAttribute("href", "?diff=unified");
79 await expect(canvas.getByTitle("Split diff")).toHaveAttribute("href", "?diff=split");
80 // replacestate navigation, no noscroll means it jumps to top
81 for (const link of [canvas.getByTitle("Unified diff"), canvas.getByTitle("Split diff")]) {
82 await expect(link).toHaveAttribute("data-sveltekit-noscroll");
83 }
84 }}
85/>
86
87<Story name="Topbar slots" asChild>
88 <DiffTopbar stat={{ insertions: 19, deletions: 11, files_changed: 1 }} fileCount={1}>
89 {#snippet center()}
90 <span class="font-mono typography-monospace-small text-foreground-muted">Round #2</span>
91 {/snippet}
92 {#snippet actions()}
93 <span class="typography-paragraph-small text-foreground-muted">review panel</span>
94 {/snippet}
95 </DiffTopbar>
96</Story>