Skip to content

Commit b184c62

Browse files
samuelreichertsamuelreichert
committed
test(datagrid-web): migrate tests to use @testing-library/react and update snapshots
1 parent 1e8be47 commit b184c62

File tree

5 files changed

+309
-208
lines changed

5 files changed

+309
-208
lines changed

‎packages/pluggableWidgets/datagrid-web/jest.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
module.exports = {
2-
...require("@mendix/pluggable-widgets-tools/test-config/jest.config"),
2+
...require("@mendix/pluggable-widgets-tools/test-config/jest.enzyme-free.config.js"),
33
/**
44
* `nanoevents` package is ESM module and because ESM is not supported by Jest yet
55
* we mark `nanoevents` as a module that should be transformed by ts-jest.

‎packages/pluggableWidgets/datagrid-web/src/components/__tests__/ColumnResizer.spec.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { render } from "enzyme";
1+
import "@testing-library/jest-dom";
2+
import { render } from "@testing-library/react";
23
import { createElement } from "react";
34
import { ColumnResizer } from "../ColumnResizer";
45

‎packages/pluggableWidgets/datagrid-web/src/components/__tests__/Header.spec.tsx

Lines changed: 45 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,86 @@
1-
import { render, shallow } from "enzyme";
1+
import "@testing-library/jest-dom";
2+
import { render } from "@testing-library/react";
3+
import userEvent from "@testing-library/user-event";
24
import { createElement } from "react";
3-
import { GridColumn } from "../../typings/GridColumn";
5+
import { GridColumn, ColumnId } from "../../typings/GridColumn";
46
import { ColumnResizer } from "../ColumnResizer";
57
import { Header, HeaderProps } from "../Header";
68

79
describe("Header", () => {
810
it("renders the structure correctly", () => {
911
const component = render(<Header {...mockHeaderProps()} />);
1012

11-
expect(component).toMatchSnapshot();
13+
expect(component.asFragment()).toMatchSnapshot();
1214
});
1315

1416
it("renders the structure correctly when sortable", () => {
1517
const props = mockHeaderProps();
1618
props.column.canSort = true;
1719
props.sortable = true;
18-
1920
const component = render(<Header {...props} />);
2021

21-
expect(component).toMatchSnapshot();
22+
expect(component.asFragment()).toMatchSnapshot();
2223
});
2324

2425
it("renders the structure correctly when resizable", () => {
2526
const props = mockHeaderProps();
2627
props.column.canResize = true;
2728
props.resizable = true;
28-
2929
const component = render(<Header {...props} />);
3030

31-
expect(component).toMatchSnapshot();
31+
expect(component.asFragment()).toMatchSnapshot();
3232
});
3333

3434
it("renders the structure correctly when draggable", () => {
3535
const props = mockHeaderProps();
3636
props.column.canDrag = true;
3737
props.draggable = true;
38-
3938
const component = render(<Header {...props} />);
4039

41-
expect(component).toMatchSnapshot();
40+
expect(component.asFragment()).toMatchSnapshot();
4241
});
4342

4443
it("renders the structure correctly when filterable with no custom filter", () => {
4544
const props = mockHeaderProps();
4645
props.filterable = true;
47-
4846
const component = render(<Header {...props} />);
4947

50-
expect(component).toMatchSnapshot();
48+
expect(component.asFragment()).toMatchSnapshot();
5149
});
5250

5351
it("renders the structure correctly when filterable with custom filter", () => {
5452
const props = mockHeaderProps();
55-
const filterWidget = (
53+
props.filterable = true;
54+
props.filterWidget = (
5655
<div>
5756
<label>Date picker filter</label>
5857
<input type="date" />
5958
</div>
6059
);
61-
props.filterable = true;
62-
63-
const component = render(<Header {...props} filterWidget={filterWidget} />);
60+
const component = render(<Header {...props} />);
6461

65-
expect(component).toMatchSnapshot();
62+
expect(component.asFragment()).toMatchSnapshot();
6663
});
6764

68-
it("calls setSortBy store function with correct parameters when sortable", () => {
65+
it("calls setSortBy store function with correct parameters when sortable", async () => {
66+
const user = userEvent.setup();
6967
const mockedFunction = jest.fn();
70-
const column = {
71-
columnId: "0",
68+
const props = mockHeaderProps();
69+
props.sortable = true;
70+
props.column = {
71+
...props.column,
72+
columnId: "0" as ColumnId,
7273
columnNumber: 0,
7374
header: "My sortable column",
7475
canSort: true,
7576
sortDir: undefined,
7677
toggleSort: mockedFunction
7778
} as any;
79+
const component = render(<Header {...props} />);
80+
const button = component.getByRole("button");
7881

79-
const component = shallow(<Header {...mockHeaderProps()} column={column} sortable />);
80-
81-
const clickableRegion = component.find(".column-header");
82-
83-
expect(clickableRegion).toHaveLength(1);
84-
85-
clickableRegion.simulate("click");
82+
expect(button).toBeInTheDocument();
83+
await user.click(button);
8684
expect(mockedFunction).toHaveBeenCalled();
8785
});
8886

@@ -92,7 +90,7 @@ describe("Header", () => {
9290

9391
const component = render(<Header {...props} className="my-custom-class" />);
9492

95-
expect(component).toMatchSnapshot();
93+
expect(component.asFragment()).toMatchSnapshot();
9694
});
9795

9896
it("renders the structure correctly when is hidden and preview", () => {
@@ -103,7 +101,7 @@ describe("Header", () => {
103101

104102
const component = render(<Header {...props} />);
105103

106-
expect(component).toMatchSnapshot();
104+
expect(component.asFragment()).toMatchSnapshot();
107105
});
108106

109107
it("renders the structure correctly when value is empty", () => {
@@ -112,19 +110,35 @@ describe("Header", () => {
112110

113111
const component = render(<Header {...props} />);
114112

115-
expect(component).toMatchSnapshot();
113+
expect(component.asFragment()).toMatchSnapshot();
116114
});
117115
});
118116

119117
function mockHeaderProps(): HeaderProps {
120118
return {
121119
gridId: "dg1",
122120
column: {
123-
columnId: "dg1-column0",
121+
columnId: "dg1-column0" as ColumnId,
124122
columnIndex: 0,
125123
header: "Test",
126124
sortDir: undefined,
127-
toggleSort: () => undefined
125+
toggleSort: () => undefined,
126+
setHeaderElementRef: jest.fn(),
127+
alignment: "left",
128+
canDrag: false,
129+
columnClass: () => undefined,
130+
initiallyHidden: false,
131+
renderCellContent: () => createElement("div"),
132+
isAvailable: true,
133+
wrapText: false,
134+
canHide: false,
135+
isHidden: false,
136+
toggleHidden: () => undefined,
137+
canSort: false,
138+
canResize: false,
139+
size: undefined,
140+
setSize: () => undefined,
141+
getCssWidth: () => "100px"
128142
} as GridColumn,
129143
draggable: false,
130144
dropTarget: undefined,

‎packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/ColumnResizer.spec.tsx.snap

Lines changed: 76 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,80 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`Column Resizer renders the structure correctly 1`] = `
4-
<div
5-
aria-hidden="true"
6-
class="column-resizer"
7-
>
8-
<div
9-
class="column-resizer-bar"
10-
/>
11-
</div>
4+
{
5+
"asFragment": [Function],
6+
"baseElement": <body>
7+
<div>
8+
<div
9+
aria-hidden="true"
10+
class="column-resizer"
11+
>
12+
<div
13+
class="column-resizer-bar"
14+
/>
15+
</div>
16+
</div>
17+
</body>,
18+
"container": <div>
19+
<div
20+
aria-hidden="true"
21+
class="column-resizer"
22+
>
23+
<div
24+
class="column-resizer-bar"
25+
/>
26+
</div>
27+
</div>,
28+
"debug": [Function],
29+
"findAllByAltText": [Function],
30+
"findAllByDisplayValue": [Function],
31+
"findAllByLabelText": [Function],
32+
"findAllByPlaceholderText": [Function],
33+
"findAllByRole": [Function],
34+
"findAllByTestId": [Function],
35+
"findAllByText": [Function],
36+
"findAllByTitle": [Function],
37+
"findByAltText": [Function],
38+
"findByDisplayValue": [Function],
39+
"findByLabelText": [Function],
40+
"findByPlaceholderText": [Function],
41+
"findByRole": [Function],
42+
"findByTestId": [Function],
43+
"findByText": [Function],
44+
"findByTitle": [Function],
45+
"getAllByAltText": [Function],
46+
"getAllByDisplayValue": [Function],
47+
"getAllByLabelText": [Function],
48+
"getAllByPlaceholderText": [Function],
49+
"getAllByRole": [Function],
50+
"getAllByTestId": [Function],
51+
"getAllByText": [Function],
52+
"getAllByTitle": [Function],
53+
"getByAltText": [Function],
54+
"getByDisplayValue": [Function],
55+
"getByLabelText": [Function],
56+
"getByPlaceholderText": [Function],
57+
"getByRole": [Function],
58+
"getByTestId": [Function],
59+
"getByText": [Function],
60+
"getByTitle": [Function],
61+
"queryAllByAltText": [Function],
62+
"queryAllByDisplayValue": [Function],
63+
"queryAllByLabelText": [Function],
64+
"queryAllByPlaceholderText": [Function],
65+
"queryAllByRole": [Function],
66+
"queryAllByTestId": [Function],
67+
"queryAllByText": [Function],
68+
"queryAllByTitle": [Function],
69+
"queryByAltText": [Function],
70+
"queryByDisplayValue": [Function],
71+
"queryByLabelText": [Function],
72+
"queryByPlaceholderText": [Function],
73+
"queryByRole": [Function],
74+
"queryByTestId": [Function],
75+
"queryByText": [Function],
76+
"queryByTitle": [Function],
77+
"rerender": [Function],
78+
"unmount": [Function],
79+
}
1280
`;

0 commit comments

Comments
 (0)