From cee676331a26ac8c00663c28fc29ab4f9535360e Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Sun, 29 Dec 2024 12:51:06 -0800 Subject: [PATCH] test(accordion): add unit tests (#2079) --- tests/Accordion.test.svelte | 219 ------------------ .../Accordion/Accordion.disabled.test.svelte | 27 +++ .../Accordion.programmatic.test.svelte | 36 +++ .../Accordion/Accordion.skeleton.test.svelte | 5 + tests/Accordion/Accordion.test.svelte | 27 +++ tests/Accordion/Accordion.test.ts | 114 +++++++++ tests/App.test.svelte | 30 +++ 7 files changed, 239 insertions(+), 219 deletions(-) delete mode 100644 tests/Accordion.test.svelte create mode 100644 tests/Accordion/Accordion.disabled.test.svelte create mode 100644 tests/Accordion/Accordion.programmatic.test.svelte create mode 100644 tests/Accordion/Accordion.skeleton.test.svelte create mode 100644 tests/Accordion/Accordion.test.svelte create mode 100644 tests/Accordion/Accordion.test.ts diff --git a/tests/Accordion.test.svelte b/tests/Accordion.test.svelte deleted file mode 100644 index aa42a525..00000000 --- a/tests/Accordion.test.svelte +++ /dev/null @@ -1,219 +0,0 @@ - - - - -

- Natural Language Classifier uses advanced natural language processing and - machine learning techniques to create custom classification models. Users - train their data and the service predicts the appropriate category for the - inputted text. -

- - -

- Analyze text to extract meta-data from content such as concepts, entities, - emotion, relations, sentiment and more. -

- - -

- Translate text, documents, and websites from one language to another. - Create industry or region-specific translations via the service's - customization capability. -

- - - - - -

- Natural Language Classifier uses advanced natural language processing and - machine learning techniques to create custom classification models. Users - train their data and the service predicts the appropriate category for the - inputted text. -

- - -

- Analyze text to extract meta-data from content such as concepts, entities, - emotion, relations, sentiment and more. -

- - -

- Translate text, documents, and websites from one language to another. - Create industry or region-specific translations via the service's - customization capability. -

- - - - - -
-
Natural Language Classifier
-
AI / Machine Learning
-
-

- Natural Language Classifier uses advanced natural language processing and - machine learning techniques to create custom classification models. Users - train their data and the service predicts the appropriate category for the - inputted text. -

- - -
-
Natural Language Understanding
-
AI / Machine Learning
-
-

- Analyze text to extract meta-data from content such as concepts, entities, - emotion, relations, sentiment and more. -

- - -
-
Language Translator
-
AI / Machine Learning
-
-

- Translate text, documents, and websites from one language to another. - Create industry or region-specific translations via the service's - customization capability. -

- - - - - -

- Natural Language Classifier uses advanced natural language processing and - machine learning techniques to create custom classification models. Users - train their data and the service predicts the appropriate category for the - inputted text. -

- - -

- Analyze text to extract meta-data from content such as concepts, entities, - emotion, relations, sentiment and more. -

- - -

- Translate text, documents, and websites from one language to another. - Create industry or region-specific translations via the service's - customization capability. -

- - - - - -

- Natural Language Classifier uses advanced natural language processing and - machine learning techniques to create custom classification models. Users - train their data and the service predicts the appropriate category for the - inputted text. -

- - -

- Analyze text to extract meta-data from content such as concepts, entities, - emotion, relations, sentiment and more. -

- - -

- Translate text, documents, and websites from one language to another. - Create industry or region-specific translations via the service's - customization capability. -

- - - - - -

- Natural Language Classifier uses advanced natural language processing and - machine learning techniques to create custom classification models. Users - train their data and the service predicts the appropriate category for the - inputted text. -

- - -

- Analyze text to extract meta-data from content such as concepts, entities, - emotion, relations, sentiment and more. -

- - -

- Translate text, documents, and websites from one language to another. - Create industry or region-specific translations via the service's - customization capability. -

- - - - - -

- Natural Language Classifier uses advanced natural language processing and - machine learning techniques to create custom classification models. Users - train their data and the service predicts the appropriate category for the - inputted text. -

- - -

- Analyze text to extract meta-data from content such as concepts, entities, - emotion, relations, sentiment and more. -

- - -

- Translate text, documents, and websites from one language to another. - Create industry or region-specific translations via the service's - customization capability. -

- - - - - -

- Natural Language Classifier uses advanced natural language processing and - machine learning techniques to create custom classification models. Users - train their data and the service predicts the appropriate category for the - inputted text. -

- - -

- Analyze text to extract meta-data from content such as concepts, entities, - emotion, relations, sentiment and more. -

- - -

- Translate text, documents, and websites from one language to another. - Create industry or region-specific translations via the service's - customization capability. -

- - - - - - - - - - - - - - diff --git a/tests/Accordion/Accordion.disabled.test.svelte b/tests/Accordion/Accordion.disabled.test.svelte new file mode 100644 index 00000000..623ad005 --- /dev/null +++ b/tests/Accordion/Accordion.disabled.test.svelte @@ -0,0 +1,27 @@ + + + + +

+ Natural Language Classifier uses advanced natural language processing and + machine learning techniques to create custom classification models. Users + train their data and the service predicts the appropriate category for the + inputted text. +

+ + +

+ Analyze text to extract meta-data from content such as concepts, entities, + emotion, relations, sentiment and more. +

+ + +

+ Translate text, documents, and websites from one language to another. + Create industry or region-specific translations via the service's + customization capability. +

+ + diff --git a/tests/Accordion/Accordion.programmatic.test.svelte b/tests/Accordion/Accordion.programmatic.test.svelte new file mode 100644 index 00000000..0d07a61f --- /dev/null +++ b/tests/Accordion/Accordion.programmatic.test.svelte @@ -0,0 +1,36 @@ + + + + + + {#each items as item} + +

{item.description}

+ + {/each} + diff --git a/tests/Accordion/Accordion.skeleton.test.svelte b/tests/Accordion/Accordion.skeleton.test.svelte new file mode 100644 index 00000000..e08d0e0a --- /dev/null +++ b/tests/Accordion/Accordion.skeleton.test.svelte @@ -0,0 +1,5 @@ + + + diff --git a/tests/Accordion/Accordion.test.svelte b/tests/Accordion/Accordion.test.svelte new file mode 100644 index 00000000..95d15cf4 --- /dev/null +++ b/tests/Accordion/Accordion.test.svelte @@ -0,0 +1,27 @@ + + + + +

+ Natural Language Classifier uses advanced natural language processing and + machine learning techniques to create custom classification models. Users + train their data and the service predicts the appropriate category for the + inputted text. +

+ + +

+ Analyze text to extract meta-data from content such as concepts, entities, + emotion, relations, sentiment and more. +

+ + +

+ Translate text, documents, and websites from one language to another. + Create industry or region-specific translations via the service's + customization capability. +

+ + diff --git a/tests/Accordion/Accordion.test.ts b/tests/Accordion/Accordion.test.ts new file mode 100644 index 00000000..d7288e3d --- /dev/null +++ b/tests/Accordion/Accordion.test.ts @@ -0,0 +1,114 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import AccordionDisabled from "./Accordion.disabled.test.svelte"; +import AccordionProgrammatic from "./Accordion.programmatic.test.svelte"; +import AccordionSkeleton from "./Accordion.skeleton.test.svelte"; +import Accordion from "./Accordion.test.svelte"; + +describe("Accordion", () => { + const itemIsDisabled = (name: string | RegExp) => { + expect(screen.getByRole("button", { name })).toBeDisabled(); + }; + + const itemIsCollapsed = (name: string | RegExp) => { + expect(screen.getByRole("button", { name })).toHaveAttribute( + "aria-expanded", + "false", + ); + }; + + const itemIsExpanded = (name: string | RegExp) => { + expect(screen.getByRole("button", { name })).toHaveAttribute( + "aria-expanded", + "true", + ); + }; + + it("renders and functions correctly", async () => { + render(Accordion); + + // Initial items are collapsed. + itemIsCollapsed(/Natural Language Classifier/); + itemIsCollapsed(/Natural Language Understanding/); + itemIsCollapsed(/Language Translator/); + + // Check ARIA attributes and structure. + const accordion = screen.getByRole("list"); + expect(accordion).toHaveAttribute( + "class", + expect.stringContaining("bx--accordion"), + ); + + const buttons = screen.getAllByRole("button"); + expect(buttons).toHaveLength(3); + + // Check disabled state. + itemIsDisabled(/Natural Language Understanding/); + + // Test interaction with accordion items. + const firstItem = screen.getByText("Natural Language Classifier"); + const lastItem = screen.getByText("Language Translator"); + + // Click first item and verify content. + await user.click(firstItem); + itemIsExpanded(/Natural Language Classifier/); + + // Click last item and verify both contents are visible (testing multiple open items). + await user.click(lastItem); + itemIsExpanded(/Natural Language Classifier/); + itemIsExpanded(/Language Translator/); + }); + + it("programmatically expands and collapses all items", async () => { + render(AccordionProgrammatic); + + // Initially all items should be collapsed + itemIsCollapsed(/Natural Language Classifier/); + itemIsCollapsed(/Natural Language Understanding/); + itemIsCollapsed(/Language Translator/); + + // Click expand button + const expandButton = screen.getByRole("button", { name: /Expand all/i }); + await user.click(expandButton); + + // Verify all items are expanded + itemIsExpanded(/Natural Language Classifier/); + itemIsExpanded(/Natural Language Understanding/); + itemIsExpanded(/Language Translator/); + + expect( + screen.getByRole("button", { name: /Collapse all/i }), + ).toBeInTheDocument(); + + // Click collapse button. + await user.click(screen.getByRole("button", { name: /Collapse all/i })); + + // Verify all items are collapsed again. + itemIsCollapsed(/Natural Language Classifier/); + itemIsCollapsed(/Natural Language Understanding/); + itemIsCollapsed(/Language Translator/); + }); + + it("is all disabled", async () => { + render(AccordionDisabled); + + itemIsDisabled(/Natural Language Classifier/); + itemIsDisabled(/Natural Language Understanding/); + itemIsDisabled(/Language Translator/); + }); + + it("renders skeleton", async () => { + render(AccordionSkeleton); + + const items = screen.getAllByRole("listitem"); + expect(items).toHaveLength(4); + + // First item is open. + expect(items[0]).toHaveAttribute("class", expect.stringContaining("bx--accordion__item bx--accordion__item--active")); + + // All other items are collapsed. + expect(items[1]).toHaveAttribute("class", expect.stringContaining("bx--accordion__item")); + expect(items[2]).toHaveAttribute("class", expect.stringContaining("bx--accordion__item")); + expect(items[3]).toHaveAttribute("class", expect.stringContaining("bx--accordion__item")); + }); +}); diff --git a/tests/App.test.svelte b/tests/App.test.svelte index 96c876d1..71142b09 100644 --- a/tests/App.test.svelte +++ b/tests/App.test.svelte @@ -1,10 +1,40 @@