Skip to content

Commit 1303a79

Browse files
GpxGpx
authored
Merge pull request testing-library#153 from testing-library/add-vue-tests
test: 💍 add Vue tests for type, dblclick, selectoptions
2 parents c5df100 + 32aad7e commit 1303a79

File tree

5 files changed

+492
-9
lines changed

5 files changed

+492
-9
lines changed

‎__tests__/vue/dblclick.js

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
import { render, cleanup } from "@testing-library/vue";
2+
import "@testing-library/jest-dom/extend-expect";
3+
import userEvent from "../../src";
4+
5+
afterEach(cleanup);
6+
7+
describe("userEvent.dblClick", () => {
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+
dblclick: eventsHandler
27+
}
28+
});
29+
}
30+
});
31+
32+
userEvent.dblClick(getByTestId("element"));
33+
34+
expect(events).toEqual([
35+
"mouseover",
36+
"mousemove",
37+
"mousedown",
38+
"focus",
39+
"mouseup",
40+
"click",
41+
"mousedown",
42+
"mouseup",
43+
"click",
44+
"dblclick"
45+
]);
46+
}
47+
);
48+
49+
it('should fire the correct events for <input type="checkbox">', () => {
50+
const events = [];
51+
const eventsHandler = jest.fn(evt => events.push(evt.type));
52+
53+
const { getByTestId } = render({
54+
render: function(h) {
55+
return h("input", {
56+
attrs: {
57+
type: "checkbox",
58+
"data-testid": "element"
59+
},
60+
on: {
61+
mouseover: eventsHandler,
62+
mousemove: eventsHandler,
63+
mousedown: eventsHandler,
64+
focus: eventsHandler,
65+
mouseup: eventsHandler,
66+
click: eventsHandler,
67+
change: eventsHandler
68+
}
69+
});
70+
}
71+
});
72+
73+
userEvent.dblClick(getByTestId("element"));
74+
75+
expect(events).toEqual([
76+
"mouseover",
77+
"mousemove",
78+
"mousedown",
79+
"mouseup",
80+
"click",
81+
"change",
82+
"mousedown",
83+
"mouseup",
84+
"click",
85+
"change"
86+
]);
87+
88+
expect(getByTestId("element")).toHaveProperty("checked", false);
89+
});
90+
91+
it("should fire the correct events for <div>", () => {
92+
const events = [];
93+
const eventsHandler = jest.fn(evt => events.push(evt.type));
94+
const { getByTestId } = render({
95+
render: function(h) {
96+
return h("div", {
97+
attrs: {
98+
"data-testid": "div"
99+
},
100+
on: {
101+
mouseover: eventsHandler,
102+
mousemove: eventsHandler,
103+
mousedown: eventsHandler,
104+
focus: eventsHandler,
105+
mouseup: eventsHandler,
106+
click: eventsHandler,
107+
change: eventsHandler
108+
}
109+
});
110+
}
111+
});
112+
113+
userEvent.dblClick(getByTestId("div"));
114+
expect(events).toEqual([
115+
"mouseover",
116+
"mousemove",
117+
"mousedown",
118+
"mouseup",
119+
"click",
120+
"mousedown",
121+
"mouseup",
122+
"click"
123+
]);
124+
});
125+
});

