test(code-snippet): add unit tests

tests/CodeSnippet/CodeSnippet.test.ts

@@ -0,0 +1,123 @@
+import { render, screen } from "@testing-library/svelte";
+import CodeSnippetInline from "./CodeSnippetInline.test.svelte";
+import CodeSnippetMultiline from "./CodeSnippetMultiline.test.svelte";
+import CodeSnippetExpandable from "./CodeSnippetExpandable.test.svelte";
+import CodeSnippetExpandedByDefault from "./CodeSnippetExpandedByDefault.svelte";
+import CodeSnippetCopyButton from "./CodeSnippetCopyButton.test.svelte";
+import CodeSnippetCustomEvents from "./CodeSnippetCustomEvents.test.svelte";
+import CodeSnippetWithWrapText from "./CodeSnippetWithWrapText.test.svelte";
+import CodeSnippetWithHideShowMore from "./CodeSnippetWithHideShowMore.test.svelte";
+import CodeSnippetWithCustomCopyText from "./CodeSnippetWithCustomCopyText.test.svelte";
+import { user } from "../setup-tests";
+
+describe("CodeSnippet", () => {
+  test("should render inline variant", () => {
+    const { container } = render(CodeSnippetInline);
+    expect(container.querySelector(".bx--snippet--inline")).toBeInTheDocument();
+    expect(screen.getByText("npm install -g @carbon/cli")).toBeInTheDocument();
+  });
+
+  test("should render multiline variant", () => {
+    const { container } = render(CodeSnippetMultiline);
+    expect(container.querySelector(".bx--snippet--multi")).toBeInTheDocument();
+    expect(screen.getByText(/node -v/)).toBeInTheDocument();
+  });
+
+  test("should expand and collapse expandable snippet", async () => {
+    const { container } = render(CodeSnippetExpandable);
+
+    expect(
+      container.querySelector(".bx--snippet--expand"),
+    ).not.toBeInTheDocument();
+
+    const showMoreButton = screen.getByText("Show more");
+    await user.click(showMoreButton);
+
+    expect(container.querySelector(".bx--snippet--expand")).toBeInTheDocument();
+    expect(screen.getByText("Show less")).toBeInTheDocument();
+
+    const showLessButton = screen.getByText("Show less");
+    await user.click(showLessButton);
+
+    expect(
+      container.querySelector(".bx--snippet--expand"),
+    ).not.toBeInTheDocument();
+    expect(screen.getByText("Show more")).toBeInTheDocument();
+  });
+
+  test("should render expanded by default", async () => {
+    const { container } = render(CodeSnippetExpandedByDefault);
+
+    expect(container.querySelector(".bx--snippet--expand")).toBeInTheDocument();
+    expect(screen.getByText("Show less")).toBeInTheDocument();
+
+    await user.click(screen.getByText("Show less"));
+
+    expect(
+      container.querySelector(".bx--snippet--expand"),
+    ).not.toBeInTheDocument();
+    expect(screen.getByText("Show more")).toBeInTheDocument();
+  });
+
+  test("should copy text when copy button is clicked", async () => {
+    const originalClipboard = navigator.clipboard;
+    const mockClipboard = {
+      writeText: vi.fn().mockImplementation(() => Promise.resolve()),
+    };
+    Object.defineProperty(navigator, "clipboard", {
+      value: mockClipboard,
+      writable: true,
+    });
+
+    const { container } = render(CodeSnippetCopyButton);
+
+    expect(container.querySelector(".bx--snippet--single")).toBeInTheDocument();
+    expect(
+      screen.getByText("npm install --save @carbon/icons"),
+    ).toBeInTheDocument();
+
+    const copyButton = screen.getByLabelText("Copy to clipboard");
+    assert(copyButton);
+
+    await user.click(copyButton);
+    expect(mockClipboard.writeText).toHaveBeenCalledWith(
+      "npm install --save @carbon/icons",
+    );
+    expect(screen.getByText("Copied!")).toBeInTheDocument();
+
+    Object.defineProperty(navigator, "clipboard", {
+      value: originalClipboard,
+      writable: true,
+    });
+  });
+
+  test("should dispatch copy and copy error events", async () => {
+    render(CodeSnippetCustomEvents);
+
+    expect(screen.getByText("Copy events: 0")).toBeInTheDocument();
+
+    const copyButton = screen.getByLabelText("Copy to clipboard");
+    await user.click(copyButton);
+    expect(screen.getByText("Copy events: 1")).toBeInTheDocument();
+  });
+
+  test("should wrap text when wrapText is true", () => {
+    const { container } = render(CodeSnippetWithWrapText);
+    expect(
+      container.querySelector(".bx--snippet--wraptext"),
+    ).toBeInTheDocument();
+  });
+
+  test("should hide show more button when hideShowMore is true", () => {
+    render(CodeSnippetWithHideShowMore);
+    expect(screen.queryByText("Show more")).not.toBeInTheDocument();
+  });
+
+  test("should display custom copy text", async () => {
+    render(CodeSnippetWithCustomCopyText);
+
+    const copyButton = screen.getByLabelText("Copy to clipboard");
+    await user.click(copyButton);
+    expect(screen.getByText("Custom copied text!")).toBeInTheDocument();
+  });
+});