mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
test(structured-list): add unit tests
This commit is contained in:
Eric Liu
parent
f89e9df8f0
commit
f5342d4b96
4 changed files with 236 additions and 100 deletions
|
|
@ -1,100 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import {
|
|
||||||
StructuredList,
|
|
||||||
StructuredListSkeleton,
|
|
||||||
StructuredListBody,
|
|
||||||
StructuredListHead,
|
|
||||||
StructuredListCell,
|
|
||||||
StructuredListRow,
|
|
||||||
StructuredListInput,
|
|
||||||
} from "carbon-components-svelte";
|
|
||||||
import CheckmarkFilled from "carbon-icons-svelte/lib/CheckmarkFilled.svelte";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<StructuredList
|
|
||||||
selection
|
|
||||||
selected="row-1-value"
|
|
||||||
on:change={(e) => {
|
|
||||||
console.log(e.detail); // string
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<StructuredListHead>
|
|
||||||
<StructuredListRow head>
|
|
||||||
<StructuredListCell head>Column A</StructuredListCell>
|
|
||||||
<StructuredListCell head>Column B</StructuredListCell>
|
|
||||||
<StructuredListCell head>Column C</StructuredListCell>
|
|
||||||
</StructuredListRow>
|
|
||||||
</StructuredListHead>
|
|
||||||
<StructuredListBody>
|
|
||||||
<StructuredListRow>
|
|
||||||
<StructuredListCell noWrap>Row 1</StructuredListCell>
|
|
||||||
<StructuredListCell>Row 1</StructuredListCell>
|
|
||||||
<StructuredListCell>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
|
|
||||||
finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
|
|
||||||
euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a
|
|
||||||
porttitor interdum.
|
|
||||||
</StructuredListCell>
|
|
||||||
</StructuredListRow>
|
|
||||||
<StructuredListRow>
|
|
||||||
<StructuredListCell noWrap>Row 2</StructuredListCell>
|
|
||||||
<StructuredListCell>Row 2</StructuredListCell>
|
|
||||||
<StructuredListCell>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
|
|
||||||
finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
|
|
||||||
euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a
|
|
||||||
porttitor interdum.
|
|
||||||
</StructuredListCell>
|
|
||||||
</StructuredListRow>
|
|
||||||
<StructuredListRow>
|
|
||||||
<StructuredListCell noWrap>Row 3</StructuredListCell>
|
|
||||||
<StructuredListCell>Row 3</StructuredListCell>
|
|
||||||
<StructuredListCell>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
|
|
||||||
finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
|
|
||||||
euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a
|
|
||||||
porttitor interdum.
|
|
||||||
</StructuredListCell>
|
|
||||||
</StructuredListRow>
|
|
||||||
</StructuredListBody>
|
|
||||||
</StructuredList>
|
|
||||||
|
|
||||||
<StructuredList selection selected="row-1-value">
|
|
||||||
<StructuredListHead>
|
|
||||||
<StructuredListRow head>
|
|
||||||
<StructuredListCell head>ColumnA</StructuredListCell>
|
|
||||||
<StructuredListCell head>ColumnB</StructuredListCell>
|
|
||||||
<StructuredListCell head>ColumnC</StructuredListCell>
|
|
||||||
<StructuredListCell head>{""}</StructuredListCell>
|
|
||||||
</StructuredListRow>
|
|
||||||
</StructuredListHead>
|
|
||||||
<StructuredListBody>
|
|
||||||
{#each [1, 2, 3] as item}
|
|
||||||
<StructuredListRow label for="row-{item}">
|
|
||||||
<StructuredListCell>Row {item}</StructuredListCell>
|
|
||||||
<StructuredListCell>Row {item}</StructuredListCell>
|
|
||||||
<StructuredListCell>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
|
||||||
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
|
|
||||||
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
|
||||||
vulputate nisl a porttitor interdum.
|
|
||||||
</StructuredListCell>
|
|
||||||
<StructuredListInput
|
|
||||||
id="row-{item}"
|
|
||||||
value="row-{item}-value"
|
|
||||||
title="row-{item}-title"
|
|
||||||
name="row-{item}-name"
|
|
||||||
/>
|
|
||||||
<StructuredListCell>
|
|
||||||
<CheckmarkFilled
|
|
||||||
class="bx--structured-list-svg"
|
|
||||||
aria-label="select an option"
|
|
||||||
title="select an option"
|
|
||||||
/>
|
|
||||||
</StructuredListCell>
|
|
||||||
</StructuredListRow>
|
|
||||||
{/each}
|
|
||||||
</StructuredListBody>
|
|
||||||
</StructuredList>
|
|
||||||
|
|
||||||
<StructuredListSkeleton rows={3} />
|
|
||||||
79
tests/StructuredList/StructuredList.test.svelte
Normal file
79
tests/StructuredList/StructuredList.test.svelte
Normal file
|
|
@ -0,0 +1,79 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import {
|
||||||
|
StructuredList,
|
||||||
|
StructuredListBody,
|
||||||
|
StructuredListHead,
|
||||||
|
StructuredListCell,
|
||||||
|
StructuredListRow,
|
||||||
|
StructuredListInput,
|
||||||
|
} from "carbon-components-svelte";
|
||||||
|
import CheckmarkFilled from "carbon-icons-svelte/lib/CheckmarkFilled.svelte";
|
||||||
|
import type { ComponentProps } from "svelte";
|
||||||
|
|
||||||
|
export let selected: ComponentProps<StructuredList>["selected"] = undefined;
|
||||||
|
export let condensed: ComponentProps<StructuredList>["condensed"] = false;
|
||||||
|
export let flush: ComponentProps<StructuredList>["flush"] = false;
|
||||||
|
export let selection: ComponentProps<StructuredList>["selection"] = false;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<StructuredList
|
||||||
|
bind:selected
|
||||||
|
{condensed}
|
||||||
|
{flush}
|
||||||
|
{selection}
|
||||||
|
on:click={() => {
|
||||||
|
console.log("click");
|
||||||
|
}}
|
||||||
|
on:mouseover={() => {
|
||||||
|
console.log("mouseover");
|
||||||
|
}}
|
||||||
|
on:mouseenter={() => {
|
||||||
|
console.log("mouseenter");
|
||||||
|
}}
|
||||||
|
on:mouseleave={() => {
|
||||||
|
console.log("mouseleave");
|
||||||
|
}}
|
||||||
|
on:change={(e) => {
|
||||||
|
console.log("change", e.detail);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<StructuredListHead>
|
||||||
|
<StructuredListRow head>
|
||||||
|
<StructuredListCell head>Column A</StructuredListCell>
|
||||||
|
<StructuredListCell head>Column B</StructuredListCell>
|
||||||
|
<StructuredListCell head>Column C</StructuredListCell>
|
||||||
|
{#if selection}
|
||||||
|
<StructuredListCell head>{""}</StructuredListCell>
|
||||||
|
{/if}
|
||||||
|
</StructuredListRow>
|
||||||
|
</StructuredListHead>
|
||||||
|
<StructuredListBody>
|
||||||
|
{#each ["1", "2", "3"] as item}
|
||||||
|
<StructuredListRow
|
||||||
|
label={selection}
|
||||||
|
for={selection ? `row-${item}` : undefined}
|
||||||
|
>
|
||||||
|
<StructuredListCell noWrap>Row {item}</StructuredListCell>
|
||||||
|
<StructuredListCell>Row {item}</StructuredListCell>
|
||||||
|
<StructuredListCell>Content {item}</StructuredListCell>
|
||||||
|
{#if selection}
|
||||||
|
<StructuredListInput
|
||||||
|
id="row-{item}"
|
||||||
|
value="row-{item}-value"
|
||||||
|
title="row-{item}-title"
|
||||||
|
name="row-{item}-name"
|
||||||
|
/>
|
||||||
|
<StructuredListCell>
|
||||||
|
<CheckmarkFilled
|
||||||
|
class="bx--structured-list-svg"
|
||||||
|
aria-label="select an option"
|
||||||
|
title="select an option"
|
||||||
|
/>
|
||||||
|
</StructuredListCell>
|
||||||
|
{/if}
|
||||||
|
</StructuredListRow>
|
||||||
|
{/each}
|
||||||
|
</StructuredListBody>
|
||||||
|
</StructuredList>
|
||||||
|
|
||||||
|
<div data-testid="value">{selected}</div>
|
||||||
131
tests/StructuredList/StructuredList.test.ts
Normal file
131
tests/StructuredList/StructuredList.test.ts
Normal file
|
|
@ -0,0 +1,131 @@
|
||||||
|
import { render, screen } from "@testing-library/svelte";
|
||||||
|
import { user } from "../setup-tests";
|
||||||
|
import StructuredList from "./StructuredList.test.svelte";
|
||||||
|
import StructuredListCustom from "./StructuredListCustom.test.svelte";
|
||||||
|
|
||||||
|
describe("StructuredList", () => {
|
||||||
|
it("should render with default props", () => {
|
||||||
|
render(StructuredList);
|
||||||
|
|
||||||
|
const list = screen.getByRole("table");
|
||||||
|
expect(list).toBeInTheDocument();
|
||||||
|
expect(list).toHaveClass("bx--structured-list");
|
||||||
|
|
||||||
|
// Check header cells
|
||||||
|
const headerCells = screen.getAllByRole("columnheader");
|
||||||
|
expect(headerCells).toHaveLength(3);
|
||||||
|
expect(headerCells[0]).toHaveTextContent("Column A");
|
||||||
|
expect(headerCells[1]).toHaveTextContent("Column B");
|
||||||
|
expect(headerCells[2]).toHaveTextContent("Column C");
|
||||||
|
|
||||||
|
// Check body cells
|
||||||
|
const cells = screen.getAllByRole("cell");
|
||||||
|
expect(cells).toHaveLength(9); // 3 rows x 3 columns
|
||||||
|
expect(cells[0]).toHaveTextContent("Row 1");
|
||||||
|
expect(cells[1]).toHaveTextContent("Row 1");
|
||||||
|
expect(cells[2]).toHaveTextContent("Content 1");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should handle condensed variant", () => {
|
||||||
|
render(StructuredList, { props: { condensed: true } });
|
||||||
|
|
||||||
|
expect(screen.getByRole("table")).toHaveClass(
|
||||||
|
"bx--structured-list--condensed",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should handle flush variant", () => {
|
||||||
|
render(StructuredList, { props: { flush: true } });
|
||||||
|
|
||||||
|
expect(screen.getByRole("table")).toHaveClass("bx--structured-list--flush");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should handle selection variant", () => {
|
||||||
|
render(StructuredList, { props: { selection: true } });
|
||||||
|
|
||||||
|
const list = screen.getByRole("table");
|
||||||
|
expect(list).toHaveClass("bx--structured-list--selection");
|
||||||
|
|
||||||
|
const inputs = screen.getAllByRole("radio");
|
||||||
|
expect(inputs).toHaveLength(3);
|
||||||
|
|
||||||
|
const checkmarks = screen.getAllByTitle("select an option");
|
||||||
|
expect(checkmarks).toHaveLength(3);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should handle selected state", async () => {
|
||||||
|
render(StructuredList, {
|
||||||
|
props: { selection: true, selected: "row-1-value" },
|
||||||
|
});
|
||||||
|
|
||||||
|
const selectedInput = screen.getByRole("radio", { checked: true });
|
||||||
|
expect(selectedInput.closest("label")).toHaveTextContent("Row 1");
|
||||||
|
|
||||||
|
await user.click(screen.getAllByRole("radio")[1]);
|
||||||
|
expect(
|
||||||
|
screen.getByRole("radio", { checked: true }).closest("label"),
|
||||||
|
).toHaveTextContent("Row 2");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should handle selection change", async () => {
|
||||||
|
render(StructuredList, { props: { selection: true } });
|
||||||
|
|
||||||
|
const secondInput = screen.getAllByRole("radio")[1];
|
||||||
|
await user.click(secondInput);
|
||||||
|
|
||||||
|
expect(screen.getByTestId("value").textContent).toBe("row-2-value");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should handle custom content", () => {
|
||||||
|
render(StructuredListCustom);
|
||||||
|
|
||||||
|
expect(screen.getByTestId("custom-header")).toHaveTextContent(
|
||||||
|
"Custom Header",
|
||||||
|
);
|
||||||
|
expect(screen.getByTestId("custom-content")).toHaveTextContent(
|
||||||
|
"Custom Content",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should handle mouse events", async () => {
|
||||||
|
const consoleLog = vi.spyOn(console, "log");
|
||||||
|
render(StructuredList);
|
||||||
|
|
||||||
|
const list = screen.getByRole("table");
|
||||||
|
|
||||||
|
await user.click(list);
|
||||||
|
expect(consoleLog).toHaveBeenCalledWith("click");
|
||||||
|
await user.hover(list);
|
||||||
|
expect(consoleLog).toHaveBeenCalledWith("mouseover");
|
||||||
|
await user.unhover(list);
|
||||||
|
expect(consoleLog).toHaveBeenCalledWith("mouseleave");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should handle noWrap cells", () => {
|
||||||
|
render(StructuredList);
|
||||||
|
|
||||||
|
const noWrapCells = screen
|
||||||
|
.getAllByRole("cell")
|
||||||
|
.filter(
|
||||||
|
(cell) =>
|
||||||
|
cell.textContent?.startsWith("Row") && cell.textContent?.length === 5,
|
||||||
|
);
|
||||||
|
|
||||||
|
noWrapCells.forEach((cell) => {
|
||||||
|
expect(cell).toHaveClass("bx--structured-list-td");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should emit change event on selection", async () => {
|
||||||
|
const consoleLog = vi.spyOn(console, "log");
|
||||||
|
render(StructuredList, { props: { selection: true } });
|
||||||
|
|
||||||
|
expect(consoleLog).not.toHaveBeenCalled();
|
||||||
|
|
||||||
|
await user.click(screen.getAllByRole("radio")[1]);
|
||||||
|
expect(consoleLog).toHaveBeenCalledWith("change", "row-2-value");
|
||||||
|
|
||||||
|
await user.click(screen.getAllByRole("radio")[0]);
|
||||||
|
expect(consoleLog).toHaveBeenCalledWith("change", "row-1-value");
|
||||||
|
});
|
||||||
|
});
|
||||||
26
tests/StructuredList/StructuredListCustom.test.svelte
Normal file
26
tests/StructuredList/StructuredListCustom.test.svelte
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import {
|
||||||
|
StructuredList,
|
||||||
|
StructuredListBody,
|
||||||
|
StructuredListHead,
|
||||||
|
StructuredListCell,
|
||||||
|
StructuredListRow,
|
||||||
|
} from "carbon-components-svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<StructuredList>
|
||||||
|
<StructuredListHead>
|
||||||
|
<StructuredListRow head>
|
||||||
|
<StructuredListCell head>
|
||||||
|
<div data-testid="custom-header">Custom Header</div>
|
||||||
|
</StructuredListCell>
|
||||||
|
</StructuredListRow>
|
||||||
|
</StructuredListHead>
|
||||||
|
<StructuredListBody>
|
||||||
|
<StructuredListRow>
|
||||||
|
<StructuredListCell>
|
||||||
|
<div data-testid="custom-content">Custom Content</div>
|
||||||
|
</StructuredListCell>
|
||||||
|
</StructuredListRow>
|
||||||
|
</StructuredListBody>
|
||||||
|
</StructuredList>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue