{ 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()); }} /> { 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(); }} /> { 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() ); }} /> { 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(); }} /> { 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(); }} />