Skip to content

Commit e03c642

Browse files
author
Jeff
committed
add Jest suite from vue-cli-3 branch
1 parent 4ed24ab commit e03c642

13 files changed

+1330
-0
lines changed

‎tests/helpers.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { shallowMount } from "@vue/test-utils";
2+
import VueSelect from "../src/components/Select";
3+
4+
/**
5+
* Trigger a submit event on the search
6+
* input with a provided search text.
7+
*
8+
* @param Wrapper {Wrapper<Vue>}
9+
* @param searchText
10+
*/
11+
export const searchSubmit = (Wrapper, searchText = false) => {
12+
if (searchText) {
13+
Wrapper.vm.search = searchText;
14+
}
15+
Wrapper.find({ ref: "search" }).trigger("keydown", {
16+
keyCode: 13
17+
});
18+
};
19+
20+
/**
21+
* Create a new VueSelect instance with
22+
* a provided set of props.
23+
* @param propsData
24+
* @returns {Wrapper<Vue>}
25+
*/
26+
export const selectWithProps = (propsData = {}) => {
27+
return shallowMount(VueSelect, { propsData });
28+
};

‎tests/unit/.eslintrc.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
module.exports = {
2+
env: {
3+
jest: true
4+
},
5+
rules: {
6+
'import/no-extraneous-dependencies': 'off'
7+
}
8+
}

‎tests/unit/Ajax.spec.js

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import { selectWithProps } from "../helpers";
2+
3+
describe("Asynchronous Loading", () => {
4+
it("can toggle the loading class", () => {
5+
const Select = selectWithProps();
6+
7+
Select.vm.toggleLoading();
8+
expect(Select.vm.mutableLoading).toEqual(true);
9+
10+
Select.vm.toggleLoading(true);
11+
expect(Select.vm.mutableLoading).toEqual(true);
12+
});
13+
14+
it("should trigger the onSearch callback when the search text changes", () => {
15+
const propsData = { onSearch: () => {} };
16+
const spy = jest.spyOn(propsData, "onSearch");
17+
const Select = selectWithProps(propsData);
18+
19+
Select.vm.search = "foo";
20+
21+
expect(spy).toHaveBeenCalled();
22+
});
23+
24+
it("should not trigger the onSearch callback if the search text is empty", () => {
25+
let calledWith = [];
26+
const propsData = {
27+
onSearch: search => {
28+
calledWith.push(search);
29+
}
30+
};
31+
const spy = jest.spyOn(propsData, "onSearch");
32+
const Select = selectWithProps(propsData);
33+
34+
Select.vm.search = "foo";
35+
Select.vm.search = "";
36+
37+
expect(spy).toHaveBeenCalledTimes(1);
38+
expect(calledWith).toEqual(["foo"]);
39+
});
40+
41+
it("should trigger the search event when the search text changes", () => {
42+
const Select = selectWithProps();
43+
44+
Select.vm.search = "foo";
45+
46+
const events = Select.emitted("search");
47+
48+
expect(events).toContainEqual(["foo", Select.vm.toggleLoading]);
49+
expect(events.length).toEqual(1);
50+
});
51+
52+
it("should not trigger the search event if the search text is empty", () => {
53+
const Select = selectWithProps();
54+
55+
Select.vm.search = "foo";
56+
Select.vm.search = "";
57+
58+
const events = Select.emitted("search");
59+
60+
expect(events).toContainEqual(["foo", Select.vm.toggleLoading]);
61+
expect(events.length).toEqual(1);
62+
});
63+
64+
it("can set loading to false from the onSearch callback", () => {
65+
const Select = selectWithProps({
66+
onSearch: (search, loading) => loading(false)
67+
});
68+
69+
Select.vm.search = "foo";
70+
71+
expect(Select.vm.mutableLoading).toEqual(false);
72+
});
73+
74+
it("can set loading to true from the onSearch callback", () => {
75+
const Select = selectWithProps({
76+
onSearch: (search, loading) => loading(true)
77+
});
78+
79+
Select.vm.search = "foo";
80+
81+
expect(Select.vm.mutableLoading).toEqual(true);
82+
});
83+
84+
it("will sync mutable loading with the loading prop", () => {
85+
const Select = selectWithProps({ loading: false });
86+
Select.setProps({ loading: true });
87+
expect(Select.vm.mutableLoading).toEqual(true);
88+
});
89+
});

