File size: 1,702 Bytes
fd2c364 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, it, expect } from "vitest";
import { CopyableContentWrapper } from "#/components/shared/buttons/copyable-content-wrapper";
describe("CopyableContentWrapper", () => {
it("should hide the copy button by default", () => {
render(
<CopyableContentWrapper text="hello">
<p>content</p>
</CopyableContentWrapper>,
);
expect(screen.getByTestId("copy-to-clipboard")).not.toBeVisible();
});
it("should show the copy button on hover", async () => {
const user = userEvent.setup();
render(
<CopyableContentWrapper text="hello">
<p>content</p>
</CopyableContentWrapper>,
);
await user.hover(screen.getByText("content"));
expect(screen.getByTestId("copy-to-clipboard")).toBeVisible();
});
it("should copy text to clipboard on click", async () => {
const user = userEvent.setup();
render(
<CopyableContentWrapper text="copy me">
<p>content</p>
</CopyableContentWrapper>,
);
await user.click(screen.getByTestId("copy-to-clipboard"));
await waitFor(() =>
expect(navigator.clipboard.readText()).resolves.toBe("copy me"),
);
});
it("should show copied state after clicking", async () => {
const user = userEvent.setup();
render(
<CopyableContentWrapper text="hello">
<p>content</p>
</CopyableContentWrapper>,
);
await user.click(screen.getByTestId("copy-to-clipboard"));
expect(screen.getByTestId("copy-to-clipboard")).toHaveAttribute(
"aria-label",
"BUTTON$COPIED",
);
});
});
|