mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
test(accordion): add unit tests (#2079)
This commit is contained in:
Eric Liu
GitHub
parent
107b77df6e
commit
cee676331a
7 changed files with 239 additions and 219 deletions
|
|
@ -1,219 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { Accordion, AccordionItem } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Accordion>
|
||||
<AccordionItem title="Natural Language Classifier">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Natural Language Understanding">
|
||||
<p>
|
||||
Analyze text to extract meta-data from content such as concepts, entities,
|
||||
emotion, relations, sentiment and more.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Language Translator">
|
||||
<p>
|
||||
Translate text, documents, and websites from one language to another.
|
||||
Create industry or region-specific translations via the service's
|
||||
customization capability.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
<Accordion align="start">
|
||||
<AccordionItem title="Natural Language Classifier">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Natural Language Understanding">
|
||||
<p>
|
||||
Analyze text to extract meta-data from content such as concepts, entities,
|
||||
emotion, relations, sentiment and more.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Language Translator">
|
||||
<p>
|
||||
Translate text, documents, and websites from one language to another.
|
||||
Create industry or region-specific translations via the service's
|
||||
customization capability.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
<Accordion>
|
||||
<AccordionItem>
|
||||
<div slot="title">
|
||||
<h5>Natural Language Classifier</h5>
|
||||
<div>AI / Machine Learning</div>
|
||||
</div>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem>
|
||||
<div slot="title">
|
||||
<h5>Natural Language Understanding</h5>
|
||||
<div>AI / Machine Learning</div>
|
||||
</div>
|
||||
<p>
|
||||
Analyze text to extract meta-data from content such as concepts, entities,
|
||||
emotion, relations, sentiment and more.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem>
|
||||
<div slot="title">
|
||||
<h5>Language Translator</h5>
|
||||
<div>AI / Machine Learning</div>
|
||||
</div>
|
||||
<p>
|
||||
Translate text, documents, and websites from one language to another.
|
||||
Create industry or region-specific translations via the service's
|
||||
customization capability.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
<Accordion>
|
||||
<AccordionItem open title="Natural Language Classifier">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Natural Language Understanding">
|
||||
<p>
|
||||
Analyze text to extract meta-data from content such as concepts, entities,
|
||||
emotion, relations, sentiment and more.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Language Translator">
|
||||
<p>
|
||||
Translate text, documents, and websites from one language to another.
|
||||
Create industry or region-specific translations via the service's
|
||||
customization capability.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
<Accordion size="xl">
|
||||
<AccordionItem title="Natural Language Classifier">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Natural Language Understanding">
|
||||
<p>
|
||||
Analyze text to extract meta-data from content such as concepts, entities,
|
||||
emotion, relations, sentiment and more.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Language Translator">
|
||||
<p>
|
||||
Translate text, documents, and websites from one language to another.
|
||||
Create industry or region-specific translations via the service's
|
||||
customization capability.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
<Accordion size="sm">
|
||||
<AccordionItem title="Natural Language Classifier">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Natural Language Understanding">
|
||||
<p>
|
||||
Analyze text to extract meta-data from content such as concepts, entities,
|
||||
emotion, relations, sentiment and more.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Language Translator">
|
||||
<p>
|
||||
Translate text, documents, and websites from one language to another.
|
||||
Create industry or region-specific translations via the service's
|
||||
customization capability.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
<Accordion disabled>
|
||||
<AccordionItem title="Natural Language Classifier">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Natural Language Understanding">
|
||||
<p>
|
||||
Analyze text to extract meta-data from content such as concepts, entities,
|
||||
emotion, relations, sentiment and more.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Language Translator">
|
||||
<p>
|
||||
Translate text, documents, and websites from one language to another.
|
||||
Create industry or region-specific translations via the service's
|
||||
customization capability.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
<Accordion>
|
||||
<AccordionItem disabled title="Natural Language Classifier">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Natural Language Understanding">
|
||||
<p>
|
||||
Analyze text to extract meta-data from content such as concepts, entities,
|
||||
emotion, relations, sentiment and more.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Language Translator">
|
||||
<p>
|
||||
Translate text, documents, and websites from one language to another.
|
||||
Create industry or region-specific translations via the service's
|
||||
customization capability.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
<Accordion skeleton />
|
||||
|
||||
<Accordion skeleton align="start" />
|
||||
|
||||
<Accordion skeleton count={3} />
|
||||
|
||||
<Accordion skeleton open={false} />
|
||||
|
||||
<Accordion skeleton size="xl" />
|
||||
|
||||
<Accordion skeleton size="sm" />
|
||||
27
tests/Accordion/Accordion.disabled.test.svelte
Normal file
27
tests/Accordion/Accordion.disabled.test.svelte
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<script lang="ts">
|
||||
import { Accordion, AccordionItem } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Accordion disabled>
|
||||
<AccordionItem title="Natural Language Classifier">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Natural Language Understanding">
|
||||
<p>
|
||||
Analyze text to extract meta-data from content such as concepts, entities,
|
||||
emotion, relations, sentiment and more.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Language Translator">
|
||||
<p>
|
||||
Translate text, documents, and websites from one language to another.
|
||||
Create industry or region-specific translations via the service's
|
||||
customization capability.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
36
tests/Accordion/Accordion.programmatic.test.svelte
Normal file
36
tests/Accordion/Accordion.programmatic.test.svelte
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<script lang="ts">
|
||||
import { Accordion, AccordionItem, Button } from "carbon-components-svelte";
|
||||
|
||||
const items = [
|
||||
{
|
||||
title: "Natural Language Classifier",
|
||||
description:
|
||||
"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.",
|
||||
},
|
||||
{
|
||||
title: "Natural Language Understanding",
|
||||
description:
|
||||
"Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.",
|
||||
},
|
||||
{
|
||||
title: "Language Translator",
|
||||
description:
|
||||
"Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.",
|
||||
},
|
||||
];
|
||||
|
||||
let open = false;
|
||||
</script>
|
||||
|
||||
<Button kind="ghost" size="field" on:click={() => (open = !open)}>
|
||||
{open ? "Collapse" : "Expand"}
|
||||
all
|
||||
</Button>
|
||||
|
||||
<Accordion>
|
||||
{#each items as item}
|
||||
<AccordionItem title={item.title} {open}>
|
||||
<p>{item.description}</p>
|
||||
</AccordionItem>
|
||||
{/each}
|
||||
</Accordion>
|
||||
5
tests/Accordion/Accordion.skeleton.test.svelte
Normal file
5
tests/Accordion/Accordion.skeleton.test.svelte
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { Accordion } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Accordion skeleton />
|
||||
27
tests/Accordion/Accordion.test.svelte
Normal file
27
tests/Accordion/Accordion.test.svelte
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<script lang="ts">
|
||||
import { Accordion, AccordionItem } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Accordion>
|
||||
<AccordionItem title="Natural Language Classifier">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Natural Language Understanding" disabled>
|
||||
<p>
|
||||
Analyze text to extract meta-data from content such as concepts, entities,
|
||||
emotion, relations, sentiment and more.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Language Translator">
|
||||
<p>
|
||||
Translate text, documents, and websites from one language to another.
|
||||
Create industry or region-specific translations via the service's
|
||||
customization capability.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
114
tests/Accordion/Accordion.test.ts
Normal file
114
tests/Accordion/Accordion.test.ts
Normal file
|
|
@ -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"));
|
||||
});
|
||||
});
|
||||
|
|
@ -1,10 +1,40 @@
|
|||
<script lang="ts">
|
||||
import { TreeView as TreeViewNav } from "carbon-components-svelte";
|
||||
import Accordion from "./Accordion/Accordion.test.svelte";
|
||||
import AccordionProgrammatic from "./Accordion/Accordion.programmatic.test.svelte";
|
||||
import AccordionDisabled from "./Accordion/Accordion.disabled.test.svelte";
|
||||
import TreeView from "./TreeView/TreeView.test.svelte";
|
||||
import TreeViewHierarchy from "./TreeView/TreeView.hierarchy.test.svelte";
|
||||
import RecursiveList from "./RecursiveList/RecursiveList.test.svelte";
|
||||
import RecursiveListHierarchy from "./RecursiveList/RecursiveList.hierarchy.test.svelte";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: "/accordion",
|
||||
name: "Accordion",
|
||||
component: Accordion,
|
||||
},
|
||||
{
|
||||
path: "/accordion-programmatic",
|
||||
name: "AccordionProgrammatic",
|
||||
component: AccordionProgrammatic,
|
||||
},
|
||||
{
|
||||
path: "/accordion-disabled",
|
||||
name: "AccordionDisabled",
|
||||
component: AccordionDisabled,
|
||||
},
|
||||
{
|
||||
path: "/recursive-list",
|
||||
name: "RecursiveList",
|
||||
component: RecursiveList,
|
||||
},
|
||||
{
|
||||
path: "/recursive-list-hierarchy",
|
||||
name: "RecursiveListHierarchy",
|
||||
component: RecursiveListHierarchy,
|
||||
},
|
||||
{
|
||||
path: "/treeview",
|
||||
name: "TreeView",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue