From 4b5601b5723dcb00d0a1da0a30a4b7f1bafb5534 Mon Sep 17 00:00:00 2001 From: Jeff Date: Sun, 12 Aug 2018 13:05:26 -0700 Subject: [PATCH] Complete deselecting spec --- tests/unit/Deselecting.spec.js | 186 ++++++++++++++------------------- 1 file changed, 78 insertions(+), 108 deletions(-) diff --git a/tests/unit/Deselecting.spec.js b/tests/unit/Deselecting.spec.js index 40783b9..1ffebec 100644 --- a/tests/unit/Deselecting.spec.js +++ b/tests/unit/Deselecting.spec.js @@ -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: - // '
', - // 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: - // '
', - // 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: - // '
', - // 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" + ); + }); + }); });