test(copy-button): add unit tests

This commit is contained in:
Eric Liu 2025-03-15 17:50:24 -07:00
commit 9b3f2e0919
3 changed files with 95 additions and 11 deletions

View file

@ -1,11 +0,0 @@
<script lang="ts">
import { CopyButton } from "carbon-components-svelte";
</script>
<CopyButton
text="text"
on:click
on:copy
copy={(text) => text}
feedback="Copied to clipboard"
/>

View file

@ -0,0 +1,26 @@
<script lang="ts">
import { CopyButton } from "carbon-components-svelte";
</script>
<CopyButton
text="text"
iconDescription="Basic"
on:copy={() => {
console.log("copied");
}}
/>
<CopyButton
iconDescription="Custom feedback"
text="text"
feedback="Copied to clipboard"
feedbackTimeout={0}
/>
<CopyButton
text="Custom copy function"
iconDescription="Custom copy function"
copy={(text) => {
console.log(`Custom copy: ${text}`);
}}
/>

View file

@ -0,0 +1,69 @@
import { render, screen } from "@testing-library/svelte";
import { user } from "../setup-tests";
import CopyButton from "./CopyButton.test.svelte";
describe("CopyButton", () => {
const getCopyButton = (label: string) =>
screen.getByRole("button", { name: label });
beforeEach(() => {
Object.defineProperty(navigator, "clipboard", {
value: { writeText: () => Promise.resolve() },
writable: true,
});
});
it("renders and functions correctly", async () => {
const consoleLog = vi.spyOn(console, "log");
render(CopyButton);
const button = getCopyButton("Basic");
expect(button).toHaveAttribute("aria-live", "polite");
await user.click(button);
expect(consoleLog).toHaveBeenCalledWith("copied");
const feedback = button.querySelector(".bx--copy-btn__feedback");
expect(feedback).toHaveTextContent("Copied!");
});
it("supports custom feedback text and timeout", async () => {
render(CopyButton);
const button = getCopyButton("Custom feedback");
await user.click(button);
const feedback = button.querySelector(".bx--copy-btn__feedback");
expect(feedback).toHaveTextContent("Copied to clipboard");
await new Promise((resolve) => setTimeout(resolve, 0));
expect(button).toHaveClass("bx--copy-btn--fade-out");
});
it("supports custom copy function", async () => {
const consoleLog = vi.spyOn(console, "log");
const clipboard = vi.spyOn(navigator.clipboard, "writeText");
render(CopyButton);
const button = getCopyButton("Custom copy function");
await user.click(button);
expect(consoleLog).toHaveBeenCalledWith(
"Custom copy: Custom copy function",
);
expect(clipboard).not.toHaveBeenCalled();
});
it("handles clipboard API errors", async () => {
const consoleLog = vi.spyOn(console, "log");
Object.defineProperty(navigator, "clipboard", {
value: { writeText: () => Promise.reject("Clipboard error") },
writable: true,
});
render(CopyButton);
const button = getCopyButton("Basic");
await user.click(button);
expect(consoleLog).toHaveBeenCalledWith("Clipboard error");
});
});