‎tests/unit/Deselecting.spec.js

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { selectWithProps } from "../helpers";
2+
3+
describe("Removing values", () => {
4+
it("can remove the given tag when its close icon is clicked", () => {
5+
const Select = selectWithProps({ multiple: true, value: ["foo"] });
6+
7+
Select.find(".close").trigger("click");
8+
expect(Select.vm.mutableValue).toEqual([]);
9+
});
10+
11+
it("should not remove tag when close icon is clicked and component is disabled", () => {
12+
const Select = selectWithProps({
13+
value: ["one"],
14+
options: ["one", "two", "three"],
15+
multiple: true,
16+
disabled: true
17+
});
18+
19+
Select.find(".close").trigger("click");
20+
expect(Select.vm.mutableValue).toEqual(["one"]);
21+
});
22+
23+
it("should remove the last item in the value array on delete keypress when multiple is true", () => {
24+
const Select = selectWithProps({
25+
multiple: true,
26+
value: ["one", "two"],
27+
options: ["one", "two", "three"]
28+
});
29+
30+
Select.vm.maybeDeleteValue();
31+
expect(Select.vm.mutableValue).toEqual(["one"]);
32+
});
33+
34+
it("should set value to null on delete keypress when multiple is false", () => {
35+
const Select = selectWithProps({
36+
value: "one",
37+
options: ["one", "two", "three"]
38+
});
39+
40+
Select.vm.maybeDeleteValue();
41+
expect(Select.vm.mutableValue).toEqual(null);
42+
});
43+
44+
describe("Clear button", () => {
45+
it("should be displayed on single select when value is selected", () => {
46+
const Select = selectWithProps({
47+
options: ["foo", "bar"],
48+
value: "foo"
49+
});
50+
51+
expect(Select.vm.showClearButton).toEqual(true);
52+
});
53+
54+
it("should not be displayed on multiple select", () => {
55+
const Select = selectWithProps({
56+
options: ["foo", "bar"],
57+
value: "foo",
58+
multiple: true
59+
});
60+
61+
expect(Select.vm.showClearButton).toEqual(false);
62+
});
63+
64+
it("should remove selected value when clicked", () => {
65+
const Select = selectWithProps({
66+
options: ["foo", "bar"],
67+
value: "foo"
68+
});
69+
70+
expect(Select.vm.mutableValue).toEqual("foo");
71+
Select.find("button.clear").trigger("click");
72+
expect(Select.vm.mutableValue).toEqual(null);
73+
});
74+
75+
it("should be disabled when component is disabled", () => {
76+
const Select = selectWithProps({
77+
options: ["foo", "bar"],
78+
value: "foo",
79+
disabled: true
80+
});
81+
82+
expect(Select.find("button.clear").attributes().disabled).toEqual(
83+
"disabled"
84+
);
85+
});
86+
});
87+
});

