CUI-6: Add CopyButton tests (clipboard, copyAsHtml, tooltip, success reset)

Author: JeanMarcMilletScality

src/lib/components/buttonv2/CopyButton.component.test.tsx

@@ -0,0 +1,252 @@
+import "@testing-library/jest-dom";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+import { getWrapper } from "../../testUtils";
+import { CopyButton } from "./CopyButton.component";
+
+describe("CopyButton", () => {
+	const { Wrapper } = getWrapper();
+	const originalClipboard = navigator.clipboard;
+
+	beforeEach(() => {
+		Object.assign(navigator, {
+			clipboard: {
+				writeText: jest.fn(),
+				write: jest.fn(),
+			},
+		});
+		// JSDOM doesn't define ClipboardItem; needed for copyAsHtml path. Stub only — full interface not needed for tests.
+		if (typeof globalThis.ClipboardItem === "undefined") {
+			// @ts-expect-error — intentional stub for JSDOM; global ClipboardItem type expects full interface (getType, types, etc.)
+			globalThis.ClipboardItem = class {};
+		}
+	});
+
+	afterEach(() => {
+		Object.assign(navigator, { clipboard: originalClipboard });
+		jest.restoreAllMocks();
+	});
+
+	it("when writeText returns a rejected Promise, should enter the unsupported state", async () => {
+		const writeTextMock = navigator.clipboard.writeText as jest.Mock;
+		writeTextMock.mockRejectedValueOnce(new Error("Clipboard denied"));
+
+		render(<CopyButton textToCopy="test" />, { wrapper: Wrapper });
+
+		const button = screen.getByRole("button", { name: "Copy" });
+		await act(() => userEvent.click(button));
+
+		await waitFor(() => {
+			expect(writeTextMock).toHaveBeenCalledWith("test");
+		});
+
+		// Unsupported state: button should not show success, and not be aria-disabled
+		expect(
+			screen.queryByRole("button", { name: "Copied !" }),
+		).not.toBeInTheDocument();
+		const buttonAfterReject = screen.getByRole("button", { name: "Copy" });
+		expect(buttonAfterReject).not.toHaveAttribute("aria-disabled", "true");
+	});
+
+	it("during success state click does nothing; after 2s resets to idle and click works again", async () => {
+		jest.useFakeTimers();
+		try {
+			const writeTextMock = navigator.clipboard.writeText as jest.Mock;
+			writeTextMock.mockResolvedValue(undefined);
+
+			render(<CopyButton textToCopy="test" />, { wrapper: Wrapper });
+
+			await act(() =>
+				userEvent.click(screen.getByRole("button", { name: "Copy" })),
+			);
+
+			await waitFor(() => {
+				expect(
+					screen.getByRole("button", { name: "Copied !" }),
+				).toBeInTheDocument();
+			});
+
+			expect(writeTextMock).toHaveBeenCalledTimes(1);
+			const inSuccess = screen.getByRole("button", { name: "Copied !" });
+			expect(inSuccess).toHaveAttribute("aria-disabled", "true");
+
+			await act(() => userEvent.click(inSuccess));
+			expect(writeTextMock).toHaveBeenCalledTimes(1);
+
+			act(() => {
+				jest.advanceTimersByTime(2000);
+			});
+
+			await waitFor(() => {
+				expect(
+					screen.getByRole("button", { name: "Copy" }),
+				).toBeInTheDocument();
+				expect(
+					screen.getByRole("button", { name: "Copy" }),
+				).not.toHaveAttribute("aria-disabled", "true");
+			});
+
+			await act(() =>
+				userEvent.click(screen.getByRole("button", { name: "Copy" })),
+			);
+
+			await waitFor(() => {
+				expect(writeTextMock).toHaveBeenCalledTimes(2);
+			});
+		} finally {
+			jest.useRealTimers();
+		}
+	});
+
+	it("standard copy (writeText): on success shows Copied ! tooltip and aria-disabled", async () => {
+		const writeTextMock = navigator.clipboard.writeText as jest.Mock;
+		writeTextMock.mockResolvedValueOnce(undefined);
+
+		render(<CopyButton textToCopy="hello" />, { wrapper: Wrapper });
+
+		await act(() =>
+			userEvent.click(screen.getByRole("button", { name: "Copy" })),
+		);
+
+		await waitFor(() => {
+			expect(writeTextMock).toHaveBeenCalledWith("hello");
+			const button = screen.getByRole("button", { name: "Copied !" });
+			expect(button).toHaveAttribute("aria-disabled", "true");
+		});
+	});
+
+	it("copyAsHtml: calls clipboard.write and on success shows Copied ! and aria-disabled", async () => {
+		const writeMock = navigator.clipboard.write as jest.Mock;
+		writeMock.mockResolvedValueOnce(undefined);
+
+		render(<CopyButton textToCopy="<b>hi</b>" copyAsHtml />, {
+			wrapper: Wrapper,
+		});
+
+		await act(() =>
+			userEvent.click(screen.getByRole("button", { name: "Copy" })),
+		);
+
+		await waitFor(() => {
+			expect(writeMock).toHaveBeenCalledTimes(1);
+			expect(writeMock.mock.calls[0][0]).toHaveLength(1);
+			expect(
+				screen.getByRole("button", { name: "Copied !" }),
+			).toBeInTheDocument();
+			expect(screen.getByRole("button", { name: "Copied !" })).toHaveAttribute(
+				"aria-disabled",
+				"true",
+			);
+		});
+	});
+
+	it("copyAsHtml: when write rejects, enters unsupported state", async () => {
+		const writeMock = navigator.clipboard.write as jest.Mock;
+		writeMock.mockRejectedValueOnce(new Error("Denied"));
+
+		render(<CopyButton textToCopy="<b>hi</b>" copyAsHtml />, {
+			wrapper: Wrapper,
+		});
+
+		await act(() =>
+			userEvent.click(screen.getByRole("button", { name: "Copy" })),
+		);
+
+		await waitFor(() => {
+			expect(writeMock).toHaveBeenCalled();
+		});
+
+		expect(
+			screen.queryByRole("button", { name: "Copied !" }),
+		).not.toBeInTheDocument();
+		expect(screen.getByRole("button", { name: "Copy" })).not.toHaveAttribute(
+			"aria-disabled",
+			"true",
+		);
+	});
+
+	it("ghost variant without label: tooltip is Copy then Copied ! on success", async () => {
+		const writeTextMock = navigator.clipboard.writeText as jest.Mock;
+		writeTextMock.mockResolvedValueOnce(undefined);
+
+		render(<CopyButton textToCopy="x" />, { wrapper: Wrapper });
+
+		expect(screen.getByRole("button", { name: "Copy" })).toBeInTheDocument();
+
+		await act(() =>
+			userEvent.click(screen.getByRole("button", { name: "Copy" })),
+		);
+
+		await waitFor(() => {
+			expect(
+				screen.getByRole("button", { name: "Copied !" }),
+			).toBeInTheDocument();
+		});
+	});
+
+	it("ghost variant with label: tooltip is Copy {label} then Copied ! on success", async () => {
+		const writeTextMock = navigator.clipboard.writeText as jest.Mock;
+		writeTextMock.mockResolvedValueOnce(undefined);
+
+		render(<CopyButton textToCopy="x" label="key" />, { wrapper: Wrapper });
+
+		expect(
+			screen.getByRole("button", { name: "Copy key" }),
+		).toBeInTheDocument();
+
+		await act(() =>
+			userEvent.click(screen.getByRole("button", { name: "Copy key" })),
+		);
+
+		await waitFor(() => {
+			expect(
+				screen.getByRole("button", { name: "Copied !" }),
+			).toBeInTheDocument();
+		});
+	});
+
+	it("outline variant without label: tooltip is Copy then Copied! on success", async () => {
+		const writeTextMock = navigator.clipboard.writeText as jest.Mock;
+		writeTextMock.mockResolvedValueOnce(undefined);
+
+		render(<CopyButton textToCopy="x" variant="outline" />, {
+			wrapper: Wrapper,
+		});
+
+		expect(screen.getByRole("button", { name: "Copy" })).toBeInTheDocument();
+
+		await act(() =>
+			userEvent.click(screen.getByRole("button", { name: "Copy" })),
+		);
+
+		await waitFor(() => {
+			expect(
+				screen.getByRole("button", { name: "Copied!" }),
+			).toBeInTheDocument();
+		});
+	});
+
+	it("outline variant with label: tooltip is Copy {label} then Copied {label}! on success", async () => {
+		const writeTextMock = navigator.clipboard.writeText as jest.Mock;
+		writeTextMock.mockResolvedValueOnce(undefined);
+
+		render(<CopyButton variant="outline" textToCopy="x" label="key" />, {
+			wrapper: Wrapper,
+		});
+
+		expect(
+			screen.getByRole("button", { name: "Copy key" }),
+		).toBeInTheDocument();
+
+		await act(() =>
+			userEvent.click(screen.getByRole("button", { name: "Copy key" })),
+		);
+
+		await waitFor(() => {
+			expect(
+				screen.getByRole("button", { name: "Copied key!" }),
+			).toBeInTheDocument();
+		});
+	});
+});