test(code-snippet): add unit tests

Author: metonym

tests/CodeSnippet.test.svelte

@@ -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();
+  });
+});

tests/CodeSnippet/CodeSnippet.test.ts

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { CodeSnippet } from "carbon-components-svelte";
+</script>
+
+<CodeSnippet type="single" code="npm install --save @carbon/icons" />

tests/CodeSnippet/CodeSnippetCopyButton.test.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { CodeSnippet } from "carbon-components-svelte";
+
+  let copyCount = 0;
+
+  function handleCopy() {
+    copyCount += 1;
+  }
+</script>
+
+Copy events: {copyCount}
+
+<CodeSnippet
+  type="single"
+  code="npm install --save @carbon/icons"
+  on:copy={handleCopy}
+/>

tests/CodeSnippet/CodeSnippetCustomEvents.test.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { CodeSnippet } from "carbon-components-svelte";
+</script>
+
+<CodeSnippet
+  type="multi"
+  code={`node -v
+npm -v
+yarn -v
+git --version
+python --version
+java -version
+docker --version
+kubectl version`}
+/>

tests/CodeSnippet/CodeSnippetExpandable.test.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { CodeSnippet } from "carbon-components-svelte";
+</script>
+
+<CodeSnippet
+  type="multi"
+  expanded
+  code={`node -v
+npm -v
+yarn -v
+git --version
+python --version
+java -version
+docker --version
+kubectl version`}
+/>

tests/CodeSnippet/CodeSnippetExpandedByDefault.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { CodeSnippet } from "carbon-components-svelte";
+</script>
+
+<CodeSnippet type="inline" code="npm install -g @carbon/cli" />

tests/CodeSnippet/CodeSnippetInline.test.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { CodeSnippet } from "carbon-components-svelte";
+</script>
+
+<CodeSnippet
+  type="multi"
+  code={`node -v
+npm -v
+yarn -v`}
+/>

tests/CodeSnippet/CodeSnippetMultiline.test.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { CodeSnippet } from "carbon-components-svelte";
+</script>
+
+<CodeSnippet
+  type="single"
+  code="npm install --save @carbon/icons"
+  feedback="Custom copied text!"
+/>

tests/CodeSnippet/CodeSnippetWithCustomCopyText.test.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { CodeSnippet } from "carbon-components-svelte";
+</script>
+
+<CodeSnippet
+  type="multi"
+  showMoreLess={false}
+  code={`node -v
+npm -v
+yarn -v
+git --version
+python --version
+java -version
+docker --version
+kubectl version`}
+/>

tests/CodeSnippet/CodeSnippetWithHideShowMore.test.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { CodeSnippet } from "carbon-components-svelte";
+</script>
+
+<CodeSnippet
+  type="multi"
+  wrapText={true}
+  code={`node -v
+npm -v
+yarn -v
+git --version
+python --version
+java -version
+docker --version
+kubectl version`}
+/>