Skip to content

Commit a626201

Browse files
bvaughnbvaughn
committed
Added more tests
1 parent d9487c3 commit a626201

File tree

2 files changed

+225
-5
lines changed

2 files changed

+225
-5
lines changed

‎lib/components/grid/Grid.test.tsx‎

Lines changed: 177 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,181 @@
1-
import { describe, test } from "vitest";
1+
import { render, screen } from "@testing-library/react";
2+
import { useLayoutEffect } from "react";
3+
import { beforeEach, describe, expect, test, vi } from "vitest";
4+
import { EMPTY_OBJECT } from "../../../src/constants";
5+
import { updateMockResizeObserver } from "../../utils/test/mockResizeObserver";
6+
import { Grid } from "./Grid";
7+
import type { CellComponentProps } from "./types";
28

39
describe("Grid", () => {
4-
test("have tests", () => {
5-
// TODO Write tests
10+
let mountedCells: Map<string, CellComponentProps<object>> = new Map();
11+
12+
const CellComponent = vi.fn(function Cell(props: CellComponentProps<object>) {
13+
const { columnIndex, rowIndex, style } = props;
14+
15+
const key = `${rowIndex},${columnIndex}`;
16+
17+
useLayoutEffect(() => {
18+
mountedCells.set(key, props);
19+
return () => {
20+
mountedCells.delete(key);
21+
};
22+
});
23+
24+
return (
25+
<div role="listitem" style={style}>
26+
Cell {key}
27+
</div>
28+
);
29+
});
30+
31+
beforeEach(() => {
32+
CellComponent.mockReset();
33+
34+
updateMockResizeObserver(new DOMRect(0, 0, 100, 40));
35+
36+
mountedCells = new Map();
37+
});
38+
39+
test("should render an empty Grid", () => {
40+
render(
41+
<Grid
42+
cellComponent={CellComponent}
43+
cellProps={EMPTY_OBJECT}
44+
columnCount={0}
45+
columnWidth={25}
46+
overscanCount={0}
47+
rowCount={0}
48+
rowHeight={20}
49+
/>
50+
);
51+
52+
const items = screen.queryAllByRole("listitem");
53+
expect(items).toHaveLength(0);
54+
});
55+
56+
test("should render extra cells for overscan", () => {
57+
render(
58+
<Grid
59+
cellComponent={CellComponent}
60+
cellProps={EMPTY_OBJECT}
61+
columnCount={100}
62+
columnWidth={25}
63+
overscanCount={2}
64+
rowCount={100}
65+
rowHeight={20}
66+
/>
67+
);
68+
69+
// 4 columns (+2) by 2 rows (+2)
70+
const items = screen.queryAllByRole("listitem");
71+
expect(items).toHaveLength(24);
72+
});
73+
74+
describe("cell sizes", () => {
75+
test("type: number (px)", () => {
76+
const { container } = render(
77+
<Grid
78+
cellComponent={CellComponent}
79+
cellProps={EMPTY_OBJECT}
80+
columnCount={100}
81+
columnWidth={25}
82+
overscanCount={0}
83+
rowCount={100}
84+
rowHeight={20}
85+
/>
86+
);
87+
88+
// 4 columns by 2 rows
89+
expect(container.querySelectorAll('[role="listitem"]')).toHaveLength(8);
90+
});
91+
92+
test("type: function (px)", () => {
93+
const columnWidth = () => 50;
94+
const rowHeight = () => 20;
95+
96+
const { container } = render(
97+
<Grid
98+
cellComponent={CellComponent}
99+
cellProps={EMPTY_OBJECT}
100+
columnCount={100}
101+
columnWidth={columnWidth}
102+
overscanCount={0}
103+
rowCount={100}
104+
rowHeight={rowHeight}
105+
/>
106+
);
107+
108+
// 2 columns by 2 rows
109+
expect(container.querySelectorAll('[role="listitem"]')).toHaveLength(4);
110+
});
111+
112+
test("type: string (%)", () => {
113+
const { container } = render(
114+
<Grid
115+
cellComponent={CellComponent}
116+
cellProps={EMPTY_OBJECT}
117+
columnCount={100}
118+
columnWidth="25%"
119+
overscanCount={0}
120+
rowCount={100}
121+
rowHeight="25%"
122+
/>
123+
);
124+
125+
// 4 columns by 4 rows
126+
expect(container.querySelectorAll('[role="listitem"]')).toHaveLength(16);
127+
});
128+
});
129+
130+
test.skip("should pass cellProps to the cellComponent", () => {
131+
// TODO
132+
});
133+
134+
test.skip("should re-render items if cellComponent changes", () => {
135+
// TODO
136+
});
137+
138+
test.skip("should re-render items if cell size changes", () => {
139+
// TODO
140+
});
141+
142+
test.skip("should re-render items if cellProps change", () => {
143+
// TODO
144+
});
145+
146+
test.skip("should use default sizes for initial mount", () => {
147+
// TODO
148+
});
149+
150+
test.skip("should call onCellsRendered", () => {
151+
// TODO
152+
});
153+
154+
test.skip("should support custom className and style props", () => {
155+
// TODO
156+
});
157+
158+
test.skip("should spread HTML rest attributes", () => {
159+
// TODO
160+
});
161+
162+
describe("imperative API", () => {
163+
test.skip("should return the root element", () => {
164+
// TODO
165+
});
166+
167+
test.skip("should scroll to cells", () => {
168+
// TODO
169+
});
170+
});
171+
172+
test.skip("should auto-memoize cellProps object using shallow equality", () => {
173+
// TODO
174+
});
175+
176+
describe("edge cases", () => {
177+
test.skip("should not cause a cycle of Grid callback ref is passed in cellProps", () => {
178+
// TODO
179+
});
6180
});
7181
});

‎lib/components/list/List.test.tsx‎

Lines changed: 48 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import { type ListImperativeAPI, type RowComponentProps } from "./types";
1111
import { useListCallbackRef } from "./useListCallbackRef";
1212

1313
describe("List", () => {
14+
let mountedRows: Map<number, RowComponentProps<object>> = new Map();
15+
1416
const RowComponent = vi.fn(function Row(props: RowComponentProps<object>) {
1517
const { index, style } = props;
1618

@@ -28,8 +30,6 @@ describe("List", () => {
2830
);
2931
});
3032

31-
let mountedRows: Map<number, RowComponentProps<object>> = new Map();
32-
3333
beforeEach(() => {
3434
RowComponent.mockReset();
3535

@@ -419,6 +419,52 @@ describe("List", () => {
419419
expect(RowComponent).toHaveBeenCalledTimes(10);
420420
});
421421

422+
describe("rowHeight", () => {
423+
test("type: number (px)", () => {
424+
const { container } = render(
425+
<List
426+
overscanCount={0}
427+
rowCount={50}
428+
rowComponent={RowComponent}
429+
rowHeight={50}
430+
rowProps={EMPTY_OBJECT}
431+
/>
432+
);
433+
434+
expect(container.querySelectorAll('[role="listitem"]')).toHaveLength(2);
435+
});
436+
437+
test("type: function (px)", () => {
438+
const rowHeight = (index: number) => 25 + index * 25;
439+
440+
const { container } = render(
441+
<List
442+
overscanCount={0}
443+
rowCount={50}
444+
rowComponent={RowComponent}
445+
rowHeight={rowHeight}
446+
rowProps={EMPTY_OBJECT}
447+
/>
448+
);
449+
450+
expect(container.querySelectorAll('[role="listitem"]')).toHaveLength(3);
451+
});
452+
453+
test("type: string (%)", () => {
454+
const { container } = render(
455+
<List
456+
overscanCount={0}
457+
rowCount={50}
458+
rowComponent={RowComponent}
459+
rowHeight="25%"
460+
rowProps={EMPTY_OBJECT}
461+
/>
462+
);
463+
464+
expect(container.querySelectorAll('[role="listitem"]')).toHaveLength(4);
465+
});
466+
});
467+
422468
describe("edge cases", () => {
423469
test("should restore scroll indices if rowProps changes", () => {
424470
const listRef = createRef<ListImperativeAPI>();

0 commit comments

Comments
 (0)