Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109<script module lang="ts"> import { defineMeta } from "@storybook/addon-svelte-csf"; import { expect, userEvent, waitFor, within } from "storybook/test"; import CommentCard from "$lib/components/comment/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: the reply field is always there; its button only appears once there is text --><Story name="Replying" parameters={{ auth: true }} play={async ({ canvasElement }) => { const canvas = within(canvasElement); const textarea = canvas.getByPlaceholderText("Leave a reply..."); expect(canvas.queryByRole("button", { name: "Reply" })).toBeNull(); expect(canvas.queryByRole("switch")).toBeNull(); await userEvent.type(textarea, "first line{Shift>}{Enter}{/Shift}second line"); await expect(canvas.getByRole("button", { name: "Reply" })).toBeInTheDocument(); expect(canvas.queryByRole("button", { name: "Cancel" })).toBeNull(); await userEvent.clear(textarea); await waitFor(() => expect(canvas.queryByRole("button", { name: "Reply" })).toBeNull()); }}/>
<!-- 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(); }}/>
<Story name="Reporting a reply" args={{ thread: sampleThread }} 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 camsmith\.dev's reply/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();
await userEvent.click( canvas.getByRole("button", { name: /more actions for byjp\.me's comment/i }) ); await expect( await canvas.findByRole("menuitem", { name: /report comment/i }) ).toBeInTheDocument(); }}/>
<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(); }}/>