‎__tests__/vue/selectoptions.js

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
import { render, cleanup } from "@testing-library/vue";
2+
import "@testing-library/jest-dom/extend-expect";
3+
import userEvent from "../../src";
4+
5+
afterEach(cleanup);
6+
7+
describe("userEvent.selectOptions", () => {
8+
it.each(["select", "select multiple"])(
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 multiple = type === "select multiple";
14+
const eventHandlers = {
15+
mouseover: eventsHandler,
16+
mousemove: eventsHandler,
17+
mousedown: eventsHandler,
18+
focus: eventsHandler,
19+
mouseup: eventsHandler,
20+
click: eventsHandler
21+
};
22+
23+
const { getByTestId } = render({
24+
render: function(h) {
25+
return h(
26+
"select",
27+
{
28+
attrs: {
29+
"data-testid": "element",
30+
...(multiple && { multiple: true })
31+
},
32+
on: eventHandlers
33+
},
34+
[
35+
h("option", { attrs: { value: "1" } }, "1"),
36+
h("option", { attrs: { value: "2" } }, "2"),
37+
h("option", { attrs: { value: "3" } }, "3")
38+
]
39+
);
40+
}
41+
});
42+
43+
userEvent.selectOptions(getByTestId("element"), "1");
44+
45+
expect(events).toEqual([
46+
"mouseover",
47+
"mousemove",
48+
"mousedown",
49+
"focus",
50+
"mouseup",
51+
"click",
52+
"mouseover", // The events repeat because we click on the child OPTION too
53+
"mousemove", // But these specifically are the events bubbling up to the <select>
54+
"mousedown",
55+
// "focus", // Focus event isn't being emitted?
56+
"mouseup",
57+
"click"
58+
]);
59+
}
60+
);
61+
62+
it("should fire the correct events on selected OPTION child with <select>", () => {
63+
function handleEvent(evt) {
64+
const optValue = parseInt(evt.target.value);
65+
events[optValue] = [...(events[optValue] || []), evt.type];
66+
}
67+
68+
const events = [];
69+
const eventsHandler = jest.fn(handleEvent);
70+
const eventHandlers = {
71+
mouseover: eventsHandler,
72+
mousemove: eventsHandler,
73+
mousedown: eventsHandler,
74+
focus: eventsHandler,
75+
mouseup: eventsHandler,
76+
click: eventsHandler
77+
};
78+
79+
const { getByTestId } = render({
80+
render: function(h) {
81+
return h(
82+
"select",
83+
{
84+
attrs: {
85+
"data-testid": "element"
86+
}
87+
},
88+
[
89+
h("option", { attrs: { value: "1" }, on: eventHandlers }, "1"),
90+
h("option", { attrs: { value: "2" }, on: eventHandlers }, "2"),
91+
h("option", { attrs: { value: "3" }, on: eventHandlers }, "3")
92+
]
93+
);
94+
}
95+
});
96+
97+
userEvent.selectOptions(getByTestId("element"), ["2"]);
98+
99+
expect(events[1]).toBe(undefined);
100+
expect(events[3]).toBe(undefined);
101+
expect(events[2]).toEqual([
102+
"mouseover",
103+
"mousemove",
104+
"mousedown",
105+
"focus",
106+
"mouseup",
107+
"click"
108+
]);
109+
});
110+
111+
it("should fire the correct events on selected OPTION children with <select multiple>", () => {
112+
function handleEvent(evt) {
113+
const optValue = parseInt(evt.target.value);
114+
events[optValue] = [...(events[optValue] || []), evt.type];
115+
}
116+
117+
const events = [];
118+
const eventsHandler = jest.fn(handleEvent);
119+
const eventHandlers = {
120+
mouseover: eventsHandler,
121+
mousemove: eventsHandler,
122+
mousedown: eventsHandler,
123+
focus: eventsHandler,
124+
mouseup: eventsHandler,
125+
click: eventsHandler
126+
};
127+
128+
const { getByTestId } = render({
129+
render: function(h) {
130+
return h(
131+
"select",
132+
{
133+
attrs: {
134+
"data-testid": "element",
135+
multiple: true
136+
}
137+
},
138+
[
139+
h("option", { attrs: { value: "1" }, on: eventHandlers }, "1"),
140+
h("option", { attrs: { value: "2" }, on: eventHandlers }, "2"),
141+
h("option", { attrs: { value: "3" }, on: eventHandlers }, "3")
142+
]
143+
);
144+
}
145+
});
146+
147+
userEvent.selectOptions(getByTestId("element"), ["1", "3"]);
148+
149+
expect(events[2]).toBe(undefined);
150+
expect(events[1]).toEqual([
151+
"mouseover",
152+
"mousemove",
153+
"mousedown",
154+
"focus",
155+
"mouseup",
156+
"click"
157+
]);
158+
159+
expect(events[3]).toEqual([
160+
"mouseover",
161+
"mousemove",
162+
"mousedown",
163+
"focus",
164+
"mouseup",
165+
"click"
166+
]);
167+
});
168+
169+
it("sets the selected prop on the selected OPTION", () => {
170+
const { getByTestId } = render({
171+
template: `
172+
<form>
173+
<select data-testid="element" multiple>
174+
<option value="1" data-testid="val1">1</option>
175+
<option value="2" data-testid="val2">2</option>
176+
<option value="3" data-testid="val3">3</option>
177+
</select>
178+
</form>`
179+
});
180+
181+
userEvent.selectOptions(getByTestId("element"), ["1", "3"]);
182+
183+
expect(getByTestId("val1").selected).toBe(true);
184+
expect(getByTestId("val2").selected).toBe(false);
185+
expect(getByTestId("val3").selected).toBe(true);
186+
});
187+
188+
it("sets the selected prop on the selected OPTION using htmlFor", () => {
189+
const { getByTestId } = render({
190+
template: `
191+
<form>
192+
<label htmlFor="select">Example Select</label>
193+
<select id="select" data-testid="element">
194+
<option data-testid="val1" value="1">1</option>
195+
<option data-testid="val2" value="2">2</option>
196+
<option data-testid="val3" value="3">3</option>
197+
</select>
198+
</form>`
199+
});
200+
201+
userEvent.selectOptions(getByTestId("element"), "2");
202+
203+
expect(getByTestId("val1").selected).toBe(false);
204+
expect(getByTestId("val2").selected).toBe(true);
205+
expect(getByTestId("val3").selected).toBe(false);
206+
});
207+
208+
it("sets the selected prop on the selected OPTION using nested SELECT", () => {
209+
const { getByTestId } = render({
210+
template: `
211+
<form>
212+
<label>
213+
Example Select
214+
<select data-testid="element">
215+
<option data-testid="val1" value="1">1</option>
216+
<option data-testid="val2" value="2">2</option>
217+
<option data-testid="val3" value="3">3</option>
218+
</select>
219+
</label>
220+
</form>`
221+
});
222+
223+
userEvent.selectOptions(getByTestId("element"), "2");
224+
225+
expect(getByTestId("val1").selected).toBe(false);
226+
expect(getByTestId("val2").selected).toBe(true);
227+
expect(getByTestId("val3").selected).toBe(false);
228+
});
229+
});

0 commit comments

Comments
 (0)