Skip to content

Commit 9c484d8

Browse files
iddaniddan
committed
Fix test dom validation warnings
1 parent aafbf04 commit 9c484d8

6 files changed

Lines changed: 114 additions & 21 deletions

File tree

‎src/Cell.test.tsx‎

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -58,21 +58,35 @@ const EXAMPLE_CUSTOM_DATA_VIEWER_PROPS: Types.DataViewerProps = {
5858
};
5959
const EXAMPLE_POINT: Point.Point = { row: EXAMPLE_ROW, column: EXAMPLE_COLUMN };
6060

61+
const wrapper = ({ children }: { children?: React.ReactNode }) => {
62+
return (
63+
<table>
64+
<tbody>
65+
<tr>{children}</tr>
66+
</tbody>
67+
</table>
68+
);
69+
};
70+
6171
beforeEach(() => {
6272
jest.clearAllMocks();
6373
});
6474

6575
describe("<Cell />", () => {
6676
test("renders", () => {
67-
render(<Cell {...EXAMPLE_PROPS} />);
77+
render(<Cell {...EXAMPLE_PROPS} />, {
78+
wrapper,
79+
});
6880
const element = document.querySelector(".Spreadsheet__cell");
6981
expect(element).not.toBeNull();
7082
expect(MOCK_DATA_VIEWER).toBeCalledTimes(1);
7183
expect(MOCK_DATA_VIEWER).toBeCalledWith(EXAMPLE_DATA_VIEWER_PROPS, {});
7284
expect(MOCK_SET_CELL_DIMENSIONS).toBeCalledTimes(0);
7385
});
7486
test("renders read only", () => {
75-
render(<Cell {...EXAMPLE_PROPS} data={EXAMPLE_READ_ONLY_DATA} />);
87+
render(<Cell {...EXAMPLE_PROPS} data={EXAMPLE_READ_ONLY_DATA} />, {
88+
wrapper,
89+
});
7690
const element = document.querySelector(
7791
".Spreadsheet__cell.Spreadsheet__cell--readonly"
7892
);
@@ -85,7 +99,9 @@ describe("<Cell />", () => {
8599
expect(MOCK_SET_CELL_DIMENSIONS).toBeCalledTimes(0);
86100
});
87101
test("renders with given class name", () => {
88-
render(<Cell {...EXAMPLE_PROPS} data={EXAMPLE_DATA_WITH_CLASS_NAME} />);
102+
render(<Cell {...EXAMPLE_PROPS} data={EXAMPLE_DATA_WITH_CLASS_NAME} />, {
103+
wrapper,
104+
});
89105
const element = document.querySelector(
90106
`.Spreadsheet__cell.${EXAMPLE_DATA_WITH_CLASS_NAME.className}`
91107
);
@@ -98,7 +114,9 @@ describe("<Cell />", () => {
98114
expect(MOCK_SET_CELL_DIMENSIONS).toBeCalledTimes(0);
99115
});
100116
test("renders selected", () => {
101-
render(<Cell {...EXAMPLE_PROPS} selected />);
117+
render(<Cell {...EXAMPLE_PROPS} selected />, {
118+
wrapper,
119+
});
102120
const element = document.querySelector<HTMLElement>(".Spreadsheet__cell");
103121
expect(element).not.toBeNull();
104122
if (!element) {
@@ -111,7 +129,9 @@ describe("<Cell />", () => {
111129
);
112130
});
113131
test("renders active", () => {
114-
render(<Cell {...EXAMPLE_PROPS} active />);
132+
render(<Cell {...EXAMPLE_PROPS} active />, {
133+
wrapper,
134+
});
115135
const element = document.querySelector<HTMLElement>(".Spreadsheet__cell");
116136
expect(element).not.toBeNull();
117137
if (!element) {
@@ -121,7 +141,9 @@ describe("<Cell />", () => {
121141
expect(MOCK_SET_CELL_DIMENSIONS).toBeCalledTimes(0);
122142
});
123143
test("handles mouse down", () => {
124-
render(<Cell {...EXAMPLE_PROPS} />);
144+
render(<Cell {...EXAMPLE_PROPS} />, {
145+
wrapper,
146+
});
125147
const element = document.querySelector<HTMLElement>(".Spreadsheet__cell");
126148
expect(element).not.toBeNull();
127149
if (!element) {
@@ -139,7 +161,9 @@ describe("<Cell />", () => {
139161
expect(MOCK_SELECT).toBeCalledTimes(0);
140162
});
141163
test("handles mouse down + shift", () => {
142-
render(<Cell {...EXAMPLE_PROPS} />);
164+
render(<Cell {...EXAMPLE_PROPS} />, {
165+
wrapper,
166+
});
143167
const element = document.querySelector<HTMLElement>(".Spreadsheet__cell");
144168
expect(element).not.toBeNull();
145169
if (!element) {
@@ -157,7 +181,9 @@ describe("<Cell />", () => {
157181
expect(MOCK_SELECT).toBeCalledWith(EXAMPLE_POINT);
158182
});
159183
test("handles mouse over with dragging", () => {
160-
render(<Cell {...EXAMPLE_PROPS} dragging />);
184+
render(<Cell {...EXAMPLE_PROPS} dragging />, {
185+
wrapper,
186+
});
161187
const element = document.querySelector<HTMLElement>(".Spreadsheet__cell");
162188
expect(element).not.toBeNull();
163189
if (!element) {
@@ -176,7 +202,10 @@ describe("<Cell />", () => {
176202
});
177203
test("custom cell DataViewer", () => {
178204
render(
179-
<Cell {...EXAMPLE_PROPS} data={EXAMPLE_DATA_WITH_CUSTOM_DATA_VIEWER} />
205+
<Cell {...EXAMPLE_PROPS} data={EXAMPLE_DATA_WITH_CUSTOM_DATA_VIEWER} />,
206+
{
207+
wrapper,
208+
}
180209
);
181210
const element = document.querySelector(".Spreadsheet__cell");
182211
expect(element).not.toBeNull();

‎src/ColumnIndicator.test.tsx‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,35 @@ const EXAMPLE_PROPS: Types.ColumnIndicatorProps = {
1313
onSelect: jest.fn(),
1414
};
1515

16+
const wrapper = ({ children }: { children?: React.ReactNode }) => {
17+
return (
18+
<table>
19+
<thead>
20+
<tr>{children}</tr>
21+
</thead>
22+
</table>
23+
);
24+
};
25+
1626
describe("<ColumnIndicator />", () => {
1727
test("renders with column letter", () => {
18-
render(<ColumnIndicator {...EXAMPLE_PROPS} />);
28+
render(<ColumnIndicator {...EXAMPLE_PROPS} />, {
29+
wrapper,
30+
});
1931
expect(document.querySelectorAll("th.Spreadsheet__header").length).toBe(1);
2032
expect(screen.queryByText("A")).not.toBeNull();
2133
});
2234
test("renders with label", () => {
23-
render(<ColumnIndicator {...EXAMPLE_PROPS} label="Example Label" />);
35+
render(<ColumnIndicator {...EXAMPLE_PROPS} label="Example Label" />, {
36+
wrapper,
37+
});
2438
expect(document.querySelectorAll("th.Spreadsheet__header").length).toBe(1);
2539
expect(screen.queryByText("Example Label")).not.toBeNull();
2640
});
2741
test("calls onSelect", () => {
28-
render(<ColumnIndicator {...EXAMPLE_PROPS} />);
42+
render(<ColumnIndicator {...EXAMPLE_PROPS} />, {
43+
wrapper,
44+
});
2945
expect(document.querySelectorAll("th.Spreadsheet__header").length).toBe(1);
3046
const indicator = document.querySelector(
3147
"th.Spreadsheet__header"

‎src/CornerIndicator.test.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,23 @@ const EXAMPLE_PROPS: Types.CornerIndicatorProps = {
1212
onSelect: jest.fn(),
1313
};
1414

15+
const wrapper = ({ children }: { children?: React.ReactNode }) => {
16+
return (
17+
<table>
18+
<thead>
19+
<tr>{children}</tr>
20+
</thead>
21+
</table>
22+
);
23+
};
24+
1525
describe("<CornerIndicator />", () => {
1626
test("renders", () => {
17-
render(<CornerIndicator {...EXAMPLE_PROPS} />);
27+
render(<CornerIndicator {...EXAMPLE_PROPS} />, { wrapper });
1828
expect(document.querySelectorAll("th.Spreadsheet__header").length).toBe(1);
1929
});
2030
test("calls onSelect", () => {
21-
render(<CornerIndicator {...EXAMPLE_PROPS} />);
31+
render(<CornerIndicator {...EXAMPLE_PROPS} />, { wrapper });
2232
expect(document.querySelectorAll("th.Spreadsheet__header").length).toBe(1);
2333
const indicator = document.querySelector(
2434
"th.Spreadsheet__header"

‎src/HeaderRow.test.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,30 @@ import React from "react";
66
import { render } from "@testing-library/react";
77
import HeaderRow from "./HeaderRow";
88

9+
const wrapper = ({ children }: { children?: React.ReactNode }) => {
10+
return (
11+
<table>
12+
<tbody>{children}</tbody>
13+
</table>
14+
);
15+
};
16+
917
describe("<HeaderRow />", () => {
1018
test("renders", () => {
11-
render(<HeaderRow />);
19+
render(<HeaderRow />, {
20+
wrapper,
21+
});
1222
const row = document.querySelector("tr");
1323
expect(row).not.toBeNull();
1424
});
1525
test("renders with children", () => {
1626
render(
1727
<HeaderRow>
1828
<th></th>
19-
</HeaderRow>
29+
</HeaderRow>,
30+
{
31+
wrapper,
32+
}
2033
);
2134
const cell = document.querySelector("tr th");
2235
expect(cell).not.toBeNull();

‎src/Row.test.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,30 @@ import React from "react";
66
import { render } from "@testing-library/react";
77
import Row from "./Row";
88

9+
const wrapper: React.FC = ({ children }) => {
10+
return (
11+
<table>
12+
<tbody>{children}</tbody>
13+
</table>
14+
);
15+
};
16+
917
describe("<Row />", () => {
1018
test("renders", () => {
11-
render(<Row row={0} />);
19+
render(<Row row={0} />, {
20+
wrapper,
21+
});
1222
const row = document.querySelector("tr");
1323
expect(row).not.toBeNull();
1424
});
1525
test("renders with children", () => {
1626
render(
1727
<Row row={1}>
1828
<td></td>
19-
</Row>
29+
</Row>,
30+
{
31+
wrapper,
32+
}
2033
);
2134
const cell = document.querySelector("tr td");
2235
expect(cell).not.toBeNull();

‎src/RowIndicator.test.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,31 @@ const EXAMPLE_PROPS: Types.RowIndicatorProps = {
1313
onSelect: jest.fn(),
1414
};
1515

16+
const wrapper = ({ children }: { children?: React.ReactNode }) => {
17+
return (
18+
<table>
19+
<thead>
20+
<tr>{children}</tr>
21+
</thead>
22+
</table>
23+
);
24+
};
25+
1626
describe("<RowIndicator />", () => {
1727
test("renders with row number", () => {
18-
render(<RowIndicator {...EXAMPLE_PROPS} />);
28+
render(<RowIndicator {...EXAMPLE_PROPS} />, { wrapper });
1929
expect(document.querySelectorAll("th.Spreadsheet__header").length).toBe(1);
2030
expect(screen.queryByText("1")).not.toBeNull();
2131
});
2232
test("renders with label", () => {
23-
render(<RowIndicator {...EXAMPLE_PROPS} label="Example Label" />);
33+
render(<RowIndicator {...EXAMPLE_PROPS} label="Example Label" />, {
34+
wrapper,
35+
});
2436
expect(document.querySelectorAll("th.Spreadsheet__header").length).toBe(1);
2537
expect(screen.queryByText("Example Label")).not.toBeNull();
2638
});
2739
test("calls on select", () => {
28-
render(<RowIndicator {...EXAMPLE_PROPS} />);
40+
render(<RowIndicator {...EXAMPLE_PROPS} />, { wrapper });
2941
expect(document.querySelectorAll("th.Spreadsheet__header").length).toBe(1);
3042
const indicator = document.querySelector(
3143
"th.Spreadsheet__header"

0 commit comments

Comments
 (0)