Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104<script module lang="ts"> import { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf"; import { expect, fn, userEvent } from "storybook/test"; import CommitLogView from "$lib/components/repo/CommitLogView.svelte"; import { pipelinesByCommitHash } from "$fixtures/pipelines"; import type { CommitSummary } from "$lib/components/repo/types";
const commit = (index: number): CommitSummary => ({ hash: `${String(index).padStart(8, "0")}56789abcdef0123456789abcdef01234567`.slice(0, 40), shortHash: String(index).padStart(8, "0"), subject: `commit number ${index}`, body: index === 1 ? "a longer explanation hidden behind the disclosure." : "", authorName: "dawn", authorEmail: "dawn@tangled.org", when: "2026-07-28T09:00:00Z" }); const commits = Array.from({ length: 12 }, (_, index) => commit(index + 1)); const skeletonCommits = Array.from({ length: 60 }, (_, index) => commit(index + 1)); const onPageChange = fn(); type PlayContext = Pick<StoryContext<Record<string, unknown>>, "canvas">;
const firstPage = async ({ canvas }: PlayContext) => { await expect(canvas.getByRole("button", { name: "Previous page" })).toHaveAttribute( "aria-disabled", "true" ); const next = canvas.getByRole("button", { name: "Next page" }); await expect(next).not.toHaveAttribute("aria-disabled"); await expect(canvas.getByRole("button", { name: "Page 1" })).toHaveAttribute( "aria-current", "page" ); await userEvent.click(next); await expect(onPageChange).toHaveBeenCalledWith(2);
await expect(canvas.getAllByTitle("Copy SHA")).toHaveLength(commits.length * 2); await expect(canvas.getAllByTitle("Browse repository at this commit")).toHaveLength( commits.length * 2 );
const chip = canvas.getAllByRole("link", { name: commits[0].shortHash })[0]; await expect(chip).toHaveAttribute("href", `/dawn/tangled/commit/${commits[0].hash}`); const tree = canvas.getAllByTitle("Browse repository at this commit")[0]; await expect(tree).toHaveAttribute("href", `/dawn/tangled/tree/${commits[0].hash}`); };
const middlePage = async ({ canvas }: PlayContext) => { await expect(canvas.getByRole("button", { name: "Previous page" })).not.toHaveAttribute( "aria-disabled" ); await expect(canvas.getByRole("button", { name: "Next page" })).not.toHaveAttribute( "aria-disabled" ); await expect(canvas.getByRole("button", { name: "Page 4" })).toHaveAttribute( "aria-current", "page" ); };
const bodyExpand = async ({ canvas }: PlayContext) => { // desktop and mobile rows each render a toggle const toggle = canvas.getAllByRole("button", { name: "Toggle commit body" })[0]; await expect(canvas.queryByText(/a longer explanation/)).toBeNull(); await userEvent.click(toggle); await expect(toggle).toHaveAttribute("aria-expanded", "true"); await expect(canvas.getAllByText(/a longer explanation/).length).toBeGreaterThan(0); };
const emptyLog = async ({ canvas }: PlayContext) => { await expect(canvas.getByText("No commits at main.")).toBeVisible(); await expect(canvas.queryByRole("navigation", { name: "Pagination" })).toBeNull(); };
const { Story } = defineMeta({ title: "Repo/CommitLogView", component: CommitLogView, tags: ["autodocs"], args: { ownerHandle: "dawn", repoName: "tangled", ref: "main", commits, tagsByCommit: { [commits[0].hash]: ["v1.0.0"] }, page: 1, pageCount: 5, onPageChange } });</script>
<Story name="First page" play={firstPage} /><Story name="Pipeline statuses" args={{ pipelineStatuses: Promise.resolve(pipelinesByCommitHash(commits.map((c) => c.hash))) }}/><Story name="Skeleton fixture" args={{ commits: skeletonCommits }} /><Story name="Middle page" args={{ page: 4 }} play={middlePage} /><Story name="Expandable body" play={bodyExpand} /><Story name="Empty log" args={{ commits: [], pageCount: 1 }} play={emptyLog} />