Skip to content

Commit 2e292c8

Browse files
samuelreichertsamuelreichert
committed
test(progress-bar-web): update tests to use testing-library and remove enzyme
1 parent 3333efe commit 2e292c8

File tree

3 files changed

+82
-194
lines changed

3 files changed

+82
-194
lines changed

‎packages/pluggableWidgets/progress-bar-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=ProgressBar.mpk pluggable-widgets-tools release:web",
4040
"start": "cross-env MPKOUTPUT=ProgressBar.mpk pluggable-widgets-tools start:server",
41-
"test": "pluggable-widgets-tools test:unit:web",
41+
"test": "pluggable-widgets-tools test:unit:web:enzyme-free",
4242
"update-changelog": "rui-update-changelog-widget",
4343
"verify": "rui-verify-package-format"
4444
},

‎packages/pluggableWidgets/progress-bar-web/src/components/__tests__/ProgressBar.spec.tsx

Lines changed: 70 additions & 179 deletions
Original file line numberDiff line numberDiff line change
@@ -1,247 +1,138 @@
1-
import { Alert } from "@mendix/widget-plugin-component-kit/Alert";
2-
import { HTMLAttributes, mount, ReactWrapper, shallow } from "enzyme";
3-
import { createElement, CSSProperties, FunctionComponent } from "react";
1+
import "@testing-library/jest-dom";
2+
import { render, RenderResult } from "@testing-library/react";
3+
import userEvent, { UserEvent } from "@testing-library/user-event";
4+
import { createElement, ReactElement } from "react";
45
import { ProgressBar, ProgressBarProps } from "../ProgressBar";
56