‎tests/unit/Dropdown.spec.js

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
import { selectWithProps } from "../helpers";
2+
3+
describe("Toggling Dropdown", () => {
4+
it("should not open the dropdown when the el is clicked but the component is disabled", () => {
5+
const Select = selectWithProps({ disabled: true });
6+
Select.vm.toggleDropdown({ target: Select.vm.$refs.search });
7+
expect(Select.vm.open).toEqual(false);
8+
});
9+
10+
it("should open the dropdown when the el is clicked", () => {
11+
const Select = selectWithProps({
12+
value: [{ label: "one" }],
13+
options: [{ label: "one" }]
14+
});
15+
16+
Select.vm.toggleDropdown({ target: Select.vm.$refs.search });
17+
expect(Select.vm.open).toEqual(true);
18+
});
19+
20+
it("should open the dropdown when the selected tag is clicked", () => {
21+
const Select = selectWithProps({
22+
value: [{ label: "one" }],
23+
options: [{ label: "one" }]
24+
});
25+
26+
const selectedTag = Select.find(".selected-tag").element;
27+
28+
Select.vm.toggleDropdown({ target: selectedTag });
29+
expect(Select.vm.open).toEqual(true);
30+
});
31+
32+
it("can close the dropdown when the el is clicked", () => {
33+
const Select = selectWithProps();
34+
const spy = jest.spyOn(Select.vm.$refs.search, "blur");
35+
36+
Select.vm.open = true;
37+
Select.vm.toggleDropdown({ target: Select.vm.$el });
38+
39+
expect(spy).toHaveBeenCalled();
40+
});
41+
42+
it("closes the dropdown when an option is selected, multiple is true, and closeOnSelect option is true", () => {
43+
const Select = selectWithProps({
44+
value: [],
45+
options: ["one", "two", "three"],
46+
multiple: true
47+
});
48+
49+
Select.vm.open = true;
50+
Select.vm.select("one");
51+
52+
expect(Select.vm.open).toEqual(false);
53+
});
54+
55+
it("does not close the dropdown when the el is clicked, multiple is true, and closeOnSelect option is false", () => {
56+
const Select = selectWithProps({
57+
value: [],
58+
options: ["one", "two", "three"],
59+
multiple: true,
60+
closeOnSelect: false
61+
});
62+
// const vm = new Vue({
63+
// template:
64+
// '<div><v-select ref="select" :options="options" multiple :closeOnSelect="false" :value="value"></v-select></div>',
65+
// components: { vSelect },
66+
// }).$mount();
67+
68+
Select.vm.open = true;
69+
Select.vm.select("one");
70+
71+
expect(Select.vm.open).toEqual(true);
72+
});
73+
74+
it("should close the dropdown on search blur", () => {
75+
const Select = selectWithProps({
76+
options: [{ label: "one" }]
77+
});
78+
79+
Select.vm.open = true;
80+
Select.find({ ref: "search" }).trigger("blur");
81+
82+
expect(Select.vm.open).toEqual(false);
83+
});
84+
85+
it("will close the dropdown and emit the search:blur event from onSearchBlur", () => {
86+
const Select = selectWithProps();
87+
const spy = jest.spyOn(Select.vm, "$emit");
88+
89+
Select.vm.open = true;
90+
Select.vm.onSearchBlur();
91+
92+
expect(Select.vm.open).toEqual(false);
93+
expect(spy).toHaveBeenCalledWith("search:blur");
94+
});
95+
96+
it("will open the dropdown and emit the search:focus event from onSearchFocus", () => {
97+
const Select = selectWithProps();
98+
const spy = jest.spyOn(Select.vm, "$emit");
99+
100+
Select.vm.onSearchFocus();
101+
102+
expect(Select.vm.open).toEqual(true);
103+
expect(spy).toHaveBeenCalledWith("search:focus");
104+
});
105+
106+
it("will close the dropdown on escape, if search is empty", () => {
107+
const Select = selectWithProps();
108+
const spy = jest.spyOn(Select.vm.$refs.search, "blur");
109+
110+
Select.vm.open = true;
111+
Select.vm.onEscape();
112+
113+
expect(spy).toHaveBeenCalled();
114+
});
115+
116+
it("should remove existing search text on escape keyup", () => {
117+
const Select = selectWithProps({
118+
value: [{ label: "one" }],
119+
options: [{ label: "one" }]
120+
});
121+
122+
Select.vm.search = "foo";
123+
Select.vm.onEscape();
124+
expect(Select.vm.search).toEqual("");
125+
});
126+
127+
it("should have an open class when dropdown is active", () => {
128+
const Select = selectWithProps();
129+
130+
expect(Select.vm.dropdownClasses.open).toEqual(false);
131+
132+
Select.vm.open = true;
133+
expect(Select.vm.dropdownClasses.open).toEqual(true);
134+
});
135+
});

0 commit comments

Comments
 (0)