mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-19 09:50:33 +03:00
refactor: apply eslint fixes (#1469)
This commit is contained in:
Jeff Sagal
+224
-205
@@ -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']])
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user