Skip to content

Commit 4ed65f3

Browse files
afontcuGpx
afontcu
authored and
Gpx
committed
test: 💍 add Vue tests for click event
1 parent 502741d commit 4ed65f3

File tree

7 files changed

+402
-5
lines changed

7 files changed

+402
-5
lines changed

‎__tests__/click.js renamed to ‎__tests__/react/click.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
2-
import { render, cleanup, fireEvent } from "@testing-library/react";
2+
import { render, cleanup } from "@testing-library/react";
33
import "jest-dom/extend-expect";
4-
import userEvent from "../src";
4+
import userEvent from "../../src";
55

66
afterEach(cleanup);
77

‎__tests__/dblclick.js renamed to ‎__tests__/react/dblclick.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22
import { render, cleanup } from "@testing-library/react";
33
import "jest-dom/extend-expect";
4-
import userEvent from "../src";
4+
import userEvent from "../../src";
55

66
afterEach(cleanup);
77

‎__tests__/selectoptions.js renamed to ‎__tests__/react/selectoptions.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22
import { render, cleanup, fireEvent } from "@testing-library/react";
33
import "jest-dom/extend-expect";
4-
import userEvent from "../src";
4+
import userEvent from "../../src";
55

66
afterEach(cleanup);
77

‎__tests__/type.js renamed to ‎__tests__/react/type.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22
import { cleanup, render, wait } from "@testing-library/react";
33
import "jest-dom/extend-expect";
4-
import userEvent from "../src";
4+
import userEvent from "../../src";
55

66
afterEach(cleanup);
77

‎__tests__/vue/click.js

