mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 18:31:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

test(structured-list): add unit tests

Browse source
This commit is contained in:
Eric Liu 2025-03-20 16:02:16 -07:00
commit 059c7af88a
4 changed files with 236 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

79
tests/StructuredList/StructuredList.test.svelte Normal file
View 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>