diff --git a/tests/CodeSnippet.test.svelte b/tests/CodeSnippet.test.svelte deleted file mode 100644 index 6ec4e88b..00000000 --- a/tests/CodeSnippet.test.svelte +++ /dev/null @@ -1,21 +0,0 @@ - - - text} - code="" - hideCopyButton - disabled - skeleton - wrapText - expanded - on:animationend - on:click - on:copy - on:expand - on:collapse -> - yarn add carbon-components-svelte - diff --git a/tests/CodeSnippet/CodeSnippet.test.ts b/tests/CodeSnippet/CodeSnippet.test.ts new file mode 100644 index 00000000..2de84a73 --- /dev/null +++ b/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(); + }); +}); diff --git a/tests/CodeSnippet/CodeSnippetCopyButton.test.svelte b/tests/CodeSnippet/CodeSnippetCopyButton.test.svelte new file mode 100644 index 00000000..5aeb500b --- /dev/null +++ b/tests/CodeSnippet/CodeSnippetCopyButton.test.svelte @@ -0,0 +1,5 @@ + + + diff --git a/tests/CodeSnippet/CodeSnippetCustomEvents.test.svelte b/tests/CodeSnippet/CodeSnippetCustomEvents.test.svelte new file mode 100644 index 00000000..e9c66680 --- /dev/null +++ b/tests/CodeSnippet/CodeSnippetCustomEvents.test.svelte @@ -0,0 +1,17 @@ + + +Copy events: {copyCount} + + diff --git a/tests/CodeSnippet/CodeSnippetExpandable.test.svelte b/tests/CodeSnippet/CodeSnippetExpandable.test.svelte new file mode 100644 index 00000000..213646a4 --- /dev/null +++ b/tests/CodeSnippet/CodeSnippetExpandable.test.svelte @@ -0,0 +1,15 @@ + + + diff --git a/tests/CodeSnippet/CodeSnippetExpandedByDefault.svelte b/tests/CodeSnippet/CodeSnippetExpandedByDefault.svelte new file mode 100644 index 00000000..16abfd84 --- /dev/null +++ b/tests/CodeSnippet/CodeSnippetExpandedByDefault.svelte @@ -0,0 +1,16 @@ + + + diff --git a/tests/CodeSnippet/CodeSnippetInline.test.svelte b/tests/CodeSnippet/CodeSnippetInline.test.svelte new file mode 100644 index 00000000..33860928 --- /dev/null +++ b/tests/CodeSnippet/CodeSnippetInline.test.svelte @@ -0,0 +1,5 @@ + + + diff --git a/tests/CodeSnippet/CodeSnippetMultiline.test.svelte b/tests/CodeSnippet/CodeSnippetMultiline.test.svelte new file mode 100644 index 00000000..4c760ea2 --- /dev/null +++ b/tests/CodeSnippet/CodeSnippetMultiline.test.svelte @@ -0,0 +1,10 @@ + + + diff --git a/tests/CodeSnippet/CodeSnippetWithCustomCopyText.test.svelte b/tests/CodeSnippet/CodeSnippetWithCustomCopyText.test.svelte new file mode 100644 index 00000000..15234936 --- /dev/null +++ b/tests/CodeSnippet/CodeSnippetWithCustomCopyText.test.svelte @@ -0,0 +1,9 @@ + + + diff --git a/tests/CodeSnippet/CodeSnippetWithHideShowMore.test.svelte b/tests/CodeSnippet/CodeSnippetWithHideShowMore.test.svelte new file mode 100644 index 00000000..c5e83566 --- /dev/null +++ b/tests/CodeSnippet/CodeSnippetWithHideShowMore.test.svelte @@ -0,0 +1,16 @@ + + + diff --git a/tests/CodeSnippet/CodeSnippetWithWrapText.test.svelte b/tests/CodeSnippet/CodeSnippetWithWrapText.test.svelte new file mode 100644 index 00000000..879fee4c --- /dev/null +++ b/tests/CodeSnippet/CodeSnippetWithWrapText.test.svelte @@ -0,0 +1,16 @@ + + +