diff --git a/test/unit/specs/fields/fieldVueMultiSelect.spec.js b/test/unit/specs/fields/fieldVueMultiSelect.spec.js index b38957df..dce5fca9 100644 --- a/test/unit/specs/fields/fieldVueMultiSelect.spec.js +++ b/test/unit/specs/fields/fieldVueMultiSelect.spec.js @@ -1,5 +1,5 @@ import { expect } from "chai"; -import { createVueField } from "../util"; +import { createVueField, trigger } from "../util"; import Vue from "vue"; import fieldVueMultiSelect from "src/fields/fieldVueMultiSelect.vue"; @@ -20,7 +20,7 @@ describe("fieldVueMultiSelect.vue", () => { type: "vueMultiSelect", label: "Cities", model: "city", - multiSelect: false, + multiSelect: true, required: false, values: [ "London", @@ -35,7 +35,8 @@ describe("fieldVueMultiSelect.vue", () => { before( () => { createField(schema, model, false); - input = el.getElementsByTagName("select")[0]; + vm.$appendTo(document.body); + input = el.querySelector(".multiselect"); }); it("should contain a select element", () => { @@ -43,8 +44,58 @@ describe("fieldVueMultiSelect.vue", () => { expect(field.$el).to.be.exist; expect(input).to.be.defined; - // expect(input.classList.contains("form-control")).to.be.false; - // expect(input.disabled).to.be.false; + expect(input.classList.contains("form-control")).to.be.false; + expect(input.classList.contains("multiselect--disabled")).to.be.false; + }); + + it("should contain option elements", () => { + let options = input.querySelectorAll("li.multiselect__option"); + console.log(options); + expect(options.length).to.be.equal(schema.values.length); + expect(options[1].querySelector("span").textContent).to.be.equal("Paris"); + expect(options[1].classList.contains("multiselect__option--selected")).to.be.true; + }); + + it("should set disabled", (done) => { + field.disabled = true; + vm.$nextTick( () => { + expect(input.classList.contains("multiselect--disabled")).to.be.true; + field.disabled = false; + done(); + }); + }); + + it("input value should be the model value after changed", (done) => { + model.city = "Rome"; + vm.$nextTick( () => { + let options = input.querySelectorAll("li.multiselect__option"); + expect(options[2].querySelector("span").textContent).to.be.equal("Rome"); + expect(options[2].classList.contains("multiselect__option--selected")).to.be.true; + done(); + }); + }); + + it("input value should be the model value after changed (multiselection)", (done) => { + model.city = ["Paris","Rome"]; + vm.$nextTick( () => { + let options = input.querySelectorAll("li.multiselect__option"); + expect(options[1].querySelector("span").textContent).to.be.equal("Paris"); + expect(options[1].classList.contains("multiselect__option--selected")).to.be.true; + expect(options[2].querySelector("span").textContent).to.be.equal("Rome"); + expect(options[2].classList.contains("multiselect__option--selected")).to.be.true; + done(); + }); + }); + + it("model value should be the input value if changed", (done) => { + let options = input.querySelectorAll("li.multiselect__option"); + trigger(options[2], "mousedown"); + + vm.$nextTick( () => { + expect(model.city[0]).to.be.equal("Paris"); + done(); + }); + }); }); }); \ No newline at end of file