Skip to content

Commit e5fd7b3

Browse files
samuelreichertsamuelreichert
committed
test(color-picker-web): migrate tests to react-testing-library and improve readability
1 parent 4d63b13 commit e5fd7b3

File tree

6 files changed

+636
-214
lines changed

6 files changed

+636
-214
lines changed

‎packages/pluggableWidgets/color-picker-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/color-picker-web/package.json‎

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

‎packages/pluggableWidgets/color-picker-web/src/components/__tests__/Button.spec.tsx‎

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,42 @@
1+
import "@testing-library/jest-dom";
2+
import { render, RenderResult } from "@testing-library/react";
13
import { createElement } from "react";
2-
import { render } from "@testing-library/react";
3-
4-
import { shallow, ShallowWrapper } from "enzyme";
5-
64
import { Button, ButtonProps } from "../Button";
75

86
describe("Button", () => {
9-
const renderButton = (props: ButtonProps): ShallowWrapper<ButtonProps, any> => shallow(<Button {...props} />);
10-
const buttonProps: ButtonProps = {
11-
color: "#000000",
12-
disabled: false,
13-
mode: "popover",
14-
onClick: jest.fn()
15-
};
7+
let buttonProps: ButtonProps;
8+
9+
beforeEach(() => {
10+
buttonProps = {
11+
color: "#000000",
12+
disabled: false,
13+
mode: "popover",
14+
onClick: jest.fn()
15+
};
16+
});
17+
18+
function renderButton(configs: Partial<ButtonProps> = {}): RenderResult {
19+
return render(<Button {...buttonProps} {...configs} />);
20+
}
1621

1722
it("render DOM structure", () => {
18-
const { asFragment } = render(<Button {...buttonProps} />);
19-
expect(asFragment()).toMatchSnapshot();
23+
const button = render(<Button {...buttonProps} />);
24+
expect(button.asFragment()).toMatchSnapshot();
2025
});
2126

2227
it("renders the structure correctly", () => {
23-
const buttonComponent = renderButton(buttonProps);
28+
const { getByRole, rerender } = renderButton();
2429

25-
expect(buttonComponent.hasClass("btn")).toBe(true);
30+
const button = getByRole("button");
31+
expect(button).toHaveClass("btn");
2632

27-
buttonComponent.setProps({ disabled: true });
28-
expect(buttonComponent.hasClass("disabled")).toBe(true);
33+
rerender(<Button {...buttonProps} disabled />);
34+
expect(button).toHaveClass("disabled");
2935

30-
buttonComponent.setProps({ mode: "input" });
31-
expect(buttonComponent.hasClass("widget-color-picker-input")).toBe(true);
36+
rerender(<Button {...buttonProps} mode="input" />);
37+
expect(button).toHaveClass("widget-color-picker-input");
3238

33-
buttonComponent.setProps({ mode: "inline" });
34-
expect(buttonComponent.hasClass("hidden")).toBe(true);
39+
rerender(<Button {...buttonProps} mode="inline" />);
40+
expect(button).toHaveClass("hidden");
3541
});
3642
});

‎packages/pluggableWidgets/color-picker-web/src/components/__tests__/ColorPicker.spec.tsx‎

Lines changed: 123 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,148 +1,180 @@
1+
import "@testing-library/jest-dom";
2+
import { render, RenderResult } from "@testing-library/react";
3+
import userEvent, { UserEvent } from "@testing-library/user-event";
14
import { createElement } from "react";
2-
import { mount, ReactWrapper, shallow, ShallowWrapper } from "enzyme";
35
import { ColorPicker, ColorPickerProps } from "../ColorPicker";
46

