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, userEvent } from "storybook/test";
4 import CommitLogView from "./CommitLogView.svelte";
5 import type { CommitSummary } from "./types";
6
7 const commit = (index: number): CommitSummary => ({
8 hash: `${String(index).padStart(8, "0")}56789abcdef0123456789abcdef01234567`.slice(0, 40),
9 shortHash: String(index).padStart(8, "0"),
10 subject: `commit number ${index}`,
11 body: index === 1 ? "a longer explanation hidden behind the disclosure." : "",
12 authorName: "dawn",
13 authorEmail: "dawn@tangled.org",
14 when: "2026-07-28T09:00:00Z"
15 });
16 const commits = Array.from({ length: 12 }, (_, index) => commit(index + 1));
17 type PlayContext = Pick<StoryContext<Record<string, unknown>>, "canvas">;
18
19 const firstPage = async ({ canvas }: PlayContext) => {
20 await expect(canvas.queryByRole("link", { name: "Previous" })).toBeNull();
21 const next = canvas.getByRole("link", { name: "Next" });
22 await expect(next).toHaveAttribute("href", "/dawn/tangled/commits/main?page=2");
23
24 await expect(canvas.getAllByTitle("Copy SHA")).toHaveLength(commits.length);
25 await expect(canvas.getAllByTitle("Browse repository at this commit")).toHaveLength(
26 commits.length * 2
27 );
28
29 const chip = canvas.getAllByRole("link", { name: commits[0].shortHash })[0];
30 await expect(chip).toHaveAttribute("href", `/dawn/tangled/commit/${commits[0].hash}`);
31 const tree = canvas.getAllByTitle("Browse repository at this commit")[0];
32 await expect(tree).toHaveAttribute("href", `/dawn/tangled/tree/${commits[0].hash}`);
33 };
34
35 const middlePage = async ({ canvas }: PlayContext) => {
36 const prev = canvas.getByRole("link", { name: "Previous" });
37 const next = canvas.getByRole("link", { name: "Next" });
38 await expect(prev).toHaveAttribute("href", "/dawn/tangled/commits/main?page=3");
39 await expect(next).toHaveAttribute("href", "/dawn/tangled/commits/main?page=5");
40 };
41
42 const bodyExpand = async ({ canvas }: PlayContext) => {
43 // desktop and mobile rows each render a toggle
44 const toggle = canvas.getAllByRole("button", { name: "Toggle commit body" })[0];
45 await expect(canvas.queryByText(/a longer explanation/)).toBeNull();
46 await userEvent.click(toggle);
47 await expect(toggle).toHaveAttribute("aria-expanded", "true");
48 await expect(canvas.getAllByText(/a longer explanation/).length).toBeGreaterThan(0);
49 };
50
51 const emptyLog = async ({ canvas }: PlayContext) => {
52 await expect(canvas.getByText("No commits at main.")).toBeVisible();
53 await expect(canvas.queryByRole("link", { name: "Next" })).toBeNull();
54 };
55
56 const { Story } = defineMeta({
57 title: "Repo/CommitLogView",
58 component: CommitLogView,
59 tags: ["autodocs"],
60 args: {
61 ownerHandle: "dawn",
62 repoName: "tangled",
63 ref: "main",
64 commits,
65 tagsByCommit: {
66 [commits[0].hash]: ["v1.0.0"]
67 },
68 page: 1,
69 pageCount: 5
70 }
71 });
72</script>
73
74<Story name="First page" play={firstPage} />
75<Story name="Middle page" args={{ page: 4 }} play={middlePage} />
76<Story name="Expandable body" play={bodyExpand} />
77<Story name="Empty log" args={{ commits: [], pageCount: 1 }} play={emptyLog} />