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 type { DiffFile } from "$lib/api/diff";
5 import { toFileDiffMetadata } from "./fileDiff";
6 import DiffFileCard from "./DiffFileCard.svelte";
7
8 const textFile: DiffFile = {
9 name: { old: "src/colors.ts", new: "src/colors.ts" },
10 text_fragments: [
11 {
12 OldPosition: 1,
13 OldLines: 3,
14 NewPosition: 1,
15 NewLines: 4,
16 LinesAdded: 2,
17 LinesDeleted: 1,
18 Lines: [
19 { Op: 0, Line: "export const palette = {\n" },
20 { Op: 1, Line: '\tbackground: "white",\n' },
21 { Op: 2, Line: '\tbackground: "oklch(0.98 0 0)",\n' },
22 { Op: 2, Line: '\tforeground: "oklch(0.2 0 0)",\n' },
23 { Op: 0, Line: "};\n" }
24 ]
25 }
26 ]
27 };
28
29 const renamedFile: DiffFile = {
30 name: { old: "src/old-name.ts", new: "src/new-name.ts" },
31 text_fragments: [
32 {
33 OldPosition: 1,
34 OldLines: 1,
35 NewPosition: 1,
36 NewLines: 1,
37 LinesAdded: 1,
38 LinesDeleted: 1,
39 Lines: [
40 { Op: 1, Line: "export const old = true;\n" },
41 { Op: 2, Line: "export const fresh = true;\n" }
42 ]
43 }
44 ]
45 };
46
47 const binaryFile: DiffFile = {
48 name: { old: "assets/logo.png", new: "assets/logo.png" },
49 is_binary: true
50 };
51
52 const diffFor = (file: DiffFile) => toFileDiffMetadata(file);
53
54 // pierre renders inside a shadow root, invisible to canvas queries
55 const shadowText = (canvasElement: HTMLElement) =>
56 [...canvasElement.querySelectorAll("diffs-container")]
57 .map((host) => host.shadowRoot?.textContent ?? "")
58 .join("\n");
59
60 type PlayContext = Pick<
61 StoryContext<Record<string, unknown>>,
62 "canvas" | "canvasElement" | "userEvent"
63 >;
64
65 const { Story } = defineMeta({
66 title: "Repo/DiffFileCard",
67 component: DiffFileCard,
68 tags: ["autodocs"],
69 args: {
70 file: textFile,
71 name: "src/colors.ts",
72 stat: { insertions: 2, deletions: 1, files_changed: 1 },
73 fileDiff: diffFor(textFile)
74 }
75 });
76</script>
77
78<Story
79 name="Default"
80 play={async ({ canvasElement }: PlayContext) => {
81 await waitFor(() => expect(shadowText(canvasElement)).toContain("oklch(0.98 0 0)"));
82 }}
83/>
84
85<Story
86 name="Collapse toggle"
87 play={async ({ canvas, canvasElement, userEvent }: PlayContext) => {
88 const card = canvasElement.querySelector("details")!;
89 await expect(card.open).toBe(true);
90 await userEvent.click(card.querySelector("summary")!);
91 await expect(card.open).toBe(false);
92 await userEvent.click(card.querySelector("summary")!);
93 await expect(card.open).toBe(true);
94 await expect(canvas.getByText("src/colors.ts")).toBeInTheDocument();
95 }}
96/>
97
98<Story
99 name="Renamed file"
100 args={{
101 file: renamedFile,
102 name: "src/new-name.ts",
103 fileDiff: diffFor(renamedFile)
104 }}
105 play={async ({ canvasElement }: PlayContext) => {
106 // both names live in the same flex row, match the joined text
107 const header = canvasElement.querySelector("summary")!;
108 await expect(header.textContent).toContain("src/old-name.ts");
109 await expect(header.textContent).toContain("src/new-name.ts");
110 }}
111/>
112
113<Story
114 name="Binary file"
115 args={{
116 file: binaryFile,
117 name: "assets/logo.png",
118 stat: { insertions: 0, deletions: 0, files_changed: 1 },
119 fileDiff: undefined
120 }}
121 play={async ({ canvas }: PlayContext) => {
122 await expect(
123 canvas.getByText("This is a binary file and will not be displayed.")
124 ).toBeInTheDocument();
125 }}
126/>
127
128<Story
129 name="View file link"
130 args={{ blobUrl: "/dawn/tangled/blob/master/src/colors.ts" }}
131 play={async ({ canvas }: PlayContext) => {
132 await expect(canvas.getByRole("link", { name: /view file/i })).toHaveAttribute(
133 "href",
134 "/dawn/tangled/blob/master/src/colors.ts"
135 );
136 }}
137/>