57
describe("ColorPicker", () => {
6-
const renderColorPicker = (props: ColorPickerProps): ShallowWrapper<ColorPickerProps, any> =>
7-
shallow(<ColorPicker {...props} />);
8-
const fullRenderColorPicker = (props: ColorPickerProps): ReactWrapper<ColorPickerProps, any> =>
9-
mount(<ColorPicker {...props} />);
10-
const colorPickerProps: ColorPickerProps = {
11-
color: "#000000",
12-
disabled: false,
13-
defaultColors: [],
14-
format: "hex",
15-
mode: "popover",
16-
type: "sketch",
17-
onChange: jest.fn(),
18-
onColorChange: jest.fn(),
19-
id: "color-picker",
20-
name: "color picker"
21-
};
8+
let colorPickerProps: ColorPickerProps;
9+
let user: UserEvent;
10+
11+
beforeEach(() => {
12+
colorPickerProps = {
13+
color: "#000000",
14+
disabled: false,
15+
defaultColors: [],
16+
format: "hex",
17+
mode: "popover",
18+
type: "sketch",
19+
onChange: jest.fn(),
20+
onColorChange: jest.fn(),
21+
id: "color-picker",
22+
name: "color picker"
23+
};
24+
user = userEvent.setup();
25+
});
26+
27+
function renderColorPicker(configs: Partial<ColorPickerProps> = {}): RenderResult {
28+
return render(<ColorPicker {...colorPickerProps} {...configs} />);
29+
}
2230

2331
it("renders the structure correctly", () => {
24-
const colorPickerComponent = renderColorPicker(colorPickerProps);
32+
const colorPickerComponent = renderColorPicker();
2533

26-
expect(colorPickerComponent).toMatchSnapshot();
34+
expect(colorPickerComponent.asFragment()).toMatchSnapshot();
2735
});
2836

2937
it("that is disabled renders with the structure", () => {
30-
const colorPickerComponent = renderColorPicker({ ...colorPickerProps, disabled: true });
31-
expect(colorPickerComponent).toMatchSnapshot();
38+
const colorPickerComponent = renderColorPicker({ disabled: true });
39+
expect(colorPickerComponent.asFragment).toMatchSnapshot();
3240
});
3341

3442
it("renders picker with pre-defined default colors", () => {
35-
const colorPickerComponent = renderColorPicker(colorPickerProps);
36-
colorPickerComponent.setProps({
37-
mode: "inline",
38-
defaultColors: [{ color: "#2CCCE4" }, { color: "#555555" }] as any
39-
});
43+
const colorPickerComponent = renderColorPicker();
4044

41-
expect(colorPickerComponent).toMatchSnapshot();
45+
colorPickerComponent.rerender(
46+
<ColorPicker
47+
{...colorPickerProps}
48+
mode="inline"
49+
defaultColors={[{ color: "#2CCCE4" }, { color: "#555555" }]}
50+
/>
51+
);
52+
53+
expect(colorPickerComponent.asFragment()).toMatchSnapshot();
4254
});
4355

44-
it("should handle on change event", () => {
45-
const colorPickerComponent = fullRenderColorPicker({
46-
...colorPickerProps,
56+
it("should handle on change event", async () => {
57+
const { getByTitle } = renderColorPicker({
4758
type: "block",
4859
mode: "inline",
4960
defaultColors: [{ color: "#F47373" }]
5061
});
51-
const colorElement = colorPickerComponent.find("[title='#F47373']");
52-
colorElement.simulate("click");
62+
63+
const colorElement = getByTitle("#F47373");
64+
await user.click(colorElement);
65+
5366
expect(colorPickerProps.onColorChange).toHaveBeenCalled();
5467
});
5568

5669
describe("renders a picker of type", () => {
57-
it("sketch", () => {
58-
const colorPickerComponent = fullRenderColorPicker({ ...colorPickerProps, type: "sketch" });
59-
const colorElement = colorPickerComponent.find("button");
60-
colorElement.simulate("click");
61-
expect(colorPickerComponent.find(".sketch-picker")).toHaveLength(1);
70+
it("sketch", async () => {
71+
const { container, getByRole } = renderColorPicker({ type: "sketch" });
72+
const colorElement = getByRole("button");
73+
74+
await user.click(colorElement);
75+
76+
expect(container.querySelector(".sketch-picker")).toBeInTheDocument();
6277
});
6378

64-
it("chrome", () => {
65-
const colorPickerComponent = fullRenderColorPicker({ ...colorPickerProps, type: "chrome" });
66-
const colorElement = colorPickerComponent.find("button");
67-
colorElement.simulate("click");
68-
expect(colorPickerComponent.find(".chrome-picker")).toHaveLength(1);
79+
it("chrome", async () => {
80+
const { container, getByRole } = renderColorPicker({ type: "chrome" });
81+
const colorElement = getByRole("button");
82+
83+
await user.click(colorElement);
84+
expect(container.querySelector(".chrome-picker")).toBeInTheDocument();
6985
});
7086

71-
it("block", () => {
72-
const colorPickerComponent = fullRenderColorPicker({ ...colorPickerProps, type: "block" });
73-
const colorElement = colorPickerComponent.find("button");
74-
colorElement.simulate("click");
87+
it("block", async () => {
88+
const { container, getByRole } = renderColorPicker({ type: "block" });
89+
const colorElement = getByRole("button");
7590

76-
expect(colorPickerComponent.find(".block-picker")).toHaveLength(1);
91+
await user.click(colorElement);
92+
93+
expect(container.querySelector(".block-picker")).toBeInTheDocument();
7794
});
7895

79-
it("github", () => {
80-
const colorPickerComponent = fullRenderColorPicker({ ...colorPickerProps, type: "github" });
81-
const colorElement = colorPickerComponent.find("button");
82-
colorElement.simulate("click");
83-
expect(colorPickerComponent.find(".github-picker")).toHaveLength(1);
96+
it("github", async () => {
97+
const { container, getByRole } = renderColorPicker({ type: "github" });
98+
const colorElement = getByRole("button");
99+
100+
await user.click(colorElement);
101+
expect(container.querySelector(".github-picker")).toBeInTheDocument();
84102
});
85103

86-
it("twitter", () => {
87-
const colorPickerComponent = fullRenderColorPicker({ ...colorPickerProps, type: "twitter" });
88-
const colorElement = colorPickerComponent.find("button");
89-
colorElement.simulate("click");
90-
expect(colorPickerComponent.find(".twitter-picker")).toHaveLength(1);
104+
it("twitter", async () => {
105+
const { container, getByRole } = renderColorPicker({ type: "twitter" });
106+
const colorElement = getByRole("button");
107+
108+
await user.click(colorElement);
109+
110+
expect(container.querySelector(".twitter-picker")).toBeInTheDocument();
91111
});
92112

93-
it("circle", () => {
94-
const colorPickerComponent = fullRenderColorPicker({ ...colorPickerProps, type: "circle" });
95-
const colorElement = colorPickerComponent.find("button");
96-
colorElement.simulate("click");
97-
expect(colorPickerComponent.find(".circle-picker")).toHaveLength(1);
113+
it("circle", async () => {
114+
const { container, getByRole } = renderColorPicker({ type: "circle" });
115+
const colorElement = getByRole("button");
116+
117+
await user.click(colorElement);
118+
119+
expect(container.querySelector(".circle-picker")).toBeInTheDocument();
98120
});
99121

100-
it("hue", () => {
101-
const colorPickerComponent = fullRenderColorPicker({ ...colorPickerProps, type: "hue" });
102-
const colorElement = colorPickerComponent.find("button");
103-
colorElement.simulate("click");
104-
expect(colorPickerComponent.find(".hue-picker")).toHaveLength(1);
122+
it("hue", async () => {
123+
const { container, getByRole } = renderColorPicker({ type: "hue" });
124+
const colorElement = getByRole("button");
125+
126+
await user.click(colorElement);
127+
128+
expect(container.querySelector(".hue-picker")).toBeInTheDocument();
105129
});
106130

107-
it("slider", () => {
108-
const colorPickerComponent = fullRenderColorPicker({ ...colorPickerProps, type: "slider" });
109-
const colorElement = colorPickerComponent.find("button");
110-
colorElement.simulate("click");
111-
expect(colorPickerComponent.find(".slider-picker")).toHaveLength(1);
131+
it("slider", async () => {
132+
const { container, getByRole } = renderColorPicker({ type: "slider" });
133+
const colorElement = getByRole("button");
134+
135+
await user.click(colorElement);
136+
137+
expect(container.querySelector(".slider-picker")).toBeInTheDocument();
112138
});
113139

114-
it("compact", () => {
115-
const colorPickerComponent = fullRenderColorPicker({ ...colorPickerProps, type: "compact" });
116-
const colorElement = colorPickerComponent.find("button");
117-
colorElement.simulate("click");
118-
expect(colorPickerComponent.find(".compact-picker")).toHaveLength(1);
140+
it("compact", async () => {
141+
const { container, getByRole } = renderColorPicker({ type: "compact" });
142+
const colorElement = getByRole("button");
143+
144+
await user.click(colorElement);
145+
146+
expect(container.querySelector(".compact-picker")).toBeInTheDocument();
119147
});
120148

121-
it("material", () => {
122-
const colorPickerComponent = fullRenderColorPicker({ ...colorPickerProps, type: "material" });
123-
const colorElement = colorPickerComponent.find("button");
124-
colorElement.simulate("click");
125-
expect(colorPickerComponent.find(".material-picker")).toHaveLength(1);
149+
it("material", async () => {
150+
const { container, getByRole } = renderColorPicker({ type: "material" });
151+
const colorElement = getByRole("button");
152+
153+
await user.click(colorElement);
154+
155+
expect(container.querySelector(".material-picker")).toBeInTheDocument();
126156
});
127157

128-
it("swatches", () => {
129-
const colorPickerComponent = fullRenderColorPicker({ ...colorPickerProps, type: "swatches" });
130-
const colorElement = colorPickerComponent.find("button");
131-
colorElement.simulate("click");
132-
expect(colorPickerComponent.find(".swatches-picker")).toHaveLength(1);
158+
it("swatches", async () => {
159+
const { container, getByRole } = renderColorPicker({ type: "swatches" });
160+
const colorElement = getByRole("button");
161+
162+
await user.click(colorElement);
163+
164+
expect(container.querySelector(".swatches-picker")).toBeInTheDocument();
133165
});
134166
});
135167

136168
describe("with a mode as", () => {
137169
it("popover or input renders with the structure", () => {
138-
const colorPickerComponent = renderColorPicker({ ...colorPickerProps, mode: "popover" });
170+
const colorPickerComponent = renderColorPicker({ mode: "popover" });
139171

140-
expect(colorPickerComponent).toMatchSnapshot();
172+
expect(colorPickerComponent.asFragment()).toMatchSnapshot();
141173
});
142174

143175
it("inline renders with the structure", () => {
144-
const colorPickerComponent = renderColorPicker({ ...colorPickerProps, mode: "inline" });
145-
expect(colorPickerComponent).toMatchSnapshot();
176+
const colorPickerComponent = renderColorPicker({ mode: "inline" });
177+
expect(colorPickerComponent.asFragment()).toMatchSnapshot();
146178
});
147179
});
148180
});

0 commit comments

Comments
 (0)