Lines changed: 340 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,340 @@
1+
import { render, cleanup } from "@testing-library/vue";
2+
import "jest-dom/extend-expect";
3+
import userEvent from "../../src";
4+
5+
afterEach(cleanup);
6+
7+
describe("userEvent.click", () => {
8+
it.each(["input", "textarea"])(
9+
"should fire the correct events for <%s>",
10+
type => {
11+
const events = [];
12+
const eventsHandler = jest.fn(evt => events.push(evt.type));
13+
const { getByTestId } = render({
14+
render: function(h) {
15+
return h(type, {
16+
attrs: {
17+
"data-testid": "element"
18+
},
19+
on: {
20+
mouseover: eventsHandler,
21+
mousemove: eventsHandler,
22+
mousedown: eventsHandler,
23+
focus: eventsHandler,
24+
mouseup: eventsHandler,
25+
click: eventsHandler
26+
}
27+
});
28+
}
29+
});
30+
31+
userEvent.click(getByTestId("element"));
32+
33+
// baseElement is always <body>, si wasAnotherElementFocused is false
34+
expect(events).toEqual([
35+
"mouseover",
36+
"mousemove",
37+
"mousedown",
38+
"focus",
39+
"mouseup",
40+
"click"
41+
]);
42+
}
43+
);
44+
45+
it('should fire the correct events for <input type="checkbox">', () => {
46+
const events = [];
47+
const eventsHandler = jest.fn(evt => events.push(evt.type));
48+
49+
const { getByTestId } = render({
50+
render: function(h) {
51+
return h("input", {
52+
attrs: {
53+
type: "checkbox",
54+
"data-testid": "element"
55+
},
56+
on: {
57+
mouseover: eventsHandler,
58+
mousemove: eventsHandler,
59+
mousedown: eventsHandler,
60+
focus: eventsHandler,
61+
mouseup: eventsHandler,
62+
click: eventsHandler,
63+
change: eventsHandler
64+
}
65+
});
66+
}
67+
});
68+
69+
userEvent.click(getByTestId("element"));
70+
71+
expect(events).toEqual([
72+
"mouseover",
73+
"mousemove",
74+
"mousedown",
75+
"mouseup",
76+
"click",
77+
"change"
78+
]);
79+
80+
expect(getByTestId("element")).toHaveProperty("checked", true);
81+
});
82+
83+
it('should fire the correct events for <input type="checkbox" disabled>', () => {
84+
const events = [];
85+
const eventsHandler = jest.fn(evt => events.push(evt.type));
86+
const { getByTestId } = render({
87+
render: function(h) {
88+
return h("input", {
89+
attrs: {
90+
type: "checkbox",
91+
"data-testid": "element",
92+
disabled: "disabled"
93+
},
94+
on: {
95+
mouseover: eventsHandler,
96+
mousemove: eventsHandler,
97+
mousedown: eventsHandler,
98+
focus: eventsHandler,
99+
mouseup: eventsHandler,
100+
click: eventsHandler,
101+
change: eventsHandler
102+
}
103+
});
104+
}
105+
});
106+
107+
userEvent.click(getByTestId("element"));
108+
109+
expect(events).toEqual([]);
110+
111+
expect(getByTestId("element")).toHaveProperty("checked", false);
112+
});
113+
114+
it('should fire the correct events for <input type="radio">', () => {
115+
const events = [];
116+
const eventsHandler = jest.fn(evt => events.push(evt.type));
117+
const { getByTestId } = render({
118+
render: function(h) {
119+
return h("input", {
120+
attrs: {
121+
type: "radio",
122+
"data-testid": "element"
123+
},
124+
on: {
125+
mouseover: eventsHandler,
126+
mousemove: eventsHandler,
127+
mousedown: eventsHandler,
128+
focus: eventsHandler,
129+
mouseup: eventsHandler,
130+
click: eventsHandler,
131+
change: eventsHandler
132+
}
133+
});
134+
}
135+
});
136+
137+
userEvent.click(getByTestId("element"));
138+
139+
expect(events).toEqual([
140+
"mouseover",
141+
"mousemove",
142+
"mousedown",
143+
"mouseup",
144+
"click",
145+
"change"
146+
]);
147+
148+
expect(getByTestId("element")).toHaveProperty("checked", true);
149+
});
150+
151+
it('should fire the correct events for <input type="radio" disabled>', () => {
152+
const events = [];
153+
const eventsHandler = jest.fn(evt => events.push(evt.type));
154+
const { getByTestId } = render({
155+
render: function(h) {
156+
return h("input", {
157+
attrs: {
158+
type: "radio",
159+
"data-testid": "element",
160+
disabled: "disabled"
161+
},
162+
on: {
163+
mouseover: eventsHandler,
164+
mousemove: eventsHandler,
165+
mousedown: eventsHandler,
166+
focus: eventsHandler,
167+
mouseup: eventsHandler,
168+
click: eventsHandler,
169+
change: eventsHandler
170+
}
171+
});
172+
}
173+
});
174+
175+
userEvent.click(getByTestId("element"));
176+
177+
expect(events).toEqual([]);
178+
179+
expect(getByTestId("element")).toHaveProperty("checked", false);
180+
});
181+
182+
it("should fire the correct events for <div>", () => {
183+
const events = [];
184+
const eventsHandler = jest.fn(evt => events.push(evt.type));
185+
const { getByTestId } = render({
186+
render: function(h) {
187+
return h("div", {
188+
attrs: {
189+
"data-testid": "div"
190+
},
191+
on: {
192+
mouseover: eventsHandler,
193+
mousemove: eventsHandler,
194+
mousedown: eventsHandler,
195+
focus: eventsHandler,
196+
mouseup: eventsHandler,
197+
click: eventsHandler
198+
}
199+
});
200+
}
201+
});
202+
203+
userEvent.click(getByTestId("div"));
204+
expect(events).toEqual([
205+
"mouseover",
206+
"mousemove",
207+
"mousedown",
208+
"mouseup",
209+
"click"
210+
]);
211+
});
212+
213+
it("toggles the focus", () => {
214+
const { getByTestId } = render({
215+
template: `
216+
<div>
217+
<input data-testid="A" />
218+
<input data-testid="B" />
219+
</div>`
220+
});
221+
222+
const a = getByTestId("A");
223+
const b = getByTestId("B");
224+
225+
expect(a).not.toHaveFocus();
226+
expect(b).not.toHaveFocus();
227+
228+
userEvent.click(a);
229+
expect(a).toHaveFocus();
230+
expect(b).not.toHaveFocus();
231+
232+
userEvent.click(b);
233+
expect(a).not.toHaveFocus();
234+
expect(b).toHaveFocus();
235+
});
236+
237+
it.each(["input", "textarea"])(
238+
"gives focus to <%s> when clicking a <label> with for",
239+
type => {
240+
const { getByTestId } = render({
241+
template: `
242+
<div>
243+
<label data-testid="label" for="input" />
244+
<component is="${type}" data-testid="input" id="input" />
245+
</div>`
246+
});
247+
248+
userEvent.click(getByTestId("label"));
249+
expect(getByTestId("input")).toHaveFocus();
250+
}
251+
);
252+
253+
it.each(["input", "textarea"])(
254+
"gives focus to <%s> when clicking a <label> without htmlFor",
255+
type => {
256+
const { getByTestId } = render({
257+
template: `
258+
<label data-testid="label">
259+
My label text
260+
<component is="${type}" data-testid="input" />
261+
</label>`
262+
});
263+
264+
userEvent.click(getByTestId("label"));
265+
expect(getByTestId("input")).toHaveFocus();
266+
}
267+
);
268+
269+
it.each(["input", "textarea"])(
270+
"gives focus to <%s> when clicking on an element contained within a <label>",
271+
type => {
272+
const { getByText, getByTestId } = render({
273+
template: `
274+
<div>
275+
<label for="input" data-testid="label">Label</Label>
276+
<component is="${type}" id="input" data-testid="input" />
277+
</div>`
278+
});
279+
280+
userEvent.click(getByText("Label"));
281+
expect(getByTestId("input")).toHaveFocus();
282+
}
283+
);
284+
285+
it('checks <input type="checkbox"> when clicking a <label> with htmlFor', () => {
286+
const { getByTestId } = render({
287+
template: `
288+
<div>
289+
<label for="input" data-testid="label">
290+
Label
291+
</label>
292+
<input id="input" data-testid="input" type="checkbox" />
293+
</div>`
294+
});
295+
296+
expect(getByTestId("input")).toHaveProperty("checked", false);
297+
userEvent.click(getByTestId("label"));
298+
expect(getByTestId("input")).toHaveProperty("checked", true);
299+
});
300+
301+
it('checks <input type="checkbox"> when clicking a <label> without htmlFor', () => {
302+
const { getByTestId } = render({
303+
template: `
304+
<div>
305+
<label data-testid="label">
306+
Label
307+
<input id="input" data-testid="input" type="checkbox" />
308+
</label>
309+
</div>`
310+
});
311+
312+
expect(getByTestId("input")).toHaveProperty("checked", false);
313+
userEvent.click(getByTestId("label"));
314+
expect(getByTestId("input")).toHaveProperty("checked", true);
315+
});
316+
317+
it("should submit a form when clicking on a <button>", () => {
318+
const { getByText, emitted } = render({
319+
template: `
320+
<form @submit="$emit('submit')">
321+
<button>Submit</button>
322+
</form>`
323+
});
324+
325+
userEvent.click(getByText("Submit"));
326+
expect(emitted().submit).toHaveLength(1);
327+
});
328+
329+
it('should not submit a form when clicking on a <button type="button">', () => {
330+
const { getByText, emitted } = render({
331+
template: `
332+
<form @submit="$emit('submit')">
333+
<button type="button">Submit</button>
334+
</form>`
335+
});
336+
337+
userEvent.click(getByText("Submit"));
338+
expect(emitted()).toEqual({});
339+
});
340+
});

0 commit comments

Comments
 (0)