Skip to content

Commit 9f9f27b

Browse files
samuelreichertsamuelreichert
committed
test(badge-web): migrate tests to use react-testing-library and update snapshot format
1 parent abd15a3 commit 9f9f27b

File tree

4 files changed

+100
-93
lines changed

4 files changed

+100
-93
lines changed

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
...require("@mendix/pluggable-widgets-tools/test-config/jest.enzyme-free.config.js")
3+
};

‎packages/pluggableWidgets/badge-web/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
"publish-marketplace": "rui-publish-marketplace",
3838
"release": "cross-env MPKOUTPUT=Badge.mpk pluggable-widgets-tools release:web",
3939
"start": "cross-env MPKOUTPUT=Badge.mpk pluggable-widgets-tools start:server",
40-
"test": "pluggable-widgets-tools test:unit:web",
40+
"test": "jest --projects jest.config.js",
4141
"update-changelog": "rui-update-changelog-widget",
4242
"verify": "rui-verify-package-format"
4343
},

‎packages/pluggableWidgets/badge-web/src/components/__tests__/Badge.spec.tsx‎

Lines changed: 38 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,84 @@
1-
import { shallow, ShallowWrapper } from "enzyme";
1+
import "@testing-library/jest-dom";
2+
import { fireEvent, render, RenderResult } from "@testing-library/react";
3+
import userEvent from "@testing-library/user-event";
24
import { createElement } from "react";
3-
45
import { Badge, BadgeProps } from "../Badge";
56

