mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-10 07:52:23 +03:00
Code Activity

Complete deselecting spec

Browse Source
This commit is contained in:
Jeff
2018-08-12 13:05:26 -07:00
parent 8e22400ce4
commit 4b5601b572
1 changed files with 78 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/unit/Deselecting.spec.js
+78 -108
View File
@@ -1,117 +1,87 @@
import { shallowMount } from "@vue/test-utils";
import VueSelect from "../../src/components/Select";
import { selectWithProps } from "../helpers";
describe("Removing values", () => {
it("can remove the given tag when its close icon is clicked", () => {
const Select = shallowMount(VueSelect, {
propsData: { multiple: true, value: ["foo"] }
});
const Select = selectWithProps({ multiple: true, value: ["foo"] });
Select.find(".close").trigger("click");
expect(Select.vm.mutableValue).toEqual([]);
});
//
// it("should not remove tag when close icon is clicked and component is disabled", done => {
// const vm = new Vue({
// template:
// '<div><v-select disabled multiple :options="options" v-model="value"></v-select></div>',
// components: { vSelect },
// data: {
// value: ["one"],
// options: ["one", "two", "three"]
// }
// }).$mount();
// vm.$children[0].$refs.toggle.querySelector(".close").click();
// Vue.nextTick(() => {
// expect(vm.$children[0].mutableValue).toEqual(["one"]);
// done();
// });
// });
//
// it("should remove the last item in the value array on delete keypress when multiple is true", () => {
// const vm = new Vue({
// template:
// '<div><v-select :options="options" v-model="value" :multiple="true"></v-select></div>',
// components: { vSelect },
// data: {
// value: ["one", "two"],
// options: ["one", "two", "three"]
// }
// }).$mount();
// vm.$children[0].maybeDeleteValue();
// Vue.nextTick(() => {
// expect(vm.$children[0].mutableValue).toEqual(["one"]);
// });
// });
//
// it("should set value to null on delete keypress when multiple is false", () => {
// const vm = new Vue({
// template:
// '<div><v-select :options="options" v-model="value"></v-select></div>',
// components: { vSelect },
// data: {
// value: "one",
// options: ["one", "two", "three"]
// }
// }).$mount();
// vm.$children[0].maybeDeleteValue();
// Vue.nextTick(() => {
// expect(vm.$children[0].mutableValue).toEqual(null);
// });
// });
// describe("Clear button", () => {
// it("should be displayed on single select when value is selected", () => {
// const VueSelect = Vue.extend(vSelect);
// const vm = new VueSelect({
// propsData: {
// options: ["foo", "bar"],
// value: "foo"
// }
// }).$mount();
//
// expect(vm.showClearButton).toEqual(true);
// });
//
// it("should not be displayed on multiple select", () => {
// const VueSelect = Vue.extend(vSelect);
// const vm = new VueSelect({
// propsData: {
// options: ["foo", "bar"],
// value: "foo",
// multiple: true
// }
// }).$mount();
//
// expect(vm.showClearButton).toEqual(false);
// });
//
// it("should remove selected value when clicked", () => {
// const VueSelect = Vue.extend(vSelect);
// const vm = new VueSelect({
// propsData: {
// options: ["foo", "bar"],
// value: "foo"
// }
// }).$mount();
//
// expect(vm.mutableValue).toEqual("foo");
// vm.$el.querySelector("button.clear").click();
// expect(vm.mutableValue).toEqual(null);
// });
//
// it("should be disabled when component is disabled", () => {
// const VueSelect = Vue.extend(vSelect);
// const vm = new VueSelect({
// propsData: {
// options: ["foo", "bar"],
// value: "foo",
// disabled: true
// }
// }).$mount();
//
// const buttonEl = vm.$el.querySelector("button.clear");
// expect(buttonEl.disabled).toEqual(true);
// });
// });
it("should not remove tag when close icon is clicked and component is disabled", () => {
const Select = selectWithProps({
value: ["one"],
options: ["one", "two", "three"],
multiple: true,
disabled: true
});
Select.find(".close").trigger("click");
expect(Select.vm.mutableValue).toEqual(["one"]);
});
it("should remove the last item in the value array on delete keypress when multiple is true", () => {
const Select = selectWithProps({
multiple: true,
value: ["one", "two"],
options: ["one", "two", "three"]
});
Select.vm.maybeDeleteValue();
expect(Select.vm.mutableValue).toEqual(["one"]);
});
it("should set value to null on delete keypress when multiple is false", () => {
const Select = selectWithProps({
value: "one",
options: ["one", "two", "three"]
});
Select.vm.maybeDeleteValue();
expect(Select.vm.mutableValue).toEqual(null);
});
describe("Clear button", () => {
it("should be displayed on single select when value is selected", () => {
const Select = selectWithProps({
options: ["foo", "bar"],
value: "foo"
});
expect(Select.vm.showClearButton).toEqual(true);
});
it("should not be displayed on multiple select", () => {
const Select = selectWithProps({
options: ["foo", "bar"],
value: "foo",
multiple: true
});
expect(Select.vm.showClearButton).toEqual(false);
});
it("should remove selected value when clicked", () => {
const Select = selectWithProps({
options: ["foo", "bar"],
value: "foo"
});
expect(Select.vm.mutableValue).toEqual("foo");
Select.find("button.clear").trigger("click");
expect(Select.vm.mutableValue).toEqual(null);
});
it("should be disabled when component is disabled", () => {
const Select = selectWithProps({
options: ["foo", "bar"],
value: "foo",
disabled: true
});
expect(Select.find("button.clear").attributes().disabled).toEqual(
"disabled"
);
});
});
});