6-
const RandomComponent: FunctionComponent<any> = () => <div>This is a random component</div>;
7-
const progressBarSmallClassName = "progress-bar-small";
8-
97
describe("Progress bar", () => {
10-
function getProgressBarLabelElement(progressBar: ReactWrapper<ProgressBarProps>): ReactWrapper<HTMLAttributes> {
11-
return progressBar.find(".progress-bar");
12-
}
13-
function getProgressBarStyle(progressBar: ReactWrapper<ProgressBarProps>): CSSProperties | undefined {
14-
return getProgressBarLabelElement(progressBar).prop("style");
15-
}
16-
const progress = 23;
17-
const maximumValue = 100;
188
const onClickSpy = jest.fn();
9+
const progress = 23;
10+
let user: UserEvent;
1911

20-
it("has progress bar structure", () => {
21-
const progressBar = shallow(
12+
function renderProgressBar(props: Partial<ProgressBarProps> = {}): RenderResult {
13+
return render(
2214
<ProgressBar
2315
currentValue={progress}
2416
minValue={0}
25-
maxValue={maximumValue}
17+
maxValue={100}
2618
onClick={onClickSpy}
2719
label={`${progress}%`}
2820
class=""
21+
{...props}
2922
/>
3023
);
31-
expect(progressBar).toMatchSnapshot();
24+
}
25+
26+
beforeEach(() => {
27+
user = userEvent.setup();
3228
});
3329

34-
it("shows a positive progress", () => {
35-
const progressBar = mount(
36-
<ProgressBar
37-
currentValue={progress}
38-
minValue={0}
39-
maxValue={maximumValue}
40-
onClick={onClickSpy}
41-
label={`${progress}%`}
42-
class=""
43-
/>
44-
);
30+
it("has progress bar structure", () => {
31+
const progressBar = renderProgressBar();
32+
expect(progressBar.asFragment()).toMatchSnapshot();
33+
});
4534

46-
expect(getProgressBarStyle(progressBar)).toEqual({ width: "23%" });
35+
it("shows a positive progress", () => {
36+
const { container } = renderProgressBar();
37+
expect(container.querySelector(".progress-bar")).toHaveStyle({ width: "23%" });
4738
});
4839

49-
it("triggers an event when a clickable progress bar is clicked", () => {
50-
const progressBar = mount(
51-
<ProgressBar
52-
currentValue={progress}
53-
minValue={0}
54-
maxValue={maximumValue}
55-
onClick={onClickSpy}
56-
label={`${progress}%`}
57-
class=""
58-
/>
59-
);
60-
const progressElement = progressBar.find(".progress");
61-
expect(progressElement.hasClass("widget-progress-bar-clickable")).toBe(true);
62-
progressElement.simulate("click");
40+
it("triggers an event when a clickable progress bar is clicked", async () => {
41+
const { container } = renderProgressBar();
42+
const progressElement = container.querySelector(".progress");
43+
expect(progressElement?.className.includes("widget-progress-bar-clickable")).toBe(true);
44+
await user.click(progressElement!);
6345
expect(onClickSpy).toHaveBeenCalledTimes(1);
6446
});
6547

6648
it("handles a different range", () => {
67-
const progressBar = mount(
68-
<ProgressBar
69-
currentValue={progress}
70-
minValue={20}
71-
maxValue={30}
72-
onClick={onClickSpy}
73-
label={`${progress}%`}
74-
class=""
75-
/>
76-
);
77-
49+
const { container } = renderProgressBar({ minValue: 20, maxValue: 30 });
7850
// 23 on a range from 20 to 30 is 30% progress.
79-
expect(getProgressBarStyle(progressBar)).toEqual({ width: "30%" });
51+
expect(container.querySelector(".progress-bar")).toHaveStyle({ width: "30%" });
8052
});
8153

8254
it("clamps a current value lower than the minimum value to 0% progress", () => {
83-
const progressBar = mount(
84-
<ProgressBar
85-
currentValue={-20}
86-
minValue={0}
87-
maxValue={100}
88-
onClick={onClickSpy}
89-
label={`${progress}%`}
90-
class=""
91-
/>
92-
);
93-
94-
expect(getProgressBarStyle(progressBar)).toEqual({ width: "0%" });
55+
const { container } = renderProgressBar({ currentValue: -20 });
56+
expect(container.querySelector(".progress-bar")).toHaveStyle({ width: "0%" });
9557
});
9658

9759
it("clamps a current value higher than the maximum value to 100% progress", () => {
98-
const progressBar = mount(
99-
<ProgressBar
100-
currentValue={110}
101-
minValue={0}
102-
maxValue={100}
103-
onClick={onClickSpy}
104-
label={`${progress}%`}
105-
class=""
106-
/>
107-
);
108-
109-
expect(getProgressBarStyle(progressBar)).toEqual({ width: "100%" });
60+
const { container } = renderProgressBar({ currentValue: 110 });
61+
expect(container.querySelector(".progress-bar")).toHaveStyle({ width: "100%" });
11062
});
11163

11264
it("is not clickable when there is no onClick handler provided", () => {
113-
const progressBar = mount(
114-
<ProgressBar
115-
currentValue={50}
116-
minValue={0}
117-
maxValue={100}
118-
onClick={undefined}
119-
label={`${progress}%`}
120-
class=""
121-
/>
122-
);
123-
expect(progressBar.find(".progress").hasClass("widget-progress-bar-clickable")).toBe(false);
65+
const { container } = renderProgressBar({ currentValue: 50, onClick: undefined });
66+
expect(container.querySelector(".progress")?.className.includes("widget-progress-bar-clickable")).toBe(false);
12467
});
12568

12669
describe("shows a runtime error Alert", () => {
12770
it("when the current value is lower than the minimum value", () => {
128-
const progressBar = mount(
129-
<ProgressBar
130-
currentValue={-20}
131-
minValue={0}
132-
maxValue={100}
133-
onClick={onClickSpy}
134-
label={`${progress}%`}
135-
class=""
136-
/>
137-
);
138-
const alert = progressBar.find(Alert);
139-
expect(alert).toHaveLength(1);
140-
expect(alert.text()).toBe(
71+
const { container } = renderProgressBar({ currentValue: -20 });
72+
const alert = container.querySelector(".alert-danger");
73+
expect(alert).toBeInTheDocument();
74+
expect(alert?.textContent).toBe(
14175
"Error in progress bar values: The progress value is lower than the minimum value."
14276
);
14377
});
14478

14579
it("when the current value is higher than the maximum value", () => {
146-
const progressBar = mount(
147-
<ProgressBar
148-
currentValue={110}
149-
minValue={0}
150-
maxValue={100}
151-
onClick={onClickSpy}
152-
label={`${progress}%`}
153-
class=""
154-
/>
155-
);
156-
const alert = progressBar.find(Alert);
157-
expect(alert).toHaveLength(1);
158-
expect(alert.text()).toBe(
80+
const { container } = renderProgressBar({ currentValue: 110 });
81+
const alert = container.querySelector(".alert-danger");
82+
expect(alert).toBeInTheDocument();
83+
expect(alert?.textContent).toBe(
15984
"Error in progress bar values: The progress value is higher than the maximum value."
16085
);
16186
});
16287

16388
it("when the range of the progress bar is negative", () => {
164-
const progressBar = mount(
165-
<ProgressBar
166-
currentValue={50}
167-
minValue={40}
168-
maxValue={30}
169-
onClick={onClickSpy}
170-
label={`${progress}%`}
171-
class=""
172-
/>
173-
);
174-
const alert = progressBar.find(Alert);
175-
expect(alert).toHaveLength(1);
176-
expect(alert.text()).toBe(
89+
const { container } = renderProgressBar({ minValue: 40, maxValue: 30, currentValue: 50 });
90+
const alert = container.querySelector(".alert-danger");
91+
expect(alert).toBeInTheDocument();
92+
expect(alert?.textContent).toBe(
17793
"Error in progress bar values: The maximum value is lower than the minimum value."
17894
);
17995
});
18096
});
18197

18298
describe("the label of the progressbar", () => {
99+
const RandomComponent = (): ReactElement => <div>This is a random component</div>;
100+
const progressBarSmallClassName = "progress-bar-small";
101+
183102
it("should accept static text", () => {
184-
const progressBar = mount(
185-
<ProgressBar
186-
currentValue={30}
187-
minValue={0}
188-
maxValue={100}
189-
onClick={onClickSpy}
190-
label="This is your progress"
191-
class=""
192-
/>
193-
);
194-
expect(progressBar.text()).toBe("This is your progress");
103+
const { container } = renderProgressBar({ label: "This is your progress" });
104+
expect(container.textContent).toBe("This is your progress");
195105
});
196106

197107
it("should accept a component", () => {
198-
const progressBar = mount(
199-
<ProgressBar
200-
currentValue={30}
201-
minValue={0}
202-
maxValue={100}
203-
onClick={onClickSpy}
204-
label={<RandomComponent />}
205-
class=""
206-
/>
207-
);
208-
expect(progressBar.find(RandomComponent)).toHaveLength(1);
209-
expect(progressBar.text()).toContain("This is a random component");
108+
const { container, getByText } = renderProgressBar({ label: <RandomComponent /> });
109+
expect(getByText("This is a random component")).toBeInTheDocument();
110+
expect(container.textContent).toContain("This is a random component");
210111
});
211112

212113
it("should accept nothing", () => {
213-
const progressBar = mount(
214-
<ProgressBar currentValue={30} minValue={0} maxValue={100} onClick={onClickSpy} label={null} class="" />
215-
);
216-
expect(progressBar.text()).toHaveLength(0);
114+
const { container } = renderProgressBar({ label: null });
115+
// Should not render any label text
116+
// Remove whitespace for strict check
117+
expect(container.textContent?.trim()).toHaveLength(0);
217118
});
218119

219120
it("has a tooltip with the label text when the size is small and label type is textual", () => {
220-
const progressBar = mount(
221-
<ProgressBar
222-
currentValue={30}
223-
minValue={0}
224-
maxValue={100}
225-
onClick={onClickSpy}
226-
label="This is a label text"
227-
class={`${progressBarSmallClassName}`}
228-
/>
229-
);
230-
expect(getProgressBarLabelElement(progressBar).prop("title")).toBe("This is a label text");
121+
const { container } = renderProgressBar({
122+
label: "This is a label text",
123+
class: progressBarSmallClassName
124+
});
125+
const label = container.querySelector(".progress-bar");
126+
expect(label).toHaveAttribute("title", "This is a label text");
231127
});
232128

233129
it("does not have a tooltip nor a label when the size is small and label type is custom", () => {
234-
const progressBar = mount(
235-
<ProgressBar
236-
currentValue={30}
237-
minValue={0}
238-
maxValue={100}
239-
onClick={onClickSpy}
240-
label={<RandomComponent />}
241-
class={`${progressBarSmallClassName}`}
242-
/>
243-
);
244-
expect(getProgressBarLabelElement(progressBar).prop("title")).toBe(undefined);
130+
const { container } = renderProgressBar({
131+
label: <RandomComponent />,
132+
class: progressBarSmallClassName
133+
});
134+
const label = container.querySelector(".progress-bar");
135+
expect(label).not.toHaveAttribute("title");
245136
});
246137
});
247138
});

‎packages/pluggableWidgets/progress-bar-web/src/components/__tests__/__snapshots__/ProgressBar.spec.tsx.snap

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,21 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`Progress bar has progress bar structure 1`] = `
4-
<div
5-
className="widget-progress-bar progress-bar-medium progress-bar-primary"
6-
>
4+
<DocumentFragment>
75
<div
8-
className="progress widget-progress-bar-clickable"
9-
onClick={[MockFunction]}
6+
class="widget-progress-bar progress-bar-medium progress-bar-primary"
107
>
118
<div
12-
className="progress-bar"
13-
style={
14-
{
15-
"width": "23%",
16-
}
17-
}
18-
title="23%"
9+
class="progress widget-progress-bar-clickable"
1910
>
20-
23%
11+
<div
12+
class="progress-bar"
13+
style="width: 23%;"
14+
title="23%"
15+
>
16+
23%
17+
</div>
2118
</div>
2219
</div>
23-
</div>
20+
</DocumentFragment>
2421
`;

0 commit comments

Comments
 (0)