67
describe("Badge", () => {
7-
const createBadge = (props: BadgeProps): ShallowWrapper<any, any> => shallow(<Badge {...props} />);
8-
9-
let defaultBadgeProps: BadgeProps;
8+
const defaultBadgeProps: BadgeProps = {
9+
type: "badge",
10+
value: "text"
11+
};
1012

11-
beforeEach(() => {
12-
defaultBadgeProps = {
13-
type: "badge",
14-
value: "text"
15-
};
16-
});
13+
function renderBadge(props: Partial<BadgeProps> = {}): RenderResult {
14+
return render(<Badge {...defaultBadgeProps} {...props} />);
15+
}
1716

1817
it("renders as a badge", () => {
19-
const badge = createBadge(defaultBadgeProps);
18+
const badge = renderBadge();
2019

21-
expect(badge).toMatchSnapshot();
20+
expect(badge.container).toMatchSnapshot();
2221
});
2322

2423
it("renders as a label", () => {
25-
defaultBadgeProps.type = "label";
26-
const badge = createBadge(defaultBadgeProps);
24+
const badge = renderBadge({ type: "label" });
2725

28-
expect(badge).toMatchSnapshot();
26+
expect(badge.container).toMatchSnapshot();
2927
});
3028

3129
it("renders when an empty string is passed as value", () => {
32-
defaultBadgeProps.value = "";
33-
const badge = createBadge(defaultBadgeProps);
30+
const badge = renderBadge({ value: "" });
3431

35-
expect(badge).toMatchSnapshot();
32+
expect(badge.container).toMatchSnapshot();
3633
});
3734

3835
it("renders as a button like element when onClick function is passed", () => {
39-
defaultBadgeProps.onClick = jest.fn();
40-
const badge = createBadge(defaultBadgeProps);
36+
const badge = renderBadge({ onClick: jest.fn() });
4137

42-
expect(badge).toMatchSnapshot();
38+
expect(badge.container).toMatchSnapshot();
4339
});
4440

45-
it("triggers onClick function with a click event", () => {
46-
defaultBadgeProps.onClick = jest.fn();
47-
const badge = createBadge(defaultBadgeProps);
41+
it("triggers onClick function with a click event", async () => {
42+
const onClickMock = jest.fn();
43+
const badge = renderBadge({ onClick: onClickMock });
44+
const user = userEvent.setup();
4845

49-
badge.simulate("click");
46+
await user.click(badge.getByRole("button"));
5047

51-
expect(defaultBadgeProps.onClick).toHaveBeenCalledTimes(1);
48+
expect(onClickMock).toHaveBeenCalledTimes(1);
5249
});
5350

5451
it("renders as a button like element when onKeyDown function is passed", () => {
55-
defaultBadgeProps.onKeyDown = jest.fn();
56-
const badge = createBadge(defaultBadgeProps);
52+
const badge = renderBadge({ onKeyDown: jest.fn() });
5753

58-
expect(badge).toMatchSnapshot();
54+
expect(badge.container).toMatchSnapshot();
5955
});
6056

61-
it("triggers onKeyDown function on key down", () => {
62-
defaultBadgeProps.onKeyDown = jest.fn();
63-
const badge = createBadge(defaultBadgeProps);
57+
it("triggers onKeyDown function on key down", async () => {
58+
const onKeyDownMock = jest.fn();
59+
const badge = renderBadge({ onKeyDown: onKeyDownMock });
60+
const button = badge.getByRole("button");
6461

65-
badge.simulate("keydown");
62+
await fireEvent.keyDown(button, { key: "Enter" });
6663

67-
expect(defaultBadgeProps.onKeyDown).toHaveBeenCalledTimes(1);
64+
expect(onKeyDownMock).toHaveBeenCalledTimes(1);
6865
});
6966

7067
it("renders with a tabIndex", () => {
71-
defaultBadgeProps.tabIndex = 1;
72-
const badge = createBadge(defaultBadgeProps);
68+
const badge = renderBadge({ tabIndex: 1 });
7369

74-
expect(badge).toMatchSnapshot();
70+
expect(badge.container).toMatchSnapshot();
7571
});
7672

7773
it("renders custom classes", () => {
78-
defaultBadgeProps.className = "custom-class";
79-
const badge = createBadge(defaultBadgeProps);
74+
const badge = renderBadge({ className: "custom-class" });
8075

81-
expect(badge).toMatchSnapshot();
76+
expect(badge.container).toMatchSnapshot();
8277
});
8378

8479
it("renders custom styles", () => {
85-
defaultBadgeProps.style = { padding: 5 };
86-
const badge = createBadge(defaultBadgeProps);
80+
const badge = renderBadge({ style: { padding: 5 } });
8781

88-
expect(badge).toMatchSnapshot();
82+
expect(badge.container).toMatchSnapshot();
8983
});
9084
});

‎packages/pluggableWidgets/badge-web/src/components/__tests__/__snapshots__/Badge.spec.tsx.snap‎

Lines changed: 58 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,83 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`Badge renders as a badge 1`] = `
4-
<span
5-
className="widget-badge badge"
6-
>
7-
text
8-
</span>
4+
<div>
5+
<span
6+
class="widget-badge badge"
7+
>
8+
text
9+
</span>
10+
</div>
911
`;
1012

1113
exports[`Badge renders as a button like element when onClick function is passed 1`] = `
12-
<span
13-
className="widget-badge badge widget-badge-clickable"
14-
onClick={[MockFunction]}
15-
role="button"
16-
>
17-
text
18-
</span>
14+
<div>
15+
<span
16+
class="widget-badge badge widget-badge-clickable"
17+
role="button"
18+
>
19+
text
20+
</span>
21+
</div>
1922
`;
2023

2124
exports[`Badge renders as a button like element when onKeyDown function is passed 1`] = `
22-
<span
23-
className="widget-badge badge"
24-
onKeyDown={[MockFunction]}
25-
role="button"
26-
>
27-
text
28-
</span>
25+
<div>
26+
<span
27+
class="widget-badge badge"
28+
role="button"
29+
>
30+
text
31+
</span>
32+
</div>
2933
`;
3034

3135
exports[`Badge renders as a label 1`] = `
32-
<span
33-
className="widget-badge label"
34-
>
35-
text
36-
</span>
36+
<div>
37+
<span
38+
class="widget-badge label"
39+
>
40+
text
41+
</span>
42+
</div>
3743
`;
3844

3945
exports[`Badge renders custom classes 1`] = `
40-
<span
41-
className="widget-badge badge custom-class"
42-
>
43-
text
44-
</span>
46+
<div>
47+
<span
48+
class="widget-badge badge custom-class"
49+
>
50+
text
51+
</span>
52+
</div>
4553
`;
4654

4755
exports[`Badge renders custom styles 1`] = `
48-
<span
49-
className="widget-badge badge"
50-
style={
51-
{
52-
"padding": 5,
53-
}
54-
}
55-
>
56-
text
57-
</span>
56+
<div>
57+
<span
58+
class="widget-badge badge"
59+
style="padding: 5px;"
60+
>
61+
text
62+
</span>
63+
</div>
5864
`;
5965

6066
exports[`Badge renders when an empty string is passed as value 1`] = `
61-
<span
62-
className="widget-badge badge"
63-
/>
67+
<div>
68+
<span
69+
class="widget-badge badge"
70+
/>
71+
</div>
6472
`;
6573

6674
exports[`Badge renders with a tabIndex 1`] = `
67-
<span
68-
className="widget-badge badge"
69-
tabIndex={1}
70-
>
71-
text
72-
</span>
75+
<div>
76+
<span
77+
class="widget-badge badge"
78+
tabindex="1"
79+
>
80+
text
81+
</span>
82+
</div>
7383
`;

0 commit comments

Comments
 (0)