mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-05-17 02:29:37 +03:00
Code Activity

refactor: apply eslint fixes (#1469)

Browse Source
This commit is contained in:
Jeff Sagal
2021-08-01 12:30:50 -07:00
committed by GitHub
parent a64ffc32d0
commit dd281aa8c6
85 changed files with 3616 additions and 3208 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/helpers.js
+26 -26
View File
@@ -1,6 +1,6 @@
import { shallowMount } from "@vue/test-utils";
import VueSelect from "../src/components/Select.vue";
import Vue from 'vue';
import { shallowMount } from '@vue/test-utils'
import VueSelect from '../src/components/Select.vue'
import Vue from 'vue'
/**
* Trigger a submit event on the search
@@ -11,10 +11,10 @@ import Vue from 'vue';
*/
export const searchSubmit = (Wrapper, searchText = false) => {
if (searchText) {
Wrapper.vm.search = searchText;
Wrapper.vm.search = searchText
}
Wrapper.find({ ref: "search" }).trigger("keydown.enter")
};
Wrapper.find({ ref: 'search' }).trigger('keydown.enter')
}
/**
* Focus the input, enter some search text, hit return.
@@ -23,15 +23,15 @@ export const searchSubmit = (Wrapper, searchText = false) => {
* @return {Promise<void>}
*/
export const selectTag = async (Wrapper, searchText) => {
Wrapper.vm.$refs.search.focus();
await Wrapper.vm.$nextTick();
Wrapper.vm.$refs.search.focus()
await Wrapper.vm.$nextTick()
Wrapper.vm.search = searchText;
await Wrapper.vm.$nextTick();
Wrapper.vm.search = searchText
await Wrapper.vm.$nextTick()
Wrapper.find({ ref: "search" }).trigger("keydown.enter");
await Wrapper.vm.$nextTick();
};
Wrapper.find({ ref: 'search' }).trigger('keydown.enter')
await Wrapper.vm.$nextTick()
}
/**
* Create a new VueSelect instance with
@@ -40,8 +40,8 @@ export const selectTag = async (Wrapper, searchText) => {
* @returns {Wrapper<Vue>}
*/
export const selectWithProps = (propsData = {}) => {
return shallowMount(VueSelect, { propsData });
};
return shallowMount(VueSelect, { propsData })
}
/**
* Returns a Wrapper with a v-select component.
@@ -56,9 +56,8 @@ export const mountDefault = (props = {}, options = {}) => {
...props,
},
...options,
});
};
})
}
/**
* Returns a v-select component directly.
@@ -68,11 +67,12 @@ export const mountDefault = (props = {}, options = {}) => {
*/
export const mountWithoutTestUtils = (props = {}, options = {}) => {
return new Vue({
render: createEl => createEl('vue-select', {
ref: 'select',
props: {options: ['one', 'two', 'three'], ...props},
...options
}),
components: {VueSelect},
}).$mount().$refs.select;
};
components: { VueSelect },
render: (createEl) =>
createEl('vue-select', {
ref: 'select',
props: { options: ['one', 'two', 'three'], ...props },
...options,
}),
}).$mount().$refs.select
}
tests/unit/.eslintrc.js
+4 -4
View File
@@ -1,8 +1,8 @@
module.exports = {
env: {
jest: true
jest: true,
},
rules: {
'import/no-extraneous-dependencies': 'off'
}
}
'import/no-extraneous-dependencies': 'off',
},
}
tests/unit/Accessibility.spec.js
+21 -21
View File
@@ -1,35 +1,35 @@
import { mountDefault } from "../helpers";
import { mountDefault } from '../helpers'
describe("Search Slot Scope", () => {
describe('Search Slot Scope', () => {
/**
* @see https://www.w3.org/WAI/PF/aria/states_and_properties#aria-activedescendant
*/
describe("aria-activedescendant", () => {
it("adds the active descendant attribute only when the dropdown is open and there is a typeAheadPointer value", async () => {
const Select = mountDefault();
describe('aria-activedescendant', () => {
it('adds the active descendant attribute only when the dropdown is open and there is a typeAheadPointer value', async () => {
const Select = mountDefault()
expect(
Select.vm.scope.search.attributes["aria-activedescendant"]
).toEqual(undefined);
Select.vm.scope.search.attributes['aria-activedescendant']
).toEqual(undefined)
Select.vm.open = true;
await Select.vm.$nextTick();
Select.vm.open = true
await Select.vm.$nextTick()
expect(
Select.vm.scope.search.attributes["aria-activedescendant"]
).toEqual(undefined);
});
Select.vm.scope.search.attributes['aria-activedescendant']
).toEqual(undefined)
})
it("adds the active descendant attribute when there's a typeahead value and an open dropdown", async () => {
const Select = mountDefault();
const Select = mountDefault()
Select.vm.open = true;
Select.vm.typeAheadPointer = 1;
await Select.vm.$nextTick();
Select.vm.open = true
Select.vm.typeAheadPointer = 1
await Select.vm.$nextTick()
expect(
Select.vm.scope.search.attributes["aria-activedescendant"]
).toEqual(`vs${Select.vm.uid}__option-1`);
});
});
});
Select.vm.scope.search.attributes['aria-activedescendant']
).toEqual(`vs${Select.vm.uid}__option-1`)
})
})
})
tests/unit/Ajax.spec.js
+42 -42
View File
@@ -1,65 +1,65 @@
import { selectWithProps } from "../helpers";
import { shallowMount } from '@vue/test-utils';
import vSelect from '../../src/components/Select';
import { selectWithProps } from '../helpers'
import { shallowMount } from '@vue/test-utils'
import vSelect from '../../src/components/Select'
describe("Asynchronous Loading", () => {
it("can toggle the loading class", () => {
const Select = selectWithProps();
describe('Asynchronous Loading', () => {
it('can toggle the loading class', () => {
const Select = selectWithProps()
Select.vm.toggleLoading();
expect(Select.vm.mutableLoading).toEqual(true);
Select.vm.toggleLoading()
expect(Select.vm.mutableLoading).toEqual(true)
Select.vm.toggleLoading(true);
expect(Select.vm.mutableLoading).toEqual(true);
});
Select.vm.toggleLoading(true)
expect(Select.vm.mutableLoading).toEqual(true)
})
it("should trigger the search event when the search text changes", async () => {
const Select = selectWithProps();
it('should trigger the search event when the search text changes', async () => {
const Select = selectWithProps()
Select.vm.search = "foo";
await Select.vm.$nextTick();
Select.vm.search = 'foo'
await Select.vm.$nextTick()
const events = Select.emitted("search");
const events = Select.emitted('search')
expect(events).toContainEqual(["foo", Select.vm.toggleLoading]);
expect(events.length).toEqual(1);
});
expect(events).toContainEqual(['foo', Select.vm.toggleLoading])
expect(events.length).toEqual(1)
})
it("should trigger the search event if the search text is empty", async () => {
const Select = selectWithProps();
it('should trigger the search event if the search text is empty', async () => {
const Select = selectWithProps()
Select.vm.search = "foo";
await Select.vm.$nextTick();
Select.vm.search = "";
await Select.vm.$nextTick();
Select.vm.search = 'foo'
await Select.vm.$nextTick()
Select.vm.search = ''
await Select.vm.$nextTick()
const events = Select.emitted("search");
const events = Select.emitted('search')
expect(events).toContainEqual(["", Select.vm.toggleLoading]);
expect(events.length).toEqual(2);
});
expect(events).toContainEqual(['', Select.vm.toggleLoading])
expect(events.length).toEqual(2)
})
it("can set loading to false from the @search event callback", async () => {
it('can set loading to false from the @search event callback', async () => {
const Select = shallowMount(vSelect, {
listeners: {
search: (search, loading) => {
loading(false)
},
},
});
})
Select.vm.mutableLoading = true;
Select.vm.search = 'foo';
await Select.vm.$nextTick();
Select.vm.mutableLoading = true
Select.vm.search = 'foo'
await Select.vm.$nextTick()
expect(Select.vm.mutableLoading).toEqual(false);
});
expect(Select.vm.mutableLoading).toEqual(false)
})
it('will sync mutable loading with the loading prop', async () => {
const Select = selectWithProps({ loading: false });
Select.setProps({ loading: true });
await Select.vm.$nextTick();
const Select = selectWithProps({ loading: false })
Select.setProps({ loading: true })
await Select.vm.$nextTick()
expect(Select.vm.mutableLoading).toEqual(true);
});
});
expect(Select.vm.mutableLoading).toEqual(true)
})
})
tests/unit/Autoscroll.spec.js
+36 -36
View File
@@ -1,61 +1,61 @@
import { mountDefault } from "../helpers";
import { mountDefault } from '../helpers'
describe("Automatic Scrolling", () => {
it("should check if the scroll position needs to be adjusted on up arrow keyUp", async () => {
describe('Automatic Scrolling', () => {
it('should check if the scroll position needs to be adjusted on up arrow keyUp', async () => {
// Given
const Select = mountDefault();
const spy = jest.spyOn(Select.vm, "maybeAdjustScroll");
Select.vm.typeAheadPointer = 1;
const Select = mountDefault()
const spy = jest.spyOn(Select.vm, 'maybeAdjustScroll')
Select.vm.typeAheadPointer = 1
// When
Select.find({ ref: "search" }).trigger("keydown.up");
await Select.vm.$nextTick();
Select.find({ ref: 'search' }).trigger('keydown.up')
await Select.vm.$nextTick()
// Then
expect(spy).toHaveBeenCalled();
});
expect(spy).toHaveBeenCalled()
})
it("should check if the scroll position needs to be adjusted on down arrow keyUp", async () => {
it('should check if the scroll position needs to be adjusted on down arrow keyUp', async () => {
// Given
const Select = mountDefault();
const spy = jest.spyOn(Select.vm, "maybeAdjustScroll");
Select.vm.typeAheadPointer = 1;
const Select = mountDefault()
const spy = jest.spyOn(Select.vm, 'maybeAdjustScroll')
Select.vm.typeAheadPointer = 1
// When
Select.find({ ref: "search" }).trigger("keydown.down");
await Select.vm.$nextTick();
Select.find({ ref: 'search' }).trigger('keydown.down')
await Select.vm.$nextTick()
// Then
expect(spy).toHaveBeenCalled();
});
expect(spy).toHaveBeenCalled()
})
it("should check if the scroll position needs to be adjusted when filtered options changes", async () => {
it('should check if the scroll position needs to be adjusted when filtered options changes', async () => {
// Given
const Select = mountDefault();
const spy = jest.spyOn(Select.vm, "maybeAdjustScroll");
Select.vm.typeAheadPointer = 1;
const Select = mountDefault()
const spy = jest.spyOn(Select.vm, 'maybeAdjustScroll')
Select.vm.typeAheadPointer = 1
// When
Select.vm.search = "two";
await Select.vm.$nextTick();
Select.vm.search = 'two'
await Select.vm.$nextTick()
// Then
expect(spy).toHaveBeenCalled();
});
expect(spy).toHaveBeenCalled()
})
it("should not adjust scroll position when autoscroll is false", async () => {
it('should not adjust scroll position when autoscroll is false', async () => {
// Given
const Select = mountDefault({
autoscroll: false
});
const spy = jest.spyOn(Select.vm, "maybeAdjustScroll");
Select.vm.typeAheadPointer = 1;
autoscroll: false,
})
const spy = jest.spyOn(Select.vm, 'maybeAdjustScroll')
Select.vm.typeAheadPointer = 1
// When
Select.vm.search = "two";
await Select.vm.$nextTick();
Select.vm.search = 'two'
await Select.vm.$nextTick()
// Then
expect(spy).toHaveBeenCalledTimes(0);
});
});
expect(spy).toHaveBeenCalledTimes(0)
})
})
tests/unit/Components.spec.js
+15 -17
View File
@@ -1,30 +1,28 @@
import Vue from 'vue';
import { selectWithProps } from '../helpers';
import Vue from 'vue'
import { selectWithProps } from '../helpers'
describe('Components API', () => {
it('swap the Deselect component', () => {
const Deselect = Vue.component('Deselect', {
render (createElement) {
return createElement('button', 'remove');
render(createElement) {
return createElement('button', 'remove')
},
});
})
const Select = selectWithProps({components: {Deselect}});
const Select = selectWithProps({ components: { Deselect } })
expect(Select.contains(Deselect)).toBeTruthy();
});
expect(Select.contains(Deselect)).toBeTruthy()
})
it('swap the OpenIndicator component', () => {
const OpenIndicator = Vue.component('OpenIndicator', {
render (createElement) {
return createElement('i', '^');
render(createElement) {
return createElement('i', '^')
},
});
})
const Select = selectWithProps({components: {OpenIndicator}});
const Select = selectWithProps({ components: { OpenIndicator } })
expect(Select.contains(OpenIndicator)).toBeTruthy();
});
});
expect(Select.contains(OpenIndicator)).toBeTruthy()
})
})
tests/unit/CreateOption.spec.js
+17 -17
View File
@@ -1,30 +1,30 @@
import { searchSubmit, selectTag, selectWithProps } from "../helpers";
import { searchSubmit, selectTag, selectWithProps } from '../helpers'
describe("CreateOption When Tagging Is Enabled", () => {
it("can select the current search text as a string", async () => {
describe('CreateOption When Tagging Is Enabled', () => {
it('can select the current search text as a string', async () => {
const Select = selectWithProps({
taggable: true,
multiple: true,
options: ["one", "two"],
createOption: option => "four"
});
options: ['one', 'two'],
createOption: (option) => 'four',
})
await selectTag(Select, "three");
expect(Select.vm.selectedValue).toEqual(["four"]);
});
await selectTag(Select, 'three')
expect(Select.vm.selectedValue).toEqual(['four'])
})
it("can select the current search text as an object", async () => {
it('can select the current search text as an object', async () => {
const Select = selectWithProps({
taggable: true,
multiple: false,
value: null,
options: [],
label: "name",
createOption: title => ({ name: title })
});
label: 'name',
createOption: (title) => ({ name: title }),
})
await selectTag(Select, "two");
await selectTag(Select, 'two')
expect(Select.emitted("input")[0]).toEqual([{ name: "two" }]);
});
});
expect(Select.emitted('input')[0]).toEqual([{ name: 'two' }])
})
})
tests/unit/Deselecting.spec.js
+74 -74
View File
@@ -1,107 +1,107 @@
import { mountDefault, selectWithProps } from '../helpers';
import { mountDefault, selectWithProps } from '../helpers'
describe("Removing values", () => {
it("can remove the given tag when its close icon is clicked", async () => {
const Select = selectWithProps({ multiple: true });
Select.vm.$data._value = 'one';
await Select.vm.$nextTick();
describe('Removing values', () => {
it('can remove the given tag when its close icon is clicked', async () => {
const Select = selectWithProps({ multiple: true })
Select.vm.$data._value = 'one'
await Select.vm.$nextTick()
Select.find(".vs__deselect").trigger("click");
expect(Select.emitted().input).toEqual([[[]]]);
expect(Select.vm.selectedValue).toEqual([]);
});
Select.find('.vs__deselect').trigger('click')
expect(Select.emitted().input).toEqual([[[]]])
expect(Select.vm.selectedValue).toEqual([])
})
it("should not remove tag when close icon is clicked and component is disabled", () => {
it('should not remove tag when close icon is clicked and component is disabled', () => {
const Select = selectWithProps({
value: ["one"],
options: ["one", "two", "three"],
value: ['one'],
options: ['one', 'two', 'three'],
multiple: true,
disabled: true
});
disabled: true,
})
Select.find(".vs__deselect").trigger("click");
expect(Select.vm.selectedValue).toEqual(["one"]);
});
Select.find('.vs__deselect').trigger('click')
expect(Select.vm.selectedValue).toEqual(['one'])
})
it("should remove the last item in the value array on delete keypress when multiple is true", () => {
it('should remove the last item in the value array on delete keypress when multiple is true', () => {
const Select = selectWithProps({
multiple: true,
options: ["one", "two", "three"]
});
options: ['one', 'two', 'three'],
})
Select.vm.$data._value = ["one", "two"];
Select.vm.$data._value = ['one', 'two']
Select.find('.vs__search').trigger('keydown.backspace')
expect(Select.emitted().input).toEqual([[['one']]]);
expect(Select.vm.selectedValue).toEqual(["one"]);
});
expect(Select.emitted().input).toEqual([[['one']]])
expect(Select.vm.selectedValue).toEqual(['one'])
})
it("should set value to null on delete keypress when multiple is false", () => {
it('should set value to null on delete keypress when multiple is false', () => {
const Select = selectWithProps({
options: ["one", "two", "three"]
});
options: ['one', 'two', 'three'],
})
Select.vm.$data._value = 'one';
Select.vm.$data._value = 'one'
Select.vm.maybeDeleteValue();
expect(Select.vm.selectedValue).toEqual([]);
});
Select.vm.maybeDeleteValue()
expect(Select.vm.selectedValue).toEqual([])
})
it('will not emit input event if value has not changed with backspace', () => {
const Select = mountDefault();
Select.vm.$data._value = 'one';
Select.find({ ref: 'search' }).trigger('keydown.backspace');
expect(Select.emitted().input.length).toBe(1);
const Select = mountDefault()
Select.vm.$data._value = 'one'
Select.find({ ref: 'search' }).trigger('keydown.backspace')
expect(Select.emitted().input.length).toBe(1)
Select.find({ ref: 'search' }).trigger('keydown.backspace');
Select.find({ ref: 'search' }).trigger('keydown.backspace');
expect(Select.emitted().input.length).toBe(1);
});
Select.find({ ref: 'search' }).trigger('keydown.backspace')
Select.find({ ref: 'search' }).trigger('keydown.backspace')
expect(Select.emitted().input.length).toBe(1)
})
describe("Clear button", () => {
it("should be displayed on single select when value is selected", () => {
describe('Clear button', () => {
it('should be displayed on single select when value is selected', () => {
const Select = selectWithProps({
options: ["foo", "bar"],
value: "foo"
});
options: ['foo', 'bar'],
value: 'foo',
})
expect(Select.vm.showClearButton).toEqual(true);
});
expect(Select.vm.showClearButton).toEqual(true)
})
it("should not be displayed on multiple select", () => {
it('should not be displayed on multiple select', () => {
const Select = selectWithProps({
options: ["foo", "bar"],
value: "foo",
multiple: true
});
options: ['foo', 'bar'],
value: 'foo',
multiple: true,
})
expect(Select.vm.showClearButton).toEqual(false);
});
expect(Select.vm.showClearButton).toEqual(false)
})
it("should remove selected value when clicked", () => {
it('should remove selected value when clicked', () => {
const Select = selectWithProps({
options: ["foo", "bar"],
});
Select.vm.$data._value = 'foo';
options: ['foo', 'bar'],
})
Select.vm.$data._value = 'foo'
expect(Select.vm.selectedValue).toEqual(["foo"]);
Select.find("button.vs__clear").trigger("click");
expect(Select.vm.selectedValue).toEqual(['foo'])
Select.find('button.vs__clear').trigger('click')
expect(Select.emitted().input).toEqual([[null]]);
expect(Select.vm.selectedValue).toEqual([]);
});
expect(Select.emitted().input).toEqual([[null]])
expect(Select.vm.selectedValue).toEqual([])
})
it("should be disabled when component is disabled", () => {
it('should be disabled when component is disabled', () => {
const Select = selectWithProps({
options: ["foo", "bar"],
value: "foo",
disabled: true
});
options: ['foo', 'bar'],
value: 'foo',
disabled: true,
})
expect(Select.find("button.vs__clear").attributes().disabled).toEqual(
"disabled"
);
});
});
});
expect(Select.find('button.vs__clear').attributes().disabled).toEqual(
'disabled'
)
})
})
})
tests/unit/Dropdown.spec.js
+147 -147
View File
@@ -1,201 +1,201 @@
import { selectWithProps } from "../helpers";
import OpenIndicator from "../../src/components/OpenIndicator";
import { selectWithProps } from '../helpers'
import OpenIndicator from '../../src/components/OpenIndicator'
const preventDefault = jest.fn()
function clickEvent (currentTarget) {
function clickEvent(currentTarget) {
return { currentTarget, preventDefault }
}
describe("Toggling Dropdown", () => {
it("should not open the dropdown when the el is clicked but the component is disabled", () => {
const Select = selectWithProps({ disabled: true });
Select.vm.toggleDropdown(clickEvent(Select.vm.$refs.search));
expect(Select.vm.open).toEqual(false);
});
it("should open the dropdown when the el is clicked", () => {
const Select = selectWithProps({
value: [{ label: "one" }],
options: [{ label: "one" }]
});
Select.vm.toggleDropdown(clickEvent(Select.vm.$refs.search));
expect(Select.vm.open).toEqual(true);
});
it("should not close the dropdown when the el is clicked and enableMouseInputSearch is set to true", () => {
const Select = selectWithProps({
value: [{ label: "one" }],
options: [{ label: "one" }],
enableMouseSearchInput: true
});
Select.vm.toggleDropdown(clickEvent(Select.vm.$refs.search));
expect(Select.vm.open).toEqual(true);
Select.vm.toggleDropdown(clickEvent(Select.vm.$el));
describe('Toggling Dropdown', () => {
it('should not open the dropdown when the el is clicked but the component is disabled', () => {
const Select = selectWithProps({ disabled: true })
Select.vm.toggleDropdown(clickEvent(Select.vm.$refs.search))
expect(Select.vm.open).toEqual(false)
});
})
it("should open the dropdown when the selected tag is clicked", () => {
it('should open the dropdown when the el is clicked', () => {
const Select = selectWithProps({
value: [{ label: "one" }],
options: [{ label: "one" }]
});
value: [{ label: 'one' }],
options: [{ label: 'one' }],
})
const selectedTag = Select.find(".vs__selected").element;
Select.vm.toggleDropdown(clickEvent(Select.vm.$refs.search))
expect(Select.vm.open).toEqual(true)
})
Select.vm.toggleDropdown(clickEvent(selectedTag));
expect(Select.vm.open).toEqual(true);
});
it('should not close the dropdown when the el is clicked and enableMouseInputSearch is set to true', () => {
const Select = selectWithProps({
value: [{ label: 'one' }],
options: [{ label: 'one' }],
enableMouseSearchInput: true,
})
it("can close the dropdown when the el is clicked", () => {
const Select = selectWithProps();
const spy = jest.spyOn(Select.vm.$refs.search, "blur");
Select.vm.toggleDropdown(clickEvent(Select.vm.$refs.search))
expect(Select.vm.open).toEqual(true)
Select.vm.toggleDropdown(clickEvent(Select.vm.$el))
expect(Select.vm.open).toEqual(false)
})
Select.vm.open = true;
Select.vm.toggleDropdown(clickEvent(Select.vm.$el));
it('should open the dropdown when the selected tag is clicked', () => {
const Select = selectWithProps({
value: [{ label: 'one' }],
options: [{ label: 'one' }],
})
expect(spy).toHaveBeenCalled();
});
const selectedTag = Select.find('.vs__selected').element
it("closes the dropdown when an option is selected, multiple is true, and closeOnSelect option is true", () => {
Select.vm.toggleDropdown(clickEvent(selectedTag))
expect(Select.vm.open).toEqual(true)
})
it('can close the dropdown when the el is clicked', () => {
const Select = selectWithProps()
const spy = jest.spyOn(Select.vm.$refs.search, 'blur')
Select.vm.open = true
Select.vm.toggleDropdown(clickEvent(Select.vm.$el))
expect(spy).toHaveBeenCalled()
})
it('closes the dropdown when an option is selected, multiple is true, and closeOnSelect option is true', () => {
const Select = selectWithProps({
value: [],
options: ["one", "two", "three"],
multiple: true
});
Select.vm.open = true;
Select.vm.select("one");
expect(Select.vm.open).toEqual(false);
});
it("does not close the dropdown when the el is clicked, multiple is true, and closeOnSelect option is false", () => {
const Select = selectWithProps({
value: [],
options: ["one", "two", "three"],
options: ['one', 'two', 'three'],
multiple: true,
closeOnSelect: false
});
})
Select.vm.open = true;
Select.vm.select("one");
Select.vm.open = true
Select.vm.select('one')
expect(Select.vm.open).toEqual(true);
});
expect(Select.vm.open).toEqual(false)
})
it("should close the dropdown on search blur", () => {
it('does not close the dropdown when the el is clicked, multiple is true, and closeOnSelect option is false', () => {
const Select = selectWithProps({
options: [{ label: "one" }]
});
value: [],
options: ['one', 'two', 'three'],
multiple: true,
closeOnSelect: false,
})
Select.vm.open = true;
Select.find({ ref: "search" }).trigger("blur");
Select.vm.open = true
Select.vm.select('one')
expect(Select.vm.open).toEqual(false);
});
expect(Select.vm.open).toEqual(true)
})
it("will close the dropdown and emit the search:blur event from onSearchBlur", () => {
const Select = selectWithProps();
const spy = jest.spyOn(Select.vm, "$emit");
Select.vm.open = true;
Select.vm.onSearchBlur();
expect(Select.vm.open).toEqual(false);
expect(spy).toHaveBeenCalledWith("search:blur");
});
it("will open the dropdown and emit the search:focus event from onSearchFocus", () => {
const Select = selectWithProps();
const spy = jest.spyOn(Select.vm, "$emit");
Select.vm.onSearchFocus();
expect(Select.vm.open).toEqual(true);
expect(spy).toHaveBeenCalledWith("search:focus");
});
it("will close the dropdown on escape, if search is empty", () => {
const Select = selectWithProps();
const spy = jest.spyOn(Select.vm.$refs.search, "blur");
Select.vm.open = true;
Select.vm.onEscape();
expect(spy).toHaveBeenCalled();
});
it("should remove existing search text on escape keydown", () => {
it('should close the dropdown on search blur', () => {
const Select = selectWithProps({
value: [{ label: "one" }],
options: [{ label: "one" }]
});
options: [{ label: 'one' }],
})
Select.vm.search = "foo";
Select.vm.open = true
Select.find({ ref: 'search' }).trigger('blur')
expect(Select.vm.open).toEqual(false)
})
it('will close the dropdown and emit the search:blur event from onSearchBlur', () => {
const Select = selectWithProps()
const spy = jest.spyOn(Select.vm, '$emit')
Select.vm.open = true
Select.vm.onSearchBlur()
expect(Select.vm.open).toEqual(false)
expect(spy).toHaveBeenCalledWith('search:blur')
})
it('will open the dropdown and emit the search:focus event from onSearchFocus', () => {
const Select = selectWithProps()
const spy = jest.spyOn(Select.vm, '$emit')
Select.vm.onSearchFocus()
expect(Select.vm.open).toEqual(true)
expect(spy).toHaveBeenCalledWith('search:focus')
})
it('will close the dropdown on escape, if search is empty', () => {
const Select = selectWithProps()
const spy = jest.spyOn(Select.vm.$refs.search, 'blur')
Select.vm.open = true
Select.vm.onEscape()
expect(spy).toHaveBeenCalled()
})
it('should remove existing search text on escape keydown', () => {
const Select = selectWithProps({
value: [{ label: 'one' }],
options: [{ label: 'one' }],
})
Select.vm.search = 'foo'
Select.find('.vs__search').trigger('keydown.esc')
expect(Select.vm.search).toEqual("");
});
expect(Select.vm.search).toEqual('')
})
it("should have an open class when dropdown is active", () => {
const Select = selectWithProps();
it('should have an open class when dropdown is active', () => {
const Select = selectWithProps()
expect(Select.vm.stateClasses['vs--open']).toEqual(false);
expect(Select.vm.stateClasses['vs--open']).toEqual(false)
Select.vm.open = true;
expect(Select.vm.stateClasses['vs--open']).toEqual(true);
});
Select.vm.open = true
expect(Select.vm.stateClasses['vs--open']).toEqual(true)
})
it("should not display the dropdown if noDrop is true", async () => {
it('should not display the dropdown if noDrop is true', async () => {
const Select = selectWithProps({
noDrop: true,
});
})
Select.vm.toggleDropdown(clickEvent(Select.vm.$refs.search));
Select.vm.toggleDropdown(clickEvent(Select.vm.$refs.search))
expect(Select.vm.open).toEqual(true);
await Select.vm.$nextTick();
expect(Select.vm.open).toEqual(true)
await Select.vm.$nextTick()
expect(Select.contains('.vs__dropdown-menu')).toBeFalsy();
expect(Select.contains('.vs__dropdown-option')).toBeFalsy();
expect(Select.contains('.vs__no-options')).toBeFalsy();
expect(Select.vm.stateClasses['vs--open']).toBeFalsy();
});
expect(Select.contains('.vs__dropdown-menu')).toBeFalsy()
expect(Select.contains('.vs__dropdown-option')).toBeFalsy()
expect(Select.contains('.vs__no-options')).toBeFalsy()
expect(Select.vm.stateClasses['vs--open']).toBeFalsy()
})
it("should hide the open indicator if noDrop is true", () => {
it('should hide the open indicator if noDrop is true', () => {
const Select = selectWithProps({
noDrop: true,
});
expect(Select.contains(OpenIndicator)).toBeFalsy();
});
})
expect(Select.contains(OpenIndicator)).toBeFalsy()
})
it("should not add the searchable state class when noDrop is true", () => {
it('should not add the searchable state class when noDrop is true', () => {
const Select = selectWithProps({
noDrop: true,
});
expect(Select.classes('vs--searchable')).toBeFalsy();
});
})
expect(Select.classes('vs--searchable')).toBeFalsy()
})
it("should not add the searching state class when noDrop is true", () => {
it('should not add the searching state class when noDrop is true', () => {
const Select = selectWithProps({
noDrop: true,
});
})
Select.vm.search = 'Canada';
Select.vm.search = 'Canada'
expect(Select.classes('vs--searching')).toBeFalsy();
});
expect(Select.classes('vs--searching')).toBeFalsy()
})
it("can be opened with dropdownShouldOpen", () => {
it('can be opened with dropdownShouldOpen', () => {
const Select = selectWithProps({
noDrop: true,
dropdownShouldOpen: () => true,
options: ['one']
});
options: ['one'],
})
expect(Select.classes('vs--open')).toBeTruthy();
expect(Select.find('.vs__dropdown-menu li')).toBeTruthy();
expect(Select.classes('vs--open')).toBeTruthy()
expect(Select.find('.vs__dropdown-menu li')).toBeTruthy()
})
});
})
tests/unit/Filtering.spec.js
+60 -60
View File
@@ -1,86 +1,86 @@
import { shallowMount } from "@vue/test-utils";
import VueSelect from "../../src/components/Select";
import { shallowMount } from '@vue/test-utils'
import VueSelect from '../../src/components/Select'
describe("Filtering Options", () => {
describe('Filtering Options', () => {
it("should update the search value when the input element receives the 'input' event", () => {
const Select = shallowMount(VueSelect, {
propsData: { options: ["foo", "bar", "baz"] }
});
const input = Select.find('.vs__search');
propsData: { options: ['foo', 'bar', 'baz'] },
})
const input = Select.find('.vs__search')
input.element.value = 'a'
input.trigger('input')
expect(Select.vm.search).toEqual('a');
});
expect(Select.vm.search).toEqual('a')
})
it("should filter an array of strings", () => {
it('should filter an array of strings', () => {
const Select = shallowMount(VueSelect, {
propsData: { options: ["foo", "bar", "baz"] }
});
Select.vm.search = "ba";
expect(Select.vm.filteredOptions).toEqual(["bar", "baz"]);
});
propsData: { options: ['foo', 'bar', 'baz'] },
})
Select.vm.search = 'ba'
expect(Select.vm.filteredOptions).toEqual(['bar', 'baz'])
})
it("should not filter the array of strings if filterable is false", () => {
it('should not filter the array of strings if filterable is false', () => {
const Select = shallowMount(VueSelect, {
propsData: { options: ["foo", "bar", "baz"], filterable: false }
});
Select.vm.search = "ba";
expect(Select.vm.filteredOptions).toEqual(["foo", "bar", "baz"]);
});
propsData: { options: ['foo', 'bar', 'baz'], filterable: false },
})
Select.vm.search = 'ba'
expect(Select.vm.filteredOptions).toEqual(['foo', 'bar', 'baz'])
})
it("should filter without case-sensitivity", () => {
it('should filter without case-sensitivity', () => {
const Select = shallowMount(VueSelect, {
propsData: { options: ["Foo", "Bar", "Baz"] }
});
Select.vm.search = "ba";
expect(Select.vm.filteredOptions).toEqual(["Bar", "Baz"]);
});
propsData: { options: ['Foo', 'Bar', 'Baz'] },
})
Select.vm.search = 'ba'
expect(Select.vm.filteredOptions).toEqual(['Bar', 'Baz'])
})
it("can filter an array of objects based on the objects label key", () => {
it('can filter an array of objects based on the objects label key', () => {
const Select = shallowMount(VueSelect, {
propsData: {
options: [{ label: "Foo" }, { label: "Bar" }, { label: "Baz" }]
}
});
Select.vm.search = "ba";
options: [{ label: 'Foo' }, { label: 'Bar' }, { label: 'Baz' }],
},
})
Select.vm.search = 'ba'
expect(Select.vm.filteredOptions).toEqual([
{ label: "Bar" },
{ label: "Baz" }
]);
});
{ label: 'Bar' },
{ label: 'Baz' },
])
})
it("can determine if a given option should match the current search text", () => {
it('can determine if a given option should match the current search text', () => {
const Select = shallowMount(VueSelect, {
propsData: {
options: [{ label: "Aoo" }, { label: "Bar" }, { label: "Baz" }],
options: [{ label: 'Aoo' }, { label: 'Bar' }, { label: 'Baz' }],
filterBy: (option, label, search) =>
label.match(new RegExp("^" + search, "i"))
}
});
label.match(new RegExp('^' + search, 'i')),
},
})
Select.vm.search = "a";
expect(Select.vm.filteredOptions).toEqual([{ label: "Aoo" }]);
});
Select.vm.search = 'a'
expect(Select.vm.filteredOptions).toEqual([{ label: 'Aoo' }])
})
it("can use a custom filtering method", () => {
it('can use a custom filtering method', () => {
const Select = shallowMount(VueSelect, {
propsData: {
options: ["foo", "bar", "baz"],
filterBy: (option, label) => label.includes("o")
}
});
Select.vm.search = "a";
expect(Select.vm.filteredOptions).toEqual(["foo"]);
});
options: ['foo', 'bar', 'baz'],
filterBy: (option, label) => label.includes('o'),
},
})
Select.vm.search = 'a'
expect(Select.vm.filteredOptions).toEqual(['foo'])
})
it("can filter arrays of numbers", () => {
it('can filter arrays of numbers', () => {
const Select = shallowMount(VueSelect, {
propsData: {
options: [1, 5, 10]
}
});
Select.vm.search = "1";
expect(Select.vm.filteredOptions).toEqual([1, 10]);
});
});
options: [1, 5, 10],
},
})
Select.vm.search = '1'
expect(Select.vm.filteredOptions).toEqual([1, 10])
})
})
tests/unit/Keydown.spec.js
+39 -43
View File
@@ -1,74 +1,70 @@
import { mountDefault } from '../helpers';
import { mountDefault } from '../helpers'
describe('Custom Keydown Handlers', () => {
it('can use the map-keydown prop to trigger custom behaviour', () => {
const onKeyDown = jest.fn();
const onKeyDown = jest.fn()
const Select = mountDefault({
mapKeydown: (defaults, vm) => ({ ...defaults, 32: onKeyDown }),
});
})
Select.find({ ref: 'search' }).trigger('keydown.space');
Select.find({ ref: 'search' }).trigger('keydown.space')
expect(onKeyDown.mock.calls.length).toBe(1);
});
expect(onKeyDown.mock.calls.length).toBe(1)
})
it('selectOnKeyCodes should trigger a selection for custom keycodes', () => {
const Select = mountDefault({
selectOnKeyCodes: [32],
});
})
const spy = jest.spyOn(Select.vm, 'typeAheadSelect');
const spy = jest.spyOn(Select.vm, 'typeAheadSelect')
Select.find({ ref: 'search' }).trigger('keydown.space');
Select.find({ ref: 'search' }).trigger('keydown.space')
expect(spy).toHaveBeenCalledTimes(1);
});
expect(spy).toHaveBeenCalledTimes(1)
})
it('even works when combining selectOnKeyCodes with map-keydown', () => {
const onKeyDown = jest.fn();
const onKeyDown = jest.fn()
const Select = mountDefault({
mapKeydown: (defaults, vm) => ({ ...defaults, 32: onKeyDown }),
selectOnKeyCodes: [9],
});
})
const spy = jest.spyOn(Select.vm, 'typeAheadSelect');
const spy = jest.spyOn(Select.vm, 'typeAheadSelect')
Select.find({ ref: 'search' }).trigger('keydown.space');
expect(onKeyDown.mock.calls.length).toBe(1);
Select.find({ ref: 'search' }).trigger('keydown.space')
expect(onKeyDown.mock.calls.length).toBe(1)
Select.find({ ref: 'search' }).trigger('keydown.tab');
expect(spy).toHaveBeenCalledTimes(1);
});
Select.find({ ref: 'search' }).trigger('keydown.tab')
expect(spy).toHaveBeenCalledTimes(1)
})
describe('CompositionEvent support', () => {
it('will not select a value with enter if the user is composing', () => {
const Select = mountDefault();
const spy = jest.spyOn(Select.vm, 'typeAheadSelect');
const Select = mountDefault()
const spy = jest.spyOn(Select.vm, 'typeAheadSelect')
Select.find({ ref: 'search' }).trigger('compositionstart');
Select.find({ ref: 'search' }).trigger('keydown.enter');
expect(spy).toHaveBeenCalledTimes(0);
Select.find({ ref: 'search' }).trigger('compositionstart')
Select.find({ ref: 'search' }).trigger('keydown.enter')
expect(spy).toHaveBeenCalledTimes(0)
Select.find({ ref: 'search' }).trigger('compositionend');
Select.find({ ref: 'search' }).trigger('keydown.enter');
expect(spy).toHaveBeenCalledTimes(1);
});
Select.find({ ref: 'search' }).trigger('compositionend')
Select.find({ ref: 'search' }).trigger('keydown.enter')
expect(spy).toHaveBeenCalledTimes(1)
})
it('will not select a value with tab if the user is composing', () => {
const Select = mountDefault({ selectOnTab: true });
const spy = jest.spyOn(Select.vm, 'typeAheadSelect');
const Select = mountDefault({ selectOnTab: true })
const spy = jest.spyOn(Select.vm, 'typeAheadSelect')
Select.find({ ref: 'search' }).trigger('compositionstart');
Select.find({ ref: 'search' }).trigger('keydown.tab');
expect(spy).toHaveBeenCalledTimes(0);
Select.find({ ref: 'search' }).trigger('compositionstart')
Select.find({ ref: 'search' }).trigger('keydown.tab')
expect(spy).toHaveBeenCalledTimes(0)
Select.find({ ref: 'search' }).trigger('compositionend');
Select.find({ ref: 'search' }).trigger('keydown.tab');
expect(spy).toHaveBeenCalledTimes(1);
});
});
});
Select.find({ ref: 'search' }).trigger('compositionend')
Select.find({ ref: 'search' }).trigger('keydown.tab')
expect(spy).toHaveBeenCalledTimes(1)
})
})
})
tests/unit/Labels.spec.js
+49 -45
View File
@@ -1,57 +1,61 @@
import VueSelect from "../../src/components/Select";
import { shallowMount } from "@vue/test-utils";
import { selectWithProps } from "../helpers";
import VueSelect from '../../src/components/Select'
import { shallowMount } from '@vue/test-utils'
import { selectWithProps } from '../helpers'
describe("Labels", () => {
it("can generate labels using a custom label key", () => {
describe('Labels', () => {
it('can generate labels using a custom label key', () => {
const Select = selectWithProps({
options: [{ name: "Foo" }],
label: "name",
value: { name: "Foo" }
});
expect(Select.find(".vs__selected").text()).toBe("Foo");
});
options: [{ name: 'Foo' }],
label: 'name',
value: { name: 'Foo' },
})
expect(Select.find('.vs__selected').text()).toBe('Foo')
})
it("will console.warn when options contain objects without a valid label key", async () => {
const spy = jest.spyOn(console, "warn").mockImplementation(() => {});
it('will console.warn when options contain objects without a valid label key', async () => {
const spy = jest.spyOn(console, 'warn').mockImplementation(() => {})
const Select = selectWithProps({
options: [{}]
});
options: [{}],
})
Select.vm.open = true;
await Select.vm.$nextTick();
Select.vm.open = true
await Select.vm.$nextTick()
expect(spy).toHaveBeenCalledWith(
'[vue-select warn]: Label key "option.label" does not exist in options object {}.' +
"\nhttps://vue-select.org/api/props.html#getoptionlabel"
);
});
'\nhttps://vue-select.org/api/props.html#getoptionlabel'
)
})
it("should display a placeholder if the value is empty", () => {
it('should display a placeholder if the value is empty', () => {
const Select = shallowMount(VueSelect, {
propsData: {
options: ["one"]
options: ['one'],
},
attrs: {
placeholder: "foo"
}
});
placeholder: 'foo',
},
})
expect(Select.vm.searchPlaceholder).toEqual("foo");
Select.vm.$data._value = "one";
expect(Select.vm.searchPlaceholder).not.toBeDefined();
});
expect(Select.vm.searchPlaceholder).toEqual('foo')
Select.vm.$data._value = 'one'
expect(Select.vm.searchPlaceholder).not.toBeDefined()
})
describe('getOptionLabel', () => {
it('will return undefined if the option lacks the label key', () => {
const getOptionLabel = VueSelect.props.getOptionLabel.default.bind({ label: 'label' });
expect(getOptionLabel({name: 'vue'})).toEqual(undefined);
});
const getOptionLabel = VueSelect.props.getOptionLabel.default.bind({
label: 'label',
})
expect(getOptionLabel({ name: 'vue' })).toEqual(undefined)
})
it('will return a string value for a valid key', () => {
const getOptionLabel = VueSelect.props.getOptionLabel.default.bind({ label: 'label' });
expect(getOptionLabel({label: 'vue'})).toEqual('vue');
});
const getOptionLabel = VueSelect.props.getOptionLabel.default.bind({
label: 'label',
})
expect(getOptionLabel({ label: 'vue' })).toEqual('vue')
})
/**
* this test fails because of a bug where Vue executes the default contents
@@ -60,22 +64,22 @@ describe("Labels", () => {
* @see https://github.com/vuejs/vue/pull/10229
*/
xit('will not call getOptionLabel if both scoped option slots are used and a filter is provided', () => {
const spy = spyOn(VueSelect.props.getOptionLabel, 'default');
const spy = spyOn(VueSelect.props.getOptionLabel, 'default')
const Select = shallowMount(VueSelect, {
propsData: {
options: [{name: 'one'}],
options: [{ name: 'one' }],
filter: () => {},
},
scopedSlots: {
'option': '<span class="option">{{ props.name }}</span>',
option: '<span class="option">{{ props.name }}</span>',
'selected-option': '<span class="selected">{{ props.name }}</span>',
},
});
})
Select.vm.select({name: 'one'});
Select.vm.select({ name: 'one' })
expect(spy).toHaveBeenCalledTimes(0);
expect(Select.find('.selected').exists()).toBeTruthy();
});
});
});
expect(spy).toHaveBeenCalledTimes(0)
expect(Select.find('.selected').exists()).toBeTruthy()
})
})
})
tests/unit/Layout.spec.js
+22 -22
View File
@@ -1,30 +1,30 @@
import { shallowMount } from "@vue/test-utils";
import VueSelect from "../../src/components/Select";
import { shallowMount } from '@vue/test-utils'
import VueSelect from '../../src/components/Select'
describe("Single value options", () => {
it("should reset the search input on focus lost", () => {
const Select = shallowMount(VueSelect);
Select.vm.open = true;
describe('Single value options', () => {
it('should reset the search input on focus lost', () => {
const Select = shallowMount(VueSelect)
Select.vm.open = true
Select.vm.search = "t";
expect(Select.vm.search).toEqual("t");
Select.vm.search = 't'
expect(Select.vm.search).toEqual('t')
Select.vm.onSearchBlur();
expect(Select.vm.search).toEqual("");
});
Select.vm.onSearchBlur()
expect(Select.vm.search).toEqual('')
})
it("should not reset the search input on focus lost when clearSearchOnSelect is false", () => {
it('should not reset the search input on focus lost when clearSearchOnSelect is false', () => {
const Select = shallowMount(VueSelect, {
propsData: { value: "foo", clearSearchOnSelect: false }
});
propsData: { value: 'foo', clearSearchOnSelect: false },
})
expect(Select.vm.clearSearchOnSelect).toEqual(false);
expect(Select.vm.clearSearchOnSelect).toEqual(false)
Select.vm.open = true;
Select.vm.search = "t";
expect(Select.vm.search).toEqual("t");
Select.vm.open = true
Select.vm.search = 't'
expect(Select.vm.search).toEqual('t')
Select.vm.onSearchBlur();
expect(Select.vm.search).toEqual("t");
});
});
Select.vm.onSearchBlur()
expect(Select.vm.search).toEqual('t')
})
})
tests/unit/OptionComparator.spec.js
+19 -18
View File
@@ -1,31 +1,32 @@
import Select from '../../src/components/Select';
import Select from '../../src/components/Select'
describe('Comparing Options', () => {
const comparator = Select.methods.optionComparator.bind({
getOptionKey: Select.props.getOptionKey.default,
});
})
it('can compare numbers', () => {
expect(comparator(1, 2)).toBeFalsy();
expect(comparator(1, 1)).toBeTruthy();
});
expect(comparator(1, 2)).toBeFalsy()
expect(comparator(1, 1)).toBeTruthy()
})
it('can compare strings', () => {
expect(comparator('one', 'one')).toBeTruthy();
expect(comparator('one', 'two')).toBeFalsy();
});
expect(comparator('one', 'one')).toBeTruthy()
expect(comparator('one', 'two')).toBeFalsy()
})
it('can compare objects', () => {
// compare ID keys
expect(comparator({label: 'halo', id: 1}, {label: 'halo', id: 2}))
.toBeFalsy();
expect(
comparator({ label: 'halo', id: 1 }, { label: 'halo', id: 2 })
).toBeFalsy()
// compare objects
expect(comparator({label: 'halo', value: 1}, {label: 'halo', value: 1}))
.toBeTruthy();
expect(
comparator({ label: 'halo', value: 1 }, { label: 'halo', value: 1 })
).toBeTruthy()
// compare objects with different orders
expect(comparator({value: 1, label: 'halo'}, {label: 'halo', value: 1}))
.toBeTruthy();
});
});
expect(
comparator({ value: 1, label: 'halo' }, { label: 'halo', value: 1 })
).toBeTruthy()
})
})
tests/unit/OptionKey.spec.js
+15 -15
View File
@@ -1,25 +1,25 @@
import Select from '../../src/components/Select.vue';
import Select from '../../src/components/Select.vue'
describe('Serializing Option Keys', () => {
const getOptionKey = Select.props.getOptionKey.default;
const getOptionKey = Select.props.getOptionKey.default
it('can serialize strings to a key', () => {
expect(getOptionKey('vue')).toBe('vue');
});
expect(getOptionKey('vue')).toBe('vue')
})
it('can serialize integers to a key', () => {
expect(getOptionKey(1)).toBe(1);
});
expect(getOptionKey(1)).toBe(1)
})
it('can serialize objects to a key', () => {
expect(getOptionKey({label: 'vue'})).toBe('{"label":"vue"}');
});
expect(getOptionKey({ label: 'vue' })).toBe('{"label":"vue"}')
})
it('will use an ID property if the object contains one', () => {
expect(getOptionKey({id: 1})).toBe(1);
expect(getOptionKey({id: 'one'})).toBe('one');
expect(getOptionKey({id: {im: 'a nested object'}}))
.toEqual({im: 'a nested object'});
});
});
expect(getOptionKey({ id: 1 })).toBe(1)
expect(getOptionKey({ id: 'one' })).toBe('one')
expect(getOptionKey({ id: { im: 'a nested object' } })).toEqual({
im: 'a nested object',
})
})
})
tests/unit/ReactiveOptions.spec.js
+113 -91
View File
@@ -1,141 +1,163 @@
import { mount, shallowMount } from '@vue/test-utils';
import VueSelect from "../../src/components/Select";
import { mountDefault } from '../helpers';
import { mount, shallowMount } from '@vue/test-utils'
import VueSelect from '../../src/components/Select'
import { mountDefault } from '../helpers'
describe("Reset on options change", () => {
it("should not reset the selected value by default when the options property changes", () => {
describe('Reset on options change', () => {
it('should not reset the selected value by default when the options property changes', () => {
const Select = shallowMount(VueSelect, {
propsData: { options: ["one"] }
});
propsData: { options: ['one'] },
})
Select.vm.$data._value = 'one';
Select.vm.$data._value = 'one'
Select.setProps({options: ["four", "five", "six"]});
expect(Select.vm.selectedValue).toEqual(["one"]);
});
Select.setProps({ options: ['four', 'five', 'six'] })
expect(Select.vm.selectedValue).toEqual(['one'])
})
describe('resetOnOptionsChange as a function', () => {
it('will yell at you if resetOnOptionsChange is not a function or boolean', () => {
const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
const spy = jest.spyOn(console, 'error').mockImplementation(() => {})
mountDefault({resetOnOptionsChange: 1});
expect(spy.mock.calls[0][0]).toContain('Invalid prop: custom validator check failed for prop "resetOnOptionsChange"')
mountDefault({ resetOnOptionsChange: 1 })
expect(spy.mock.calls[0][0]).toContain(
'Invalid prop: custom validator check failed for prop "resetOnOptionsChange"'
)
mountDefault({resetOnOptionsChange: 'one'});
expect(spy.mock.calls[1][0]).toContain('Invalid prop: custom validator check failed for prop "resetOnOptionsChange"')
mountDefault({ resetOnOptionsChange: 'one' })
expect(spy.mock.calls[1][0]).toContain(
'Invalid prop: custom validator check failed for prop "resetOnOptionsChange"'
)
mountDefault({resetOnOptionsChange: []});
expect(spy.mock.calls[2][0]).toContain('Invalid prop: custom validator check failed for prop "resetOnOptionsChange"')
mountDefault({ resetOnOptionsChange: [] })
expect(spy.mock.calls[2][0]).toContain(
'Invalid prop: custom validator check failed for prop "resetOnOptionsChange"'
)
mountDefault({resetOnOptionsChange: {}});
expect(spy.mock.calls[3][0]).toContain('Invalid prop: custom validator check failed for prop "resetOnOptionsChange"')
});
mountDefault({ resetOnOptionsChange: {} })
expect(spy.mock.calls[3][0]).toContain(
'Invalid prop: custom validator check failed for prop "resetOnOptionsChange"'
)
})
it('should receive the new options, old options, and current value', async () => {
let resetOnOptionsChange = jest.fn(option => option);
const Select = mountDefault(
{resetOnOptionsChange, options: ['bear'], value: 'selected'},
);
let resetOnOptionsChange = jest.fn((option) => option)
const Select = mountDefault({
resetOnOptionsChange,
options: ['bear'],
value: 'selected',
})
Select.setProps({options: ['lake', 'kite']});
await Select.vm.$nextTick();
Select.setProps({ options: ['lake', 'kite'] })
await Select.vm.$nextTick()
expect(resetOnOptionsChange).toHaveBeenCalledTimes(1);
expect(resetOnOptionsChange)
.toHaveBeenCalledWith(['lake', 'kite'], ['bear'], ['selected']);
});
expect(resetOnOptionsChange).toHaveBeenCalledTimes(1)
expect(resetOnOptionsChange).toHaveBeenCalledWith(
['lake', 'kite'],
['bear'],
['selected']
)
})
it('should allow resetOnOptionsChange to be a function that returns true', async () => {
let resetOnOptionsChange = () => true;
let resetOnOptionsChange = () => true
const Select = shallowMount(VueSelect, {
propsData: {resetOnOptionsChange, options: ['one'], value: 'one'},
});
const spy = jest.spyOn(Select.vm, 'clearSelection');
propsData: { resetOnOptionsChange, options: ['one'], value: 'one' },
})
const spy = jest.spyOn(Select.vm, 'clearSelection')
Select.setProps({options: ['one', 'two']});
await Select.vm.$nextTick();
Select.setProps({ options: ['one', 'two'] })
await Select.vm.$nextTick()
expect(spy).toHaveBeenCalledTimes(1);
});
expect(spy).toHaveBeenCalledTimes(1)
})
it('should allow resetOnOptionsChange to be a function that returns false', () => {
let resetOnOptionsChange = () => false;
let resetOnOptionsChange = () => false
const Select = shallowMount(VueSelect, {
propsData: {resetOnOptionsChange, options: ['one'], value: 'one'},
});
const spy = jest.spyOn(Select.vm, 'clearSelection');
propsData: { resetOnOptionsChange, options: ['one'], value: 'one' },
})
const spy = jest.spyOn(Select.vm, 'clearSelection')
Select.setProps({options: ['one', 'two']});
expect(spy).not.toHaveBeenCalled();
});
Select.setProps({ options: ['one', 'two'] })
expect(spy).not.toHaveBeenCalled()
})
it('should reset the options if the selectedValue does not exist in the new options', async () => {
let resetOnOptionsChange = (options, old, val) => val.some(val => options.includes(val));
let resetOnOptionsChange = (options, old, val) =>
val.some((val) => options.includes(val))
const Select = shallowMount(VueSelect, {
propsData: {resetOnOptionsChange, options: ['one'], value: 'one'},
});
const spy = jest.spyOn(Select.vm, 'clearSelection');
propsData: { resetOnOptionsChange, options: ['one'], value: 'one' },
})
const spy = jest.spyOn(Select.vm, 'clearSelection')
Select.setProps({options: ['one', 'two']});
await Select.vm.$nextTick();
Select.setProps({ options: ['one', 'two'] })
await Select.vm.$nextTick()
expect(Select.vm.selectedValue).toEqual(['one']);
expect(Select.vm.selectedValue).toEqual(['one'])
Select.setProps({options: ['two']});
await Select.vm.$nextTick();
Select.setProps({ options: ['two'] })
await Select.vm.$nextTick()
expect(spy).toHaveBeenCalledTimes(1);
});
});
expect(spy).toHaveBeenCalledTimes(1)
})
})
it("should reset the selected value when the options property changes", async () => {
it('should reset the selected value when the options property changes', async () => {
const Select = shallowMount(VueSelect, {
propsData: { resetOnOptionsChange: true, options: ["one"] }
});
propsData: { resetOnOptionsChange: true, options: ['one'] },
})
Select.vm.$data._value = 'one';
Select.vm.$data._value = 'one'
Select.setProps({options: ["four", "five", "six"]});
await Select.vm.$nextTick();
Select.setProps({ options: ['four', 'five', 'six'] })
await Select.vm.$nextTick()
expect(Select.vm.selectedValue).toEqual([]);
});
expect(Select.vm.selectedValue).toEqual([])
})
it("should return correct selected value when the options property changes and a new option matches", async () => {
it('should return correct selected value when the options property changes and a new option matches', async () => {
const Select = shallowMount(VueSelect, {
propsData: { value: "one", options: [], reduce(option) { return option.value } }
});
propsData: {
value: 'one',
options: [],
reduce(option) {
return option.value
},
},
})
Select.setProps({options: [{ label: "oneLabel", value: "one" }]});
await Select.vm.$nextTick();
Select.setProps({ options: [{ label: 'oneLabel', value: 'one' }] })
await Select.vm.$nextTick()
expect(Select.vm.selectedValue).toEqual([{ label: "oneLabel", value: "one" }]);
});
expect(Select.vm.selectedValue).toEqual([
{ label: 'oneLabel', value: 'one' },
])
})
it('clearSearchOnBlur returns false when multiple is true', () => {
const Select = mountDefault({});
let clearSearchOnBlur = jest.spyOn(Select.vm, 'clearSearchOnBlur');
Select.find({ref: 'search'}).trigger('click');
Select.setData({search: 'one'});
Select.find({ref: 'search'}).trigger('blur');
const Select = mountDefault({})
let clearSearchOnBlur = jest.spyOn(Select.vm, 'clearSearchOnBlur')
Select.find({ ref: 'search' }).trigger('click')
Select.setData({ search: 'one' })
Select.find({ ref: 'search' }).trigger('blur')
expect(clearSearchOnBlur).toHaveBeenCalledTimes(1);
expect(clearSearchOnBlur).toHaveBeenCalledTimes(1)
expect(clearSearchOnBlur).toHaveBeenCalledWith({
clearSearchOnSelect: true,
multiple: false,
});
expect(Select.vm.search).toBe('');
});
})
expect(Select.vm.search).toBe('')
})
it('clearSearchOnBlur accepts a function', () => {
let clearSearchOnBlur = jest.fn(() => false);
const Select = mountDefault({clearSearchOnBlur});
let clearSearchOnBlur = jest.fn(() => false)
const Select = mountDefault({ clearSearchOnBlur })
Select.find({ref: 'search'}).trigger('click');
Select.setData({search: 'one'});
Select.find({ref: 'search'}).trigger('blur');
Select.find({ ref: 'search' }).trigger('click')
Select.setData({ search: 'one' })
Select.find({ ref: 'search' }).trigger('blur')
expect(clearSearchOnBlur).toHaveBeenCalledTimes(1);
expect(Select.vm.search).toBe('one');
});
});
expect(clearSearchOnBlur).toHaveBeenCalledTimes(1)
expect(Select.vm.search).toBe('one')
})
})
tests/unit/Reduce.spec.js
+185 -171
View File
@@ -1,127 +1,133 @@
import { mount, shallowMount } from "@vue/test-utils";
import VueSelect from "../../src/components/Select";
import { mount, shallowMount } from '@vue/test-utils'
import VueSelect from '../../src/components/Select'
describe("When reduce prop is defined", () => {
it("can accept an array of objects and pre-selected value (single)", () => {
describe('When reduce prop is defined', () => {
it('can accept an array of objects and pre-selected value (single)', () => {
const Select = shallowMount(VueSelect, {
propsData: {
reduce: option => option.value,
value: "foo",
options: [{ label: "This is Foo", value: "foo" }]
}
});
expect(Select.vm.selectedValue).toEqual([{ label: "This is Foo", value: "foo" }]);
});
reduce: (option) => option.value,
value: 'foo',
options: [{ label: 'This is Foo', value: 'foo' }],
},
})
expect(Select.vm.selectedValue).toEqual([
{ label: 'This is Foo', value: 'foo' },
])
})
it("can determine if an object is pre-selected", () => {
it('can determine if an object is pre-selected', () => {
const Select = shallowMount(VueSelect, {
propsData: {
reduce: option => option.id,
value: "foo",
reduce: (option) => option.id,
value: 'foo',
options: [
{
id: "foo",
label: "This is Foo"
}
]
}
});
id: 'foo',
label: 'This is Foo',
},
],
},
})
expect(
Select.vm.isOptionSelected({
id: "foo",
label: "This is Foo"
id: 'foo',
label: 'This is Foo',
})
).toEqual(true);
});
).toEqual(true)
})
it('can determine if an object is selected after its been chosen', () => {
const Select = shallowMount(VueSelect, {
propsData: {
reduce: option => option.id,
options: [{id: 'foo', label: 'FooBar'}],
},
});
const Select = shallowMount(VueSelect, {
propsData: {
reduce: (option) => option.id,
options: [{ id: 'foo', label: 'FooBar' }],
},
})
Select.vm.select({id: 'foo', label: 'FooBar'});
Select.vm.select({ id: 'foo', label: 'FooBar' })
expect(Select.vm.isOptionSelected({
expect(
Select.vm.isOptionSelected({
id: 'foo',
label: 'This is FooBar',
})).toEqual(true);
});
})
).toEqual(true)
})
it("can accept an array of objects and pre-selected values (multiple)", () => {
it('can accept an array of objects and pre-selected values (multiple)', () => {
const Select = shallowMount(VueSelect, {
propsData: {
multiple: true,
reduce: option => option.value,
value: ["foo"],
reduce: (option) => option.value,
value: ['foo'],
options: [
{ label: "This is Foo", value: "foo" },
{ label: "This is Bar", value: "bar" }
]
}
});
{ label: 'This is Foo', value: 'foo' },
{ label: 'This is Bar', value: 'bar' },
],
},
})
expect(Select.vm.selectedValue).toEqual([{ label: "This is Foo", value: "foo" }]);
});
expect(Select.vm.selectedValue).toEqual([
{ label: 'This is Foo', value: 'foo' },
])
})
it("can deselect a pre-selected object", () => {
it('can deselect a pre-selected object', () => {
const Select = shallowMount(VueSelect, {
propsData: {
multiple: true,
reduce: option => option.value,
reduce: (option) => option.value,
options: [
{ label: "This is Foo", value: "foo" },
{ label: "This is Bar", value: "bar" }
]
}
});
{ label: 'This is Foo', value: 'foo' },
{ label: 'This is Bar', value: 'bar' },
],
},
})
Select.vm.$data._value = ['foo', 'bar'];
Select.vm.$data._value = ['foo', 'bar']
Select.vm.deselect("foo");
expect(Select.vm.selectedValue).toEqual(["bar"]);
});
Select.vm.deselect('foo')
expect(Select.vm.selectedValue).toEqual(['bar'])
})
it("can deselect an option when multiple is false", () => {
it('can deselect an option when multiple is false', () => {
const Select = shallowMount(VueSelect, {
propsData: {
reduce: option => option.value,
reduce: (option) => option.value,
options: [
{ label: "This is Foo", value: "foo" },
{ label: "This is Bar", value: "bar" }
]
}
});
{ label: 'This is Foo', value: 'foo' },
{ label: 'This is Bar', value: 'bar' },
],
},
})
Select.vm.deselect("foo");
expect(Select.vm.selectedValue).toEqual([]);
});
Select.vm.deselect('foo')
expect(Select.vm.selectedValue).toEqual([])
})
it("can use v-model syntax for a two way binding to a parent component", async () => {
it('can use v-model syntax for a two way binding to a parent component', async () => {
const Parent = mount({
data: () => ({
reduce: option => option.value,
current: "foo",
reduce: (option) => option.value,
current: 'foo',
options: [
{ label: "This is Foo", value: "foo" },
{ label: "This is Bar", value: "bar" },
{ label: "This is Baz", value: "baz" }
]
{ label: 'This is Foo', value: 'foo' },
{ label: 'This is Bar', value: 'bar' },
{ label: 'This is Baz', value: 'baz' },
],
}),
components: { "v-select": VueSelect },
components: { 'v-select': VueSelect },
computed: {
value: {
get() {
return this.current;
return this.current
},
set(value) {
if (value == 'baz') return;
this.current = value;
}
}
if (value == 'baz') return
this.current = value
},
},
},
template: `
<v-select
@@ -129,133 +135,141 @@ describe("When reduce prop is defined", () => {
:reduce="option => option.value"
:options="options"
/>
`
});
const Select = Parent.vm.$children[0];
`,
})
const Select = Parent.vm.$children[0]
expect(Select.value).toEqual("foo");
expect(Select.selectedValue).toEqual([{ label: "This is Foo", value: "foo" }]);
expect(Select.value).toEqual('foo')
expect(Select.selectedValue).toEqual([
{ label: 'This is Foo', value: 'foo' },
])
Select.select({ label: "This is Bar", value: "bar" });
await Select.$nextTick();
expect(Parent.vm.value).toEqual("bar");
expect(Select.selectedValue).toEqual([{ label: "This is Bar", value: "bar" }]);
Select.select({ label: 'This is Bar', value: 'bar' })
await Select.$nextTick()
expect(Parent.vm.value).toEqual('bar')
expect(Select.selectedValue).toEqual([
{ label: 'This is Bar', value: 'bar' },
])
// Parent denies to set baz
Select.select({ label: "This is Baz", value: "baz" });
await Select.$nextTick();
expect(Select.selectedValue).toEqual([{ label: "This is Bar", value: "bar" }]);
expect(Parent.vm.value).toEqual('bar');
});
Select.select({ label: 'This is Baz', value: 'baz' })
await Select.$nextTick()
expect(Select.selectedValue).toEqual([
{ label: 'This is Bar', value: 'bar' },
])
expect(Parent.vm.value).toEqual('bar')
})
it("can generate labels using a custom label key", () => {
it('can generate labels using a custom label key', () => {
const Select = shallowMount(VueSelect, {
propsData: {
multiple: true,
reduce: option => option.value,
value: ["CA"],
label: "name",
options: [{ value: "CA", name: "Canada" }, { value: "US", name: "United States" }]
}
});
reduce: (option) => option.value,
value: ['CA'],
label: 'name',
options: [
{ value: 'CA', name: 'Canada' },
{ value: 'US', name: 'United States' },
],
},
})
expect(Select.find(".vs__selected").text()).toContain("Canada");
});
expect(Select.find('.vs__selected').text()).toContain('Canada')
})
it("can find the original option within this.options", () => {
const optionToFind = { id: 1, label: "Foo" };
it('can find the original option within this.options', () => {
const optionToFind = { id: 1, label: 'Foo' }
const Select = shallowMount(VueSelect, {
propsData: {
reduce: option => option.id,
options: [optionToFind, { id: 2, label: "Bar" }]
}
});
reduce: (option) => option.id,
options: [optionToFind, { id: 2, label: 'Bar' }],
},
})
expect(Select.vm.findOptionFromReducedValue(1)).toEqual(optionToFind);
expect(Select.vm.findOptionFromReducedValue(1)).toEqual(optionToFind)
expect(Select.vm.findOptionFromReducedValue(optionToFind)).toEqual(
optionToFind
);
});
)
})
it('can work with falsey values', () => {
const option = {value: 0, label: 'No'};
const option = { value: 0, label: 'No' }
const Select = shallowMount(VueSelect, {
propsData: {
reduce: option => option.value,
options: [option, {value: 1, label: 'Yes'}],
reduce: (option) => option.value,
options: [option, { value: 1, label: 'Yes' }],
value: 0,
},
});
})
expect(Select.vm.findOptionFromReducedValue(option)).toEqual(option);
expect(Select.vm.selectedValue).toEqual([option]);
});
expect(Select.vm.findOptionFromReducedValue(option)).toEqual(option)
expect(Select.vm.selectedValue).toEqual([option])
})
it('works with null values', () => {
const option = {value: null, label: 'No'};
const option = { value: null, label: 'No' }
const Select = shallowMount(VueSelect, {
propsData: {
reduce: option => option.value,
options: [option, {value: 1, label: 'Yes'}],
reduce: (option) => option.value,
options: [option, { value: 1, label: 'Yes' }],
value: null,
},
});
})
expect(Select.vm.findOptionFromReducedValue(option)).toEqual(option);
expect(Select.vm.selectedValue).toEqual([option]);
});
expect(Select.vm.findOptionFromReducedValue(option)).toEqual(option)
expect(Select.vm.selectedValue).toEqual([option])
})
describe("And when a reduced option is a nested object", () => {
it("can determine if an object is pre-selected", () => {
const nestedOption = { value: { nested: true }, label: "foo" };
describe('And when a reduced option is a nested object', () => {
it('can determine if an object is pre-selected', () => {
const nestedOption = { value: { nested: true }, label: 'foo' }
const Select = shallowMount(VueSelect, {
propsData: {
reduce: option => option.value,
reduce: (option) => option.value,
value: {
nested: true
nested: true,
},
options: [nestedOption]
}
});
options: [nestedOption],
},
})
expect(Select.vm.selectedValue).toEqual([nestedOption]);
});
expect(Select.vm.selectedValue).toEqual([nestedOption])
})
it("can determine if an object is selected after it is chosen", () => {
const nestedOption = { value: { nested: true }, label: "foo" };
it('can determine if an object is selected after it is chosen', () => {
const nestedOption = { value: { nested: true }, label: 'foo' }
const Select = shallowMount(VueSelect, {
propsData: {
reduce: option => option.value,
options: [nestedOption]
}
});
reduce: (option) => option.value,
options: [nestedOption],
},
})
Select.vm.select(nestedOption);
expect(Select.vm.isOptionSelected(nestedOption)).toEqual(true);
});
Select.vm.select(nestedOption)
expect(Select.vm.isOptionSelected(nestedOption)).toEqual(true)
})
})
});
it("reacts correctly when value property changes", async () => {
const optionToChangeTo = { id: 1, label: "Foo" };
it('reacts correctly when value property changes', async () => {
const optionToChangeTo = { id: 1, label: 'Foo' }
const Select = shallowMount(VueSelect, {
propsData: {
value: 2,
reduce: option => option.id,
options: [optionToChangeTo, { id: 2, label: "Bar" }]
}
});
reduce: (option) => option.id,
options: [optionToChangeTo, { id: 2, label: 'Bar' }],
},
})
Select.setProps({ value: optionToChangeTo.id });
await Select.vm.$nextTick();
Select.setProps({ value: optionToChangeTo.id })
await Select.vm.$nextTick()
expect(Select.vm.selectedValue).toEqual([optionToChangeTo]);
});
expect(Select.vm.selectedValue).toEqual([optionToChangeTo])
})
describe('Reducing Tags', () => {
it('tracks values that have been created by the user', async () => {
const Parent = mount({
data: () => ({selected: null, options: []}),
data: () => ({ selected: null, options: [] }),
template: `
<v-select
v-model="selected"
@@ -265,24 +279,24 @@ describe("When reduce prop is defined", () => {
:create-option="label => ({ label, value: -1 })"
/>
`,
components: {'v-select': VueSelect},
});
const Select = Parent.vm.$children[0];
components: { 'v-select': VueSelect },
})
const Select = Parent.vm.$children[0]
// When
Select.$refs.search.focus();
await Select.$nextTick();
Select.$refs.search.focus()
await Select.$nextTick()
Select.search = 'hello';
await Select.$nextTick();
Select.search = 'hello'
await Select.$nextTick()
Select.typeAheadSelect();
await Select.$nextTick();
Select.typeAheadSelect()
await Select.$nextTick()
// Then
expect(Select.selectedValue).toEqual([{label: 'hello', value: -1}]);
expect(Select.$refs.selectedOptions.textContent.trim()).toEqual('hello');
expect(Parent.vm.selected).toEqual(-1);
});
});
});
expect(Select.selectedValue).toEqual([{ label: 'hello', value: -1 }])
expect(Select.$refs.selectedOptions.textContent.trim()).toEqual('hello')
expect(Parent.vm.selected).toEqual(-1)
})
})
})
tests/unit/Selectable.spec.js
+40 -40
View File
@@ -1,59 +1,59 @@
import { selectWithProps } from "../helpers";
import { selectWithProps } from '../helpers'
describe("Selectable prop", () => {
it("should select selectable option if clicked", async () => {
describe('Selectable prop', () => {
it('should select selectable option if clicked', async () => {
const Select = selectWithProps({
options: ["one", "two", "three"],
selectable: (option) => option === "one"
});
options: ['one', 'two', 'three'],
selectable: (option) => option === 'one',
})
Select.vm.$data.open = true;
await Select.vm.$nextTick();
Select.vm.$data.open = true
await Select.vm.$nextTick()
Select.find(".vs__dropdown-menu li:first-child").trigger("mousedown");
Select.find('.vs__dropdown-menu li:first-child').trigger('mousedown')
await Select.vm.$nextTick();
expect(Select.vm.selectedValue).toEqual(["one"]);
await Select.vm.$nextTick()
expect(Select.vm.selectedValue).toEqual(['one'])
})
it("should not select not selectable option if clicked", async () => {
it('should not select not selectable option if clicked', async () => {
const Select = selectWithProps({
options: ["one", "two", "three"],
selectable: (option) => option === "one"
});
options: ['one', 'two', 'three'],
selectable: (option) => option === 'one',
})
Select.vm.$data.open = true;
await Select.vm.$nextTick();
Select.vm.$data.open = true
await Select.vm.$nextTick()
Select.find(".vs__dropdown-menu li:last-child").trigger("mousedown");
await Select.vm.$nextTick();
Select.find('.vs__dropdown-menu li:last-child').trigger('mousedown')
await Select.vm.$nextTick()
expect(Select.vm.selectedValue).toEqual([]);
});
it("should skip non-selectable option on down arrow keyDown", () => {
const Select = selectWithProps({
options: ["one", "two", "three"],
selectable: (option) => option !== "two"
});
Select.vm.typeAheadPointer = 1;
Select.find({ ref: "search" }).trigger("keydown.down");
expect(Select.vm.typeAheadPointer).toEqual(2);
expect(Select.vm.selectedValue).toEqual([])
})
it("should skip non-selectable option on up arrow keyDown", () => {
it('should skip non-selectable option on down arrow keyDown', () => {
const Select = selectWithProps({
options: ["one", "two", "three"],
selectable: (option) => option !== "two"
});
options: ['one', 'two', 'three'],
selectable: (option) => option !== 'two',
})
Select.vm.typeAheadPointer = 2;
Select.vm.typeAheadPointer = 1
Select.find({ ref: "search" }).trigger("keydown.up");
Select.find({ ref: 'search' }).trigger('keydown.down')
expect(Select.vm.typeAheadPointer).toEqual(0);
expect(Select.vm.typeAheadPointer).toEqual(2)
})
it('should skip non-selectable option on up arrow keyDown', () => {
const Select = selectWithProps({
options: ['one', 'two', 'three'],
selectable: (option) => option !== 'two',
})
Select.vm.typeAheadPointer = 2
Select.find({ ref: 'search' }).trigger('keydown.up')
expect(Select.vm.typeAheadPointer).toEqual(0)
})
})
tests/unit/Selecting.spec.js
+224 -205
View File
@@ -1,303 +1,322 @@
import { mount, shallowMount } from "@vue/test-utils";
import VueSelect from "../../src/components/Select.vue";
import { mountDefault } from '../helpers';
import { mount, shallowMount } from '@vue/test-utils'
import VueSelect from '../../src/components/Select.vue'
import { mountDefault } from '../helpers'
describe("VS - Selecting Values", () => {
let defaultProps;
describe('VS - Selecting Values', () => {
let defaultProps
beforeEach(() => {
defaultProps = {
value: "one",
options: ["one", "two", "three"]
};
});
value: 'one',
options: ['one', 'two', 'three'],
}
})
it("can accept an array with pre-selected values", () => {
it('can accept an array with pre-selected values', () => {
const Select = shallowMount(VueSelect, {
propsData: defaultProps
});
expect(Select.selectedValue).toEqual(Select.value);
});
propsData: defaultProps,
})
expect(Select.selectedValue).toEqual(Select.value)
})
it("can accept an array of objects and pre-selected value (single)", () => {
it('can accept an array of objects and pre-selected value (single)', () => {
const Select = shallowMount(VueSelect, {
propsData: {
value: { label: "This is Foo", value: "foo" },
value: { label: 'This is Foo', value: 'foo' },
options: [
{ label: "This is Foo", value: "foo" },
{ label: "This is Bar", value: "bar" }
]
}
});
expect(Select.selectedValue).toEqual(Select.value);
});
{ label: 'This is Foo', value: 'foo' },
{ label: 'This is Bar', value: 'bar' },
],
},
})
expect(Select.selectedValue).toEqual(Select.value)
})
it("can accept an array of objects and pre-selected values (multiple)", () => {
it('can accept an array of objects and pre-selected values (multiple)', () => {
const Select = shallowMount(VueSelect, {
propsData: {
value: [
{ label: "This is Foo", value: "foo" },
{ label: "This is Bar", value: "bar" }
{ label: 'This is Foo', value: 'foo' },
{ label: 'This is Bar', value: 'bar' },
],
options: [
{ label: "This is Foo", value: "foo" },
{ label: "This is Bar", value: "bar" }
]
{ label: 'This is Foo', value: 'foo' },
{ label: 'This is Bar', value: 'bar' },
],
},
multiple: true
});
multiple: true,
})
expect(Select.selectedValue).toEqual(Select.value);
});
expect(Select.selectedValue).toEqual(Select.value)
})
it("can select an option on tab", () => {
it('can select an option on tab', () => {
const Select = shallowMount(VueSelect, {
propsData: {
selectOnTab: true
}
});
selectOnTab: true,
},
})
const spy = jest.spyOn(Select.vm, "typeAheadSelect");
const spy = jest.spyOn(Select.vm, 'typeAheadSelect')
Select.find({ ref: "search" }).trigger("keydown.tab");
Select.find({ ref: 'search' }).trigger('keydown.tab')
expect(spy).toHaveBeenCalledWith();
});
expect(spy).toHaveBeenCalledWith()
})
it("can deselect a pre-selected object", () => {
it('can deselect a pre-selected object', () => {
const Select = shallowMount(VueSelect, {
propsData: {
multiple: true,
options: [
{ label: "This is Foo", value: "foo" },
{ label: "This is Bar", value: "bar" }
]
}
});
{ label: 'This is Foo', value: 'foo' },
{ label: 'This is Bar', value: 'bar' },
],
},
})
Select.vm.$data._value = [
{ label: "This is Foo", value: "foo" },
{ label: "This is Bar", value: "bar" }
];
{ label: 'This is Foo', value: 'foo' },
{ label: 'This is Bar', value: 'bar' },
]
Select.vm.deselect({ label: "This is Foo", value: "foo" });
expect(Select.vm.selectedValue).toEqual([{ label: "This is Bar", value: "bar" }]);
});
Select.vm.deselect({ label: 'This is Foo', value: 'foo' })
expect(Select.vm.selectedValue).toEqual([
{ label: 'This is Bar', value: 'bar' },
])
})
it("can deselect a pre-selected string", () => {
it('can deselect a pre-selected string', () => {
const Select = shallowMount(VueSelect, {
propsData: {
multiple: true,
options: ["foo", "bar"]
}
});
options: ['foo', 'bar'],
},
})
Select.vm.$data._value = "foo";
Select.vm.$data._value = 'foo'
Select.vm.deselect("foo");
expect(Select.vm.selectedValue).toEqual([]);
});
Select.vm.deselect('foo')
expect(Select.vm.selectedValue).toEqual([])
})
it("can deselect an option when multiple is false", () => {
const Select = shallowMount(VueSelect);
it('can deselect an option when multiple is false', () => {
const Select = shallowMount(VueSelect)
Select.vm.$data._value = "foo";
Select.vm.$data._value = 'foo'
Select.vm.deselect("foo");
expect(Select.vm.selectedValue).toEqual([]);
});
Select.vm.deselect('foo')
expect(Select.vm.selectedValue).toEqual([])
})
it("can determine if the value prop is empty", () => {
it('can determine if the value prop is empty', () => {
const Select = shallowMount(VueSelect, {
propsData: {
options: ["one", "two", "three"]
}
});
options: ['one', 'two', 'three'],
},
})
const select = Select.vm;
expect(select.isValueEmpty).toEqual(true);
const select = Select.vm
expect(select.isValueEmpty).toEqual(true)
select.select(["one"]);
expect(select.isValueEmpty).toEqual(false);
select.select(['one'])
expect(select.isValueEmpty).toEqual(false)
select.select("one");
expect(select.isValueEmpty).toEqual(false);
select.select('one')
expect(select.isValueEmpty).toEqual(false)
select.select({ label: "foo", value: "foo" });
expect(select.isValueEmpty).toEqual(false);
select.select({ label: 'foo', value: 'foo' })
expect(select.isValueEmpty).toEqual(false)
select.select("");
expect(select.isValueEmpty).toEqual(true);
select.select('')
expect(select.isValueEmpty).toEqual(true)
select.select(null);
expect(select.isValueEmpty).toEqual(true);
});
select.select(null)
expect(select.isValueEmpty).toEqual(true)
})
it("should reset the selected values when the multiple property changes", () => {
it('should reset the selected values when the multiple property changes', () => {
const Select = shallowMount(VueSelect, {
propsData: {
multiple: true,
options: ["one", "two", "three"]
}
});
options: ['one', 'two', 'three'],
},
})
Select.setProps({ multiple: false });
expect(Select.vm.selectedValue).toEqual([]);
Select.setProps({ multiple: false })
expect(Select.vm.selectedValue).toEqual([])
Select.setProps({ multiple: true });
expect(Select.vm.selectedValue).toEqual([]);
});
Select.setProps({ multiple: true })
expect(Select.vm.selectedValue).toEqual([])
})
it("can retain values present in a new array of options", () => {
it('can retain values present in a new array of options', () => {
const Select = shallowMount(VueSelect, {
propsData: {
value: ["one"],
options: ["one", "two", "three"]
}
});
value: ['one'],
options: ['one', 'two', 'three'],
},
})
Select.setProps({ options: ["one", "five", "six"] });
expect(Select.vm.selectedValue).toEqual(["one"]);
});
Select.setProps({ options: ['one', 'five', 'six'] })
expect(Select.vm.selectedValue).toEqual(['one'])
})
it("can determine if an object is already selected", () => {
it('can determine if an object is already selected', () => {
const Select = shallowMount(VueSelect, {
propsData: {
value: [{ label: "one" }],
options: [{ label: "one" }]
}
});
value: [{ label: 'one' }],
options: [{ label: 'one' }],
},
})
expect(Select.vm.isOptionSelected({ label: "one" })).toEqual(true);
});
expect(Select.vm.isOptionSelected({ label: 'one' })).toEqual(true)
})
it("can use v-model syntax for a two way binding to a parent component", () => {
it('can use v-model syntax for a two way binding to a parent component', () => {
const Parent = mount({
data: () => ({ value: "foo", options: ["foo", "bar", "baz"] }),
data: () => ({ value: 'foo', options: ['foo', 'bar', 'baz'] }),
template: `<div><v-select :options="options" v-model="value" /></div>`,
components: { "v-select": VueSelect }
});
const Select = Parent.vm.$children[0];
components: { 'v-select': VueSelect },
})
const Select = Parent.vm.$children[0]
expect(Select.value).toEqual("foo");
expect(Select.selectedValue).toEqual(["foo"]);
expect(Select.value).toEqual('foo')
expect(Select.selectedValue).toEqual(['foo'])
Select.select("bar");
expect(Parent.vm.value).toEqual("bar");
});
Select.select('bar')
expect(Parent.vm.value).toEqual('bar')
})
it("can check if a string value is selected when the value is an object and multiple is true", () => {
it('can check if a string value is selected when the value is an object and multiple is true', () => {
const Select = shallowMount(VueSelect, {
propsData: {
multiple: true,
value: [{ label: "foo", value: "bar" }]
}
});
expect(Select.vm.isOptionSelected({ label: "foo", value: "bar" })).toEqual(true);
});
value: [{ label: 'foo', value: 'bar' }],
},
})
expect(Select.vm.isOptionSelected({ label: 'foo', value: 'bar' })).toEqual(
true
)
})
it('can select two options with the same label', () => {
const options = [{label: 'one', id: 1}, {label: 'one', id: 2}];
const Select = mountDefault({options, multiple: true});
const options = [
{ label: 'one', id: 1 },
{ label: 'one', id: 2 },
]
const Select = mountDefault({ options, multiple: true })
Select.vm.select({label: 'one', id: 1});
Select.vm.select({label: 'one', id: 2});
Select.vm.select({ label: 'one', id: 1 })
Select.vm.select({ label: 'one', id: 2 })
expect(Select.vm.selectedValue).toEqual(options);
});
expect(Select.vm.selectedValue).toEqual(options)
})
describe("input Event", () => {
it("will trigger the input event when the selection changes", () => {
const Select = shallowMount(VueSelect);
Select.vm.select("bar");
expect(Select.emitted("input")[0]).toEqual(["bar"]);
});
describe('input Event', () => {
it('will trigger the input event when the selection changes', () => {
const Select = shallowMount(VueSelect)
Select.vm.select('bar')
expect(Select.emitted('input')[0]).toEqual(['bar'])
})
it("will trigger the input event when the selection changes and multiple is true", () => {
it('will trigger the input event when the selection changes and multiple is true', () => {
const Select = shallowMount(VueSelect, {
propsData: { multiple: true, value: ["foo"], options: ["foo", "bar"] }
});
Select.vm.select("bar");
expect(Select.emitted("input")[0]).toEqual([["foo", "bar"]]);
});
propsData: { multiple: true, value: ['foo'], options: ['foo', 'bar'] },
})
Select.vm.select('bar')
expect(Select.emitted('input')[0]).toEqual([['foo', 'bar']])
})
it("will not trigger the input event when multiple is true and selection is repeated", () => {
it('will not trigger the input event when multiple is true and selection is repeated', () => {
const Select = shallowMount(VueSelect, {
propsData: { multiple: true, value: ["foo ", "bar"], options: ["foo", "bar", "baz"] }
});
propsData: {
multiple: true,
value: ['foo ', 'bar'],
options: ['foo', 'bar', 'baz'],
},
})
Select.vm.select("bar");
expect(Select.emitted("input")).toBeFalsy();
});
});
Select.vm.select('bar')
expect(Select.emitted('input')).toBeFalsy()
})
})
describe("option:selecting Event", () => {
it("will trigger the option:selecting event when an option is selected", () => {
const Select = shallowMount(VueSelect);
Select.vm.select("bar");
expect(Select.emitted("option:selecting")[0]).toEqual(["bar"]);
});
describe('option:selecting Event', () => {
it('will trigger the option:selecting event when an option is selected', () => {
const Select = shallowMount(VueSelect)
Select.vm.select('bar')
expect(Select.emitted('option:selecting')[0]).toEqual(['bar'])
})
it("will trigger the option:selecting event regardless of current value", () => {
it('will trigger the option:selecting event regardless of current value', () => {
const Select = shallowMount(VueSelect, {
propsData: { value: ["foo"], options: ["foo", "bar"] }
});
Select.vm.select("foo");
Select.vm.select("bar");
expect(Select.emitted("option:selecting")).toEqual([["foo"], ["bar"]]);
});
propsData: { value: ['foo'], options: ['foo', 'bar'] },
})
Select.vm.select('foo')
Select.vm.select('bar')
expect(Select.emitted('option:selecting')).toEqual([['foo'], ['bar']])
})
it("will trigger the option:selecting event with current selected item when multiple is true", () => {
it('will trigger the option:selecting event with current selected item when multiple is true', () => {
const Select = shallowMount(VueSelect, {
propsData: { multiple: true, value: ["foo"], options: ["foo", "bar"] }
});
Select.vm.select("bar");
expect(Select.emitted("option:selecting")[0]).toEqual(["bar"]);
});
propsData: { multiple: true, value: ['foo'], options: ['foo', 'bar'] },
})
Select.vm.select('bar')
expect(Select.emitted('option:selecting')[0]).toEqual(['bar'])
})
it("will trigger the option:selecting event regardless of current value when multiple is true", () => {
it('will trigger the option:selecting event regardless of current value when multiple is true', () => {
const Select = shallowMount(VueSelect, {
propsData: { multiple: true, value: ["foo", "bar"], options: ["foo", "bar"] }
});
Select.vm.select("bar");
Select.vm.select("bar");
expect(Select.emitted("option:selecting")).toEqual([["bar"], ["bar"]]);
});
});
propsData: {
multiple: true,
value: ['foo', 'bar'],
options: ['foo', 'bar'],
},
})
Select.vm.select('bar')
Select.vm.select('bar')
expect(Select.emitted('option:selecting')).toEqual([['bar'], ['bar']])
})
})
describe("option:deselected Event", () => {
it("will trigger the option:deselected event when an option is deselected", () => {
describe('option:deselected Event', () => {
it('will trigger the option:deselected event when an option is deselected', () => {
const Select = shallowMount(VueSelect, {
propsData: { value: ["foo"], options: ["foo", "bar"] }
});
Select.vm.deselect("foo");
expect(Select.emitted("option:deselected")[0]).toEqual(["foo"]);
});
propsData: { value: ['foo'], options: ['foo', 'bar'] },
})
Select.vm.deselect('foo')
expect(Select.emitted('option:deselected')[0]).toEqual(['foo'])
})
it("will trigger the option:deselected event regardless of current value", () => {
it('will trigger the option:deselected event regardless of current value', () => {
const Select = shallowMount(VueSelect, {
propsData: { value: ["foo"], options: ["foo", "bar"] }
});
Select.vm.deselect("foo");
Select.vm.deselect("bar");
expect(Select.emitted("option:deselected")).toEqual([["foo"], ["bar"]]);
});
propsData: { value: ['foo'], options: ['foo', 'bar'] },
})
Select.vm.deselect('foo')
Select.vm.deselect('bar')
expect(Select.emitted('option:deselected')).toEqual([['foo'], ['bar']])
})
it("will trigger the option:selected event with current selected item when multiple is true", () => {
it('will trigger the option:selected event with current selected item when multiple is true', () => {
const Select = shallowMount(VueSelect, {
propsData: { multiple: true, value: ["foo"], options: ["foo", "bar"] }
});
Select.vm.deselect("bar");
expect(Select.emitted("option:deselected")[0]).toEqual(["bar"]);
});
propsData: { multiple: true, value: ['foo'], options: ['foo', 'bar'] },
})
Select.vm.deselect('bar')
expect(Select.emitted('option:deselected')[0]).toEqual(['bar'])
})
it("will trigger the option:selected event regardless of current value when multiple is true", () => {
it('will trigger the option:selected event regardless of current value when multiple is true', () => {
const Select = shallowMount(VueSelect, {
propsData: { multiple: true, value: ["foo", "bar"], options: ["foo", "bar"] }
});
Select.vm.deselect("bar");
Select.vm.deselect("bar");
expect(Select.emitted("option:deselected")).toEqual([["bar"], ["bar"]]);
});
});
});
propsData: {
multiple: true,
value: ['foo', 'bar'],
options: ['foo', 'bar'],
},
})
Select.vm.deselect('bar')
Select.vm.deselect('bar')
expect(Select.emitted('option:deselected')).toEqual([['bar'], ['bar']])
})
})
})
tests/unit/Slots.spec.js
+107 -76
View File
@@ -1,122 +1,153 @@
import { mountDefault } from '../helpers';
import { mountDefault } from '../helpers'
describe('Scoped Slots', () => {
it('receives an option object to the selected-option-container slot', () => {
const Select = mountDefault(
{value: 'one'},
{ value: 'one' },
{
scopedSlots: {
'selected-option-container': `<span slot="selected-option-container" slot-scope="{option}">{{ option.label }}</span>`,
},
});
}
)
expect(Select.find({ref: 'selectedOptions'}).text()).toEqual('one');
});
expect(Select.find({ ref: 'selectedOptions' }).text()).toEqual('one')
})
describe('Slot: selected-option', () => {
it('receives an option object to the selected-option slot', () => {
const Select = mountDefault(
{value: 'one'},
{ value: 'one' },
{
scopedSlots: {
'selected-option': `<span slot="selected-option" slot-scope="option">{{ option.label }}</span>`,
},
});
}
)
expect(Select.find('.vs__selected').text()).toEqual('one');
});
expect(Select.find('.vs__selected').text()).toEqual('one')
})
it('opens the dropdown when clicking an option in selected-option slot',
() => {
const Select = mountDefault(
{value: 'one'},
{
scopedSlots: {
'selected-option': `<span class="my-option" slot-scope="option">{{ option.label }}</span>`,
},
});
Select.find('.my-option').trigger('mousedown');
expect(Select.vm.open).toEqual(true);
});
});
it('receives an option object to the option slot in the dropdown menu',
async () => {
it('opens the dropdown when clicking an option in selected-option slot', () => {
const Select = mountDefault(
{value: 'one'},
{ value: 'one' },
{
scopedSlots: {
'option': `<span slot="option" slot-scope="option">{{ option.label }}</span>`,
'selected-option': `<span class="my-option" slot-scope="option">{{ option.label }}</span>`,
},
});
}
)
Select.vm.open = true;
await Select.vm.$nextTick();
Select.find('.my-option').trigger('mousedown')
expect(Select.vm.open).toEqual(true)
})
})
expect(Select.find({ref: 'dropdownMenu'}).text()).toEqual('onetwothree');
});
it('receives an option object to the option slot in the dropdown menu', async () => {
const Select = mountDefault(
{ value: 'one' },
{
scopedSlots: {
option: `<span slot="option" slot-scope="option">{{ option.label }}</span>`,
},
}
)
Select.vm.open = true
await Select.vm.$nextTick()
expect(Select.find({ ref: 'dropdownMenu' }).text()).toEqual('onetwothree')
})
it('noOptions slot receives the current search text', async () => {
const noOptions = jest.fn();
const Select = mountDefault({}, {
scopedSlots: {'no-options': noOptions},
});
const noOptions = jest.fn()
const Select = mountDefault(
{},
{
scopedSlots: { 'no-options': noOptions },
}
)
Select.vm.search = 'something not there';
Select.vm.open = true;
await Select.vm.$nextTick();
Select.vm.search = 'something not there'
Select.vm.open = true
await Select.vm.$nextTick()
expect(noOptions).toHaveBeenCalledWith({
loading: false,
search: 'something not there',
searching: true,
})
});
})
test('header slot props', async () => {
const header = jest.fn();
const Select = mountDefault({}, {
scopedSlots: {header: header},
});
await Select.vm.$nextTick();
const header = jest.fn()
const Select = mountDefault(
{},
{
scopedSlots: { header: header },
}
)
await Select.vm.$nextTick()
expect(Object.keys(header.mock.calls[0][0])).toEqual([
'search', 'loading', 'searching', 'filteredOptions', 'deselect',
]);
});
'search',
'loading',
'searching',
'filteredOptions',
'deselect',
])
})
test('footer slot props', async () => {
const footer = jest.fn();
const Select = mountDefault({}, {
scopedSlots: {footer: footer},
});
await Select.vm.$nextTick();
const footer = jest.fn()
const Select = mountDefault(
{},
{
scopedSlots: { footer: footer },
}
)
await Select.vm.$nextTick()
expect(Object.keys(footer.mock.calls[0][0])).toEqual([
'search', 'loading', 'searching', 'filteredOptions', 'deselect',
]);
});
'search',
'loading',
'searching',
'filteredOptions',
'deselect',
])
})
test('list-header slot props', async () => {
const header = jest.fn();
const Select = mountDefault({}, {
scopedSlots: {'list-header': header},
});
Select.vm.open = true;
await Select.vm.$nextTick();
const header = jest.fn()
const Select = mountDefault(
{},
{
scopedSlots: { 'list-header': header },
}
)
Select.vm.open = true
await Select.vm.$nextTick()
expect(Object.keys(header.mock.calls[0][0])).toEqual([
'search', 'loading', 'searching', 'filteredOptions',
]);
});
'search',
'loading',
'searching',
'filteredOptions',
])
})
test('list-footer slot props', async () => {
const footer = jest.fn();
const Select = mountDefault({}, {
scopedSlots: {'list-footer': footer},
});
Select.vm.open = true;
await Select.vm.$nextTick();
const footer = jest.fn()
const Select = mountDefault(
{},
{
scopedSlots: { 'list-footer': footer },
}
)
Select.vm.open = true
await Select.vm.$nextTick()
expect(Object.keys(footer.mock.calls[0][0])).toEqual([
'search', 'loading', 'searching', 'filteredOptions',
]);
});
});
'search',
'loading',
'searching',
'filteredOptions',
])
})
})
tests/unit/Tagging.spec.js
+156 -159
View File
@@ -3,261 +3,258 @@ import {
searchSubmit,
selectTag,
selectWithProps,
} from '../helpers';
import Select from '../../src/components/Select';
} from '../helpers'
import Select from '../../src/components/Select'
describe("When Tagging Is Enabled", () => {
describe('When Tagging Is Enabled', () => {
it('can determine if a given option string already exists', () => {
const Select = selectWithProps({ taggable: true, options: ['one', 'two'] })
expect(Select.vm.optionExists('one')).toEqual(true)
expect(Select.vm.optionExists('three')).toEqual(false)
})
it("can determine if a given option string already exists", () => {
const Select = selectWithProps({ taggable: true, options: ["one", "two"] });
expect(Select.vm.optionExists("one")).toEqual(true);
expect(Select.vm.optionExists("three")).toEqual(false);
});
it("can determine if a given option object already exists", () => {
it('can determine if a given option object already exists', () => {
const Select = selectWithProps({
taggable: true,
options: [{ label: "one" }, { label: "two" }]
});
options: [{ label: 'one' }, { label: 'two' }],
})
expect(Select.vm.optionExists({label: "one"})).toEqual(true);
expect(Select.vm.optionExists({label: "three"})).toEqual(false);
});
expect(Select.vm.optionExists({ label: 'one' })).toEqual(true)
expect(Select.vm.optionExists({ label: 'three' })).toEqual(false)
})
it("can determine if a given option object already exists when using custom labels", () => {
it('can determine if a given option object already exists when using custom labels', () => {
const Select = selectWithProps({
taggable: true,
options: [{ foo: "one" }, { foo: "two" }],
label: "foo"
});
options: [{ foo: 'one' }, { foo: 'two' }],
label: 'foo',
})
const createOption = (text) => Select.vm.createOption(text);
const createOption = (text) => Select.vm.createOption(text)
expect(Select.vm.optionExists(createOption("one"))).toEqual(true);
expect(Select.vm.optionExists(createOption("three"))).toEqual(false);
});
expect(Select.vm.optionExists(createOption('one'))).toEqual(true)
expect(Select.vm.optionExists(createOption('three'))).toEqual(false)
})
it("can add the current search text as the first item in the options list", async () => {
it('can add the current search text as the first item in the options list', async () => {
const Select = selectWithProps({
taggable: true,
multiple: true,
value: ["one"],
options: ["one", "two"]
});
value: ['one'],
options: ['one', 'two'],
})
Select.vm.search = "three";
await Select.vm.$nextTick();
expect(Select.vm.filteredOptions).toEqual(["three"]);
});
Select.vm.search = 'three'
await Select.vm.$nextTick()
expect(Select.vm.filteredOptions).toEqual(['three'])
})
it("can select the current search text as a string", async () => {
it('can select the current search text as a string', async () => {
const Select = selectWithProps({
taggable: true,
multiple: true,
options: ["one", "two"]
});
options: ['one', 'two'],
})
await selectTag(Select, "three");
await selectTag(Select, 'three')
expect(Select.vm.selectedValue).toEqual(["three"]);
});
expect(Select.vm.selectedValue).toEqual(['three'])
})
it("can select the current search text as an object", async () => {
it('can select the current search text as an object', async () => {
const Select = selectWithProps({
taggable: true,
multiple: true,
options: [{ label: "one" }]
});
options: [{ label: 'one' }],
})
await selectTag(Select, "two");
await selectTag(Select, 'two')
expect(Select.vm.selectedValue).toEqual([
{ label: "two" }
]);
});
expect(Select.vm.selectedValue).toEqual([{ label: 'two' }])
})
it("should add a freshly created option/tag to the options list when pushTags is true", async () => {
it('should add a freshly created option/tag to the options list when pushTags is true', async () => {
const Select = selectWithProps({
pushTags: true,
taggable: true,
multiple: true,
value: ["one"],
options: ["one", "two"]
});
value: ['one'],
options: ['one', 'two'],
})
await selectTag(Select, "three");
expect(Select.vm.pushedTags).toEqual(["three"]);
expect(Select.vm.optionList).toEqual(["one", "two", "three"]);
});
await selectTag(Select, 'three')
expect(Select.vm.pushedTags).toEqual(['three'])
expect(Select.vm.optionList).toEqual(['one', 'two', 'three'])
})
it("should pushTags even if the consumer has defined a createOption callback", async () => {
it('should pushTags even if the consumer has defined a createOption callback', async () => {
const Select = selectWithProps({
pushTags: true,
taggable: true,
createOption: option => option,
options: ["one", "two"]
});
createOption: (option) => option,
options: ['one', 'two'],
})
await selectTag(Select, "three");
await selectTag(Select, 'three')
expect(Select.vm.pushedTags).toEqual(["three"]);
expect(Select.vm.optionList).toEqual(["one", "two", "three"]);
});
expect(Select.vm.pushedTags).toEqual(['three'])
expect(Select.vm.optionList).toEqual(['one', 'two', 'three'])
})
it("should add a freshly created option/tag to the options list when pushTags is true and filterable is false", async () => {
it('should add a freshly created option/tag to the options list when pushTags is true and filterable is false', async () => {
const Select = selectWithProps({
filterable: false,
pushTags: true,
taggable: true,
multiple: true,
value: ["one"],
options: ["one", "two"]
});
value: ['one'],
options: ['one', 'two'],
})
await selectTag(Select, "three");
expect(Select.vm.pushedTags).toEqual(["three"]);
expect(Select.vm.optionList).toEqual(["one", "two", "three"]);
expect(Select.vm.filteredOptions).toEqual(["one", "two", "three"]);
});
await selectTag(Select, 'three')
expect(Select.vm.pushedTags).toEqual(['three'])
expect(Select.vm.optionList).toEqual(['one', 'two', 'three'])
expect(Select.vm.filteredOptions).toEqual(['one', 'two', 'three'])
})
it("wont add a freshly created option/tag to the options list when pushTags is false", async () => {
it('wont add a freshly created option/tag to the options list when pushTags is false', async () => {
const Select = selectWithProps({
pushTags: false,
taggable: true,
multiple: true,
value: ["one"],
options: ["one", "two"]
});
value: ['one'],
options: ['one', 'two'],
})
await selectTag(Select, "three");
expect(Select.vm.optionList).toEqual(["one", "two"]);
});
await selectTag(Select, 'three')
expect(Select.vm.optionList).toEqual(['one', 'two'])
})
it("wont add a freshly created option/tag to the options list when pushTags is false and filterable is false", async () => {
it('wont add a freshly created option/tag to the options list when pushTags is false and filterable is false', async () => {
const Select = selectWithProps({
filterable: false,
pushTags: false,
taggable: true,
multiple: true,
value: ["one"],
options: ["one", "two"]
});
value: ['one'],
options: ['one', 'two'],
})
await selectTag(Select, "three");
expect(Select.vm.optionList).toEqual(["one", "two"]);
expect(Select.vm.filteredOptions).toEqual(["one", "two"]);
});
await selectTag(Select, 'three')
expect(Select.vm.optionList).toEqual(['one', 'two'])
expect(Select.vm.filteredOptions).toEqual(['one', 'two'])
})
it("should select an existing option if the search string matches a string from options", async () => {
let two = "two";
it('should select an existing option if the search string matches a string from options', async () => {
let two = 'two'
const Select = selectWithProps({
taggable: true,
multiple: true,
options: ["one", two]
});
options: ['one', two],
})
await selectTag(Select, "two");
await selectTag(Select, 'two')
expect(Select.vm.selectedValue).toEqual([two]);
});
expect(Select.vm.selectedValue).toEqual([two])
})
it("should select an existing option if the search string matches an objects label from options", async () => {
let two = { label: "two" };
it('should select an existing option if the search string matches an objects label from options', async () => {
let two = { label: 'two' }
const Select = selectWithProps({
taggable: true,
options: [{ label: "one" }, two]
});
options: [{ label: 'one' }, two],
})
Select.vm.search = "two";
await Select.vm.$nextTick();
Select.vm.search = 'two'
await Select.vm.$nextTick()
searchSubmit(Select);
expect(Select.vm.selectedValue).toEqual([two]);
});
searchSubmit(Select)
expect(Select.vm.selectedValue).toEqual([two])
})
it("should select an existing option if the search string matches an objects label from options when filter-options is false", async () => {
let two = { label: "two" };
it('should select an existing option if the search string matches an objects label from options when filter-options is false', async () => {
let two = { label: 'two' }
const Select = selectWithProps({
taggable: true,
filterable: false,
options: [{ label: "one" }, two]
});
options: [{ label: 'one' }, two],
})
Select.vm.search = "two";
await Select.vm.$nextTick();
Select.vm.search = 'two'
await Select.vm.$nextTick()
searchSubmit(Select);
expect(Select.vm.selectedValue).toEqual([two]);
});
searchSubmit(Select)
expect(Select.vm.selectedValue).toEqual([two])
})
it("should not reset the selected value when the options property changes", () => {
it('should not reset the selected value when the options property changes', () => {
const Select = selectWithProps({
taggable: true,
multiple: true,
value: [{ label: "one" }],
options: [{ label: "one" }]
});
value: [{ label: 'one' }],
options: [{ label: 'one' }],
})
Select.setProps({ options: [{ label: "two" }] });
expect(Select.vm.selectedValue).toEqual([{ label: "one" }]);
});
Select.setProps({ options: [{ label: 'two' }] })
expect(Select.vm.selectedValue).toEqual([{ label: 'one' }])
})
it("should not reset the selected value when the options property changes when filterable is false", () => {
it('should not reset the selected value when the options property changes when filterable is false', () => {
const Select = selectWithProps({
taggable: true,
multiple: true,
filterable: false,
value: [{ label: "one" }],
options: [{ label: "one" }]
});
value: [{ label: 'one' }],
options: [{ label: 'one' }],
})
Select.setProps({ options: [{ label: "two" }] });
expect(Select.vm.selectedValue).toEqual([{ label: "one" }]);
});
Select.setProps({ options: [{ label: 'two' }] })
expect(Select.vm.selectedValue).toEqual([{ label: 'one' }])
})
it("should not allow duplicate tags when using string options", async () => {
const Select = selectWithProps({
taggable: true,
multiple: true
});
await selectTag(Select, "one");
expect(Select.vm.selectedValue).toEqual(["one"]);
expect(Select.vm.search).toEqual("");
await selectTag(Select, "one");
expect(Select.vm.selectedValue).toEqual(["one"]);
expect(Select.vm.search).toEqual("");
});
it("should not allow duplicate tags when using object options", async () => {
it('should not allow duplicate tags when using string options', async () => {
const Select = selectWithProps({
taggable: true,
multiple: true,
options: [{ label: "two" }]
});
const spy = jest.spyOn(Select.vm, 'select');
})
await selectTag(Select, "one");
expect(Select.vm.selectedValue).toEqual([{ label: "one" }]);
expect(spy).lastCalledWith({label: 'one'});
expect(Select.vm.search).toEqual("");
await selectTag(Select, 'one')
expect(Select.vm.selectedValue).toEqual(['one'])
expect(Select.vm.search).toEqual('')
await selectTag(Select, "one");
expect(Select.vm.selectedValue).toEqual([{ label: "one" }]);
expect(Select.vm.search).toEqual("");
});
await selectTag(Select, 'one')
expect(Select.vm.selectedValue).toEqual(['one'])
expect(Select.vm.search).toEqual('')
})
it("will select an existing option on tab", async () => {
it('should not allow duplicate tags when using object options', async () => {
const Select = selectWithProps({
taggable: true,
multiple: true,
options: [{ label: 'two' }],
})
const spy = jest.spyOn(Select.vm, 'select')
await selectTag(Select, 'one')
expect(Select.vm.selectedValue).toEqual([{ label: 'one' }])
expect(spy).lastCalledWith({ label: 'one' })
expect(Select.vm.search).toEqual('')
await selectTag(Select, 'one')
expect(Select.vm.selectedValue).toEqual([{ label: 'one' }])
expect(Select.vm.search).toEqual('')
})
it('will select an existing option on tab', async () => {
const Select = mountDefault({
taggable: true,
selectOnTab: true
});
selectOnTab: true,
})
Select.vm.typeAheadPointer = 0;
Select.find({ ref: "search" }).trigger("keydown.tab");
Select.vm.typeAheadPointer = 0
Select.find({ ref: 'search' }).trigger('keydown.tab')
await Select.vm.$nextTick();
expect(Select.vm.selectedValue).toEqual(['one']);
await Select.vm.$nextTick()
expect(Select.vm.selectedValue).toEqual(['one'])
})
});
})
tests/unit/TypeAhead.spec.js
+33 -33
View File
@@ -1,47 +1,47 @@
import { shallowMount } from "@vue/test-utils";
import VueSelect from "../../src/components/Select";
import { mountDefault, mountWithoutTestUtils } from "../helpers";
import typeAheadMixin from "../../src/mixins/typeAheadPointer";
import Vue from "vue";
import { shallowMount } from '@vue/test-utils'
import VueSelect from '../../src/components/Select'
import { mountDefault, mountWithoutTestUtils } from '../helpers'
import typeAheadMixin from '../../src/mixins/typeAheadPointer'
import Vue from 'vue'
describe("Moving the Typeahead Pointer", () => {
it("should set the pointer to zero when the filteredOptions watcher is called", async () => {
describe('Moving the Typeahead Pointer', () => {
it('should set the pointer to zero when the filteredOptions watcher is called', async () => {
const Select = shallowMount(VueSelect, {
propsData: { options: ["one", "two", "three"] },
sync: false
});
propsData: { options: ['one', 'two', 'three'] },
sync: false,
})
Select.vm.search = "one";
Select.vm.search = 'one'
await Select.vm.$nextTick();
expect(Select.vm.typeAheadPointer).toEqual(0);
});
await Select.vm.$nextTick()
expect(Select.vm.typeAheadPointer).toEqual(0)
})
it("should move the pointer visually up the list on up arrow keyUp", () => {
const Select = mountDefault();
it('should move the pointer visually up the list on up arrow keyUp', () => {
const Select = mountDefault()
Select.vm.typeAheadPointer = 1;
Select.vm.typeAheadPointer = 1
Select.find({ ref: "search" }).trigger("keydown.up");
Select.find({ ref: 'search' }).trigger('keydown.up')
expect(Select.vm.typeAheadPointer).toEqual(0);
});
expect(Select.vm.typeAheadPointer).toEqual(0)
})
it("should move the pointer visually down the list on down arrow keyUp", () => {
const Select = mountDefault();
it('should move the pointer visually down the list on down arrow keyUp', () => {
const Select = mountDefault()
Select.vm.typeAheadPointer = 1;
Select.vm.typeAheadPointer = 1
Select.find({ ref: "search" }).trigger("keydown.down");
Select.find({ ref: 'search' }).trigger('keydown.down')
expect(Select.vm.typeAheadPointer).toEqual(2);
});
expect(Select.vm.typeAheadPointer).toEqual(2)
})
it("should not move the pointer past the end of the list", () => {
const Select = mountDefault();
it('should not move the pointer past the end of the list', () => {
const Select = mountDefault()
Select.vm.typeAheadPointer = 2;
Select.vm.typeAheadDown();
expect(Select.vm.typeAheadPointer).toEqual(2);
});
});
Select.vm.typeAheadPointer = 2
Select.vm.typeAheadDown()
expect(Select.vm.typeAheadPointer).toEqual(2)
})
})
tests/unit/utility/sortAndStringify.spec.js
+9 -8
View File
@@ -1,14 +1,15 @@
import sortAndStringify from '../../../src/utility/sortAndStringify';
import sortAndStringify from '../../../src/utility/sortAndStringify'
test('it will stringify an object', () => {
expect(sortAndStringify({hello: 'world'})).toEqual('{"hello":"world"}');
});
expect(sortAndStringify({ hello: 'world' })).toEqual('{"hello":"world"}')
})
test('it will sort attributes alphabetically', () => {
expect(sortAndStringify({b: 'b', a: 'a'})).toEqual('{"a":"a","b":"b"}');
});
expect(sortAndStringify({ b: 'b', a: 'a' })).toEqual('{"a":"a","b":"b"}')
})
test('comparing two objects with unsorted keys', () => {
expect(sortAndStringify({b: 'b', a: 'a'}))
.toEqual(sortAndStringify({a: 'a', b: 'b'}))
});
expect(sortAndStringify({ b: 'b', a: 'a' })).toEqual(
sortAndStringify({ a: 'a', b: 'b' })
)
})
tests/unit/utility/uniqueId.spec.js
+3 -3
View File
@@ -1,5 +1,5 @@
import uniqueId from '../../../src/utility/uniqueId';
import uniqueId from '../../../src/utility/uniqueId'
test('it generates a unique number', () => {
expect(uniqueId()).not.toEqual(uniqueId());
});
expect(uniqueId()).not.toEqual(uniqueId())
})