-
Notifications
You must be signed in to change notification settings - Fork 1
/
grid.test.tsx
56 lines (49 loc) · 1.59 KB
/
grid.test.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import { render } from "@testing-library/react";
import { expect, test } from "vitest";
import Grid, { GridProps } from "../../../../lib/components/internal/grid";
import gridStyles from "../../../../lib/components/internal/grid/styles.css.js";
const defaultProps: GridProps = {
rows: 1,
columns: 4,
layout: [
{ id: "one", x: 0, width: 2, y: 0, height: 1 },
{ id: "two", x: 2, width: 2, y: 0, height: 1 },
],
children: (
<>
<span key="one" data-testid="child" />
<span key="two" data-testid="child" />
</>
),
};
test("renders children content", async () => {
const result = render(<Grid {...defaultProps} />);
const children = await result.findAllByTestId("child");
expect(children.length).toBe(2);
});
test("annotates data attributes on root element", () => {
const { container } = render(<Grid {...defaultProps} />);
const root = container.querySelector(`.${gridStyles.grid}`);
expect((root as HTMLDivElement).dataset).toMatchObject({
rows: "1",
columns: "4",
});
});
test("annotates data attributes on individual elements", () => {
const { container } = render(<Grid {...defaultProps} />);
const items = container.querySelectorAll<HTMLDivElement>(`.${gridStyles.grid__item}`);
expect(items[0].dataset).toMatchObject({
rowSpan: "1",
columnSpan: "2",
columnOffset: "1",
rowOffset: "1",
});
expect(items[1].dataset).toMatchObject({
rowSpan: "1",
columnSpan: "2",
columnOffset: "3",
rowOffset: "1",
});
});