Monorepo for Tangled
Something went wrong. Try again.
Svelte
at icy/tmrrpn
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116<script module lang="ts"> import { defineMeta } from "@storybook/addon-svelte-csf"; import { expect, userEvent, waitFor, within } from "storybook/test"; import CommentCard from "./CommentCard.svelte"; import { sampleComments, sampleMarkup, sampleSubjectCid, sampleSubjectUri, sampleThread, soloThread } from "$fixtures/comments";
// a thread the logged-in user owns, so the edit affordance shows const myThread = { self: sampleComments.mine, replies: [] };
const { Story } = defineMeta({ title: "Comment/CommentCard", component: CommentCard, tags: ["autodocs"], args: { thread: soloThread, subjectUri: sampleSubjectUri, subjectCid: sampleSubjectCid, markup: sampleMarkup } });</script>
<!-- logged out: the reply affordance is a login prompt --><Story name="Top level only" /><Story name="With replies" args={{ thread: sampleThread }} />
<!-- logged in: clicking "Leave a reply" opens an inline reply box --><Story name="Replying" parameters={{ auth: true }} play={async ({ canvasElement }) => { const canvas = within(canvasElement); await userEvent.click(canvas.getByRole("button", { name: "Leave a reply..." })); const textarea = await waitFor(() => canvas.getByPlaceholderText(/write a reply/i)); await expect(canvas.getByRole("button", { name: "Reply" })).toBeInTheDocument(); await expect(canvas.getByRole("button", { name: "Cancel" })).toBeInTheDocument(); // the editor should be focused so the user can type immediately await waitFor(() => expect(textarea).toHaveFocus()); }}/>
<!-- logged in as the author: the edit icon opens an inline editor prefilled with the body --><Story name="Editing" args={{ thread: myThread }} parameters={{ auth: true }} play={async ({ canvasElement }) => { const canvas = within(canvasElement); await userEvent.click(canvas.getByRole("button", { name: "Edit comment" })); const textarea = await waitFor(() => canvas.getByPlaceholderText(/edit your comment/i)); await expect(textarea).toHaveValue(sampleComments.mine.body); await expect(canvas.getByRole("button", { name: "Save" })).toBeInTheDocument(); await expect(canvas.getByRole("button", { name: "Cancel" })).toBeInTheDocument(); }}/>
<!-- logged in to several accounts: the reply box carries an account picker --><Story name="Replying with several accounts" parameters={{ auth: { accounts: 2 } }} play={async ({ canvasElement }) => { const canvas = within(canvasElement); await userEvent.click(canvas.getByRole("button", { name: "Leave a reply..." })); await waitFor(() => canvas.getByPlaceholderText(/write a reply/i)); await userEvent.click(canvas.getByRole("button", { name: /comment as alice/i })); await userEvent.click(await canvas.findByRole("menuitem", { name: /bob/i })); await waitFor(() => expect(canvas.getByRole("button", { name: /comment as bob/i })).toBeVisible() ); }}/>
<!-- someone else's reply, with a moderation service configured: the actions row offers a report menu instead of edit/delete --><Story name="Reporting a reply" parameters={{ auth: true, sveltekit_experimental: { state: { page: { data: { publicConfig: { moderationServiceDid: "did:plc:labeler" } } } } } }} play={async ({ canvasElement }) => { const canvas = within(canvasElement); await userEvent.click(canvas.getByRole("button", { name: /more actions for/i })); // the actions row fades in on real hover, which a synthetic pointer cannot do, so // assert the menu is in the tree rather than painted await expect( await canvas.findByRole("menuitem", { name: /report reply/i }) ).toBeInTheDocument(); await expect(canvas.getByRole("menuitem", { name: /report user/i })).toBeInTheDocument(); expect(canvas.queryByRole("button", { name: "Edit comment" })).toBeNull(); }}/>
<!-- an edit keeps the record's author, so no picker even with several accounts --><Story name="Editing with several accounts" args={{ thread: myThread }} parameters={{ auth: { accounts: 2 } }} play={async ({ canvasElement }) => { const canvas = within(canvasElement); await userEvent.click(canvas.getByRole("button", { name: "Edit comment" })); await waitFor(() => canvas.getByPlaceholderText(/edit your comment/i)); await expect(canvas.getByRole("button", { name: "Save" })).toBeInTheDocument(); expect(canvas.queryByRole("button", { name: /comment as/i })).toBeNull(); }}/>