alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { defineMeta } from "@storybook/addon-svelte-csf";
3 import { expect, userEvent, waitFor, within } from "storybook/test";
4 import CommentCard from "./CommentCard.svelte";
5 import MockAuthProvider from "$lib/components/testing/MockAuthProvider.svelte";
6 import {
7 sampleComments,
8 sampleMarkup,
9 sampleSubjectCid,
10 sampleSubjectUri,
11 sampleThread,
12 soloThread
13 } from "./sampleComments";
14
15 // a thread the logged-in user owns, so the edit affordance shows
16 const myThread = { self: sampleComments.mine, replies: [] };
17
18 const { Story } = defineMeta({
19 title: "Comment/CommentCard",
20 component: CommentCard,
21 tags: ["autodocs"],
22 args: {
23 thread: soloThread,
24 subjectUri: sampleSubjectUri,
25 subjectCid: sampleSubjectCid,
26 markup: sampleMarkup
27 }
28 });
29</script>
30
31<!-- logged out: the reply affordance is a login prompt -->
32<Story name="Top level only" />
33<Story name="With replies" args={{ thread: sampleThread }} />
34
35<!-- logged in: clicking "Leave a reply" opens an inline reply box -->
36<Story
37 name="Replying"
38 play={async ({ canvasElement }) => {
39 const canvas = within(canvasElement);
40 await userEvent.click(canvas.getByRole("button", { name: "Leave a reply..." }));
41 const textarea = await waitFor(() => canvas.getByPlaceholderText(/write a reply/i));
42 await expect(canvas.getByRole("button", { name: "Reply" })).toBeInTheDocument();
43 await expect(canvas.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
44 // the editor should be focused so the user can type immediately
45 await waitFor(() => expect(textarea).toHaveFocus());
46 }}
47>
48 {#snippet template(args)}
49 <MockAuthProvider>
50 <CommentCard {...args} />
51 </MockAuthProvider>
52 {/snippet}
53</Story>
54
55<!-- logged in as the author: the edit icon opens an inline editor prefilled with the body -->
56<Story
57 name="Editing"
58 args={{ thread: myThread }}
59 play={async ({ canvasElement }) => {
60 const canvas = within(canvasElement);
61 await userEvent.click(canvas.getByRole("button", { name: "Edit comment" }));
62 const textarea = await waitFor(() => canvas.getByPlaceholderText(/edit your comment/i));
63 await expect(textarea).toHaveValue(sampleComments.mine.body);
64 await expect(canvas.getByRole("button", { name: "Save" })).toBeInTheDocument();
65 await expect(canvas.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
66 }}
67>
68 {#snippet template(args)}
69 <MockAuthProvider>
70 <CommentCard {...args} />
71 </MockAuthProvider>
72 {/snippet}
73</Story>