import { expect } from "chai";
import { createVueField, trigger } from "../util";

import Vue from "vue";
import fieldVueMultiSelect from "src/fields/fieldVueMultiSelect.vue";

Vue.component("fieldVueMultiSelect", fieldVueMultiSelect);

// eslint-disable-next-line
let el, vm, field;

function createField(schema = {}, model = null, disabled = false, options) {
	[ el, vm, field ] = createVueField("fieldVueMultiSelect", schema, model, disabled, options);
}

describe("fieldVueMultiSelect.vue", () => {

	describe("check template", () => {
		let schema = {
			type: "vueMultiSelect",
			label: "Cities",
			model: "city",
			multiSelect: true,
			required: false,
			values: [
				"London",
				"Paris",
				"Rome",
				"Berlin"
			],
			selectOptions: {}
		};
		let model = { city: "Paris" };
		let input;

		before( () => {
			createField(schema, model, false);
			vm.$appendTo(document.body);
			input = el.querySelector(".multiselect");
		});

		it("should contain a select element", () => {
			expect(field).to.be.exist;
			expect(field.$el).to.be.exist;

			expect(input).to.be.defined;
			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();
			});

		});
	});
});
@@ -1354,33 +1354,11 @@
 n%22);
-%0A
 %09%09%09
-console.log(options);
 %0A%09%09%09
@@ -1918,32 +1918,126 @@
 xtTick( () =%3E %7B%0A
+%09%09%09%09expect(input.querySelectorAll(%22li.multiselect__option--selected%22).length).to.be.equal(1);%0A
 %09%09%09%09let options 
@@ -2427,24 +2427,118 @@
 ck( () =%3E %7B%0A
+%09%09%09%09expect(input.querySelectorAll(%22li.multiselect__option--selected%22).length).to.be.equal(2);%0A
 %09%09%09%09let opti
@@ -3132,16 +3132,16 @@
 %09%09%09%0A%09%09%09%0A
-
 %09%09%09vm.$n
@@ -3149,32 +3149,78 @@
 xtTick( () =%3E %7B%0A
+%09%09%09%09expect(model.city.length).to.be.equal(1);%0A
 %09%09%09%09expect(model

improve testing of VueMultiSelect