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

test(grid): add unit tests

Browse source
This commit is contained in:
Eric Liu 2025-03-20 17:19:33 -07:00
commit d45409c7f3
5 changed files with 181 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

12
tests/FullWidthGrid.test.svelte
View file

@ -1,12 +0,0 @@
<script lang="ts">
import { Grid, Row, Column } from "carbon-components-svelte";
</script>
<Grid fullWidth>
<Row>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
</Row>
</Grid>

12
tests/Grid.test.svelte
View file

@ -1,12 +0,0 @@
<script lang="ts">
import { Grid, Row, Column } from "carbon-components-svelte";
</script>
<Grid>
<Row>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
</Row>
</Grid>

44
tests/Grid/Grid.test.svelte Normal file
View file

@ -0,0 +1,44 @@
<script lang="ts">
import { Grid } from "carbon-components-svelte";
export let condensed = false;
export let narrow = false;
export let fullWidth = false;
export let noGutter = false;
export let noGutterLeft = false;
export let noGutterRight = false;
export let padding = false;
export let as = false;
</script>
{#if as}
<Grid
{as}
{condensed}
{narrow}
{fullWidth}
{noGutter}
{noGutterLeft}
{noGutterRight}
{padding}
{...$$restProps}
let:props
>
<header {...props}>
<slot />
</header>
</Grid>
{:else}
<Grid
{condensed}
{narrow}
{fullWidth}
{noGutter}
{noGutterLeft}
{noGutterRight}
{padding}
{...$$restProps}
>
<slot />
</Grid>
{/if}

137
tests/Grid/Grid.test.ts Normal file
View file

@ -0,0 +1,137 @@
import { render } from "@testing-library/svelte";
import Grid from "./Grid.test.svelte";
describe("Grid", () => {
describe("Default", () => {
it("should render as a div by default", () => {
const { container } = render(Grid);
const grid = container.querySelector("div.bx--grid");
expect(grid).toHaveClass("bx--grid");
});
it("should support rest props", () => {
const { container } = render(Grid, {
props: {
"data-testid": "custom-grid",
"aria-label": "Grid layout",
},
});
const grid = container.querySelector("[data-testid='custom-grid']");
expect(grid).toHaveClass("bx--grid");
expect(grid).toHaveAttribute("aria-label", "Grid layout");
});
});
it("should render condensed variant", () => {
const { container } = render(Grid, {
props: { condensed: true },
});
const grid = container.querySelector("div.bx--grid");
expect(grid).toHaveClass("bx--grid--condensed");
});
it("should render narrow variant", () => {
const { container } = render(Grid, {
props: { narrow: true },
});
const grid = container.querySelector("div.bx--grid");
expect(grid).toHaveClass("bx--grid--narrow");
});
it("should render full width variant", () => {
const { container } = render(Grid, {
props: { fullWidth: true },
});
const grid = container.querySelector("div.bx--grid");
expect(grid).toHaveClass("bx--grid--full-width");
});
it("should render with no gutter", () => {
const { container } = render(Grid, {
props: { noGutter: true },
});
const grid = container.querySelector("div.bx--grid");
expect(grid).toHaveClass("bx--no-gutter");
});
it("should render with no left gutter", () => {
const { container } = render(Grid, {
props: { noGutterLeft: true },
});
const grid = container.querySelector("div.bx--grid");
expect(grid).toHaveClass("bx--no-gutter--left");
});
it("should render with no right gutter", () => {
const { container } = render(Grid, {
props: {
noGutterRight: true,
},
});
const grid = container.querySelector("div.bx--grid");
expect(grid).toHaveClass("bx--no-gutter--right");
});
it("should render with row padding", () => {
const { container } = render(Grid, {
props: {
padding: true,
},
});
const grid = container.querySelector("div.bx--grid");
expect(grid).toHaveClass("bx--row-padding");
});
it("should render as a custom element using the as prop", () => {
const { container } = render(Grid, { props: { as: true } });
const header = container.querySelector("header");
expect(header).toHaveClass("bx--grid");
});
it("should pass all variant classes and rest props to custom element", () => {
const { container } = render(Grid, {
props: {
as: true,
condensed: true,
narrow: true,
fullWidth: true,
noGutter: true,
padding: true,
"data-testid": "custom-header",
"aria-label": "Custom header grid",
},
});
const header = container.querySelector("[data-testid='custom-header']");
expect(header).toHaveClass(
"bx--grid",
"bx--grid--condensed",
"bx--grid--narrow",
"bx--grid--full-width",
"bx--no-gutter",
"bx--row-padding",
);
expect(header).toHaveAttribute("aria-label", "Custom header grid");
});
it("should combine multiple variant classes", () => {
const { container } = render(Grid, {
props: {
condensed: true,
narrow: true,
noGutterLeft: true,
noGutterRight: true,
padding: true,
},
});
const grid = container.querySelector("div.bx--grid");
expect(grid).toHaveClass(
"bx--grid",
"bx--grid--condensed",
"bx--grid--narrow",
"bx--no-gutter--left",
"bx--no-gutter--right",
"bx--row-padding",
);
});
});

12
tests/NarrowGrid.test.svelte
View file

@ -1,12 +0,0 @@
<script lang="ts">
import { Grid, Row, Column } from "carbon-components-svelte";
</script>
<Grid narrow>
<Row>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
</Row>
</Grid>