Progress on test

Author: Lionel Bijaoui

package-lock.json

@@ -96,6 +96,7 @@
 		"sass-loader": "6.0.6",
 		"sinon": "4.4.2",
 		"sinon-chai": "2.14.0",
+		"spectrum-colorpicker": "^1.8.0",
 		"stats-webpack-plugin": "0.6.2",
 		"url-loader": "0.6.2",
 		"vue": "2.5.13",

package.json

@@ -741,6 +741,7 @@ describe("VueFormGenerator.vue", () => {
 
 		before(() => {
 			createFormGenerator({ schema, model, options: { validateAfterLoad: true } });
+			wrapper.update();
 		});
 
 		it("should be validation error at mounted()", () => {

test/unit/specs/VueFormGenerator.spec.js

@@ -1,101 +1,106 @@
-import { createVueField, trigger, checkAttribute } from "../util";
+import { mount, createLocalVue } from "@vue/test-utils";
+import { checkAttribute2 } from "../util";
 
-import Vue from "vue";
 import FieldSelectEx from "src/fields/optional/fieldSelectEx.vue";
 
-Vue.component("FieldSelectEx", FieldSelectEx);
+const localVue = createLocalVue();
+let wrapper;
+let input;
 
-let el, vm, field;
+function createField2(data, methods) {
+	const _wrapper = mount(FieldSelectEx, {
+		localVue,
+		propsData: data,
+		methods: methods
+	});
+
+	wrapper = _wrapper;
+	input = wrapper.find("select");
 
-function createField(test, schema = {}, model = null, disabled = false, options) {
-	[el, vm, field] = createVueField(test, "fieldSelectEx", schema, model, disabled, options);
+	return _wrapper;
 }
 
-describe.skip("fieldSelectEx.vue", function() {
+describe("fieldSelectEx.vue", () => {
 	describe("check template", () => {
 		let schema = {
 			type: "selectEx",
 			label: "Cities",
 			model: "city",
+			disabled: false,
 			multiSelect: false,
 			required: false,
+			inputName: "",
 			values: ["London", "Paris", "Rome", "Berlin"]
 		};
 		let model = { city: "Paris" };
-		let input;
 
 		before(() => {
-			createField(this, schema, model, false);
-			input = el.getElementsByTagName("select")[0];
+			createField2({ schema, model, disabled: false });
 		});
 
 		it("should contain a select element", () => {
-			expect(field).to.be.exist;
-			expect(field.$el).to.be.exist;
-
-			expect(input).to.be.defined;
+			expect(wrapper.exists()).to.be.true;
+			expect(input.exists()).to.be.true;
 		});
 
 		it("should contain option elements", () => {
-			let options = input.querySelectorAll("option");
-			expect(options.length).to.be.equal(4 + 1); // +1 for <non selected>
+			let options = input.findAll("option");
 
-			expect(options[2].value).to.be.equal("Paris");
-			expect(options[2].textContent).to.be.equal("Paris");
-			expect(options[2].selected).to.be.true;
+			expect(options.length).to.be.equal(4 + 1); // +1 for <non selected>
+			expect(options.at(2).element.value).to.be.equal("Paris");
+			expect(options.at(2).text()).to.be.equal("Paris");
+			expect(options.at(2).element.selected).to.be.true;
 		});
 
 		it("should contain a <non selected> element", () => {
-			let options = input.querySelectorAll("option");
-			expect(options[0].disabled).to.be.false;
-			//expect(options[0].textContent).to.be.equal("<Not selected>");
+			let options = input.findAll("option");
+
+			expect(options.at(0).attributes().disabled).to.be.undefined;
+			// expect(options.at(0).text()).to.be.equal("<Not selected>");
 		});
 
-		it("should contain the value", done => {
-			vm.$nextTick(() => {
-				expect(input.value).to.be.equal("Paris");
-				done();
-			});
+		it("should contain the value", () => {
+			expect(input.element.value).to.be.equal("Paris");
 		});
 
 		describe("check optional attribute", () => {
 			let attributes = ["disabled", "multiSelect", "inputName"];
 
-			attributes.forEach(function(name) {
-				it("should set " + name, function(done) {
-					checkAttribute(name, vm, input, field, schema, done);
+			attributes.forEach(name => {
+				it("should set " + name, () => {
+					checkAttribute2(name, wrapper, schema, "select");
 				});
 			});
 		});
 
-		it("input value should be the model value after changed", done => {
+		it("input value should be the model value after changed", () => {
 			model.city = "Rome";
-			vm.$nextTick(() => {
-				expect(input.value).to.be.equal("Rome");
-				done();
-			});
+			wrapper.update();
+
+			expect(input.element.value).to.be.equal("Rome");
 		});
 
-		it("model value should be the input value if changed", done => {
-			input.value = "London";
-			trigger(input, "change");
+		it("model value should be the input value if changed", () => {
+			input.element.value = "London";
+			input.trigger("change");
 
-			vm.$nextTick(() => {
-				expect(model.city).to.be.equal("London");
-				done();
-			});
+			expect(model.city).to.be.equal("London");
 		});
 
-		it("should not be multiple", done => {
+		it.skip("should not be multiple", () => {
 			model.city = []; // For multiselect need empty array
 			schema.multiSelect = true;
-			vm.$nextTick(() => {
-				expect(input.multiple).to.be.true;
-				let options = input.querySelectorAll("option");
-				expect(options.length).to.be.equal(4); // no <non selected>
+			wrapper.update();
 
-				done();
-			});
+			expect(input.attributes().multiple).to.equal("multiple");
+			let options = input.findAll("option");
+			console.log(options.at(0).html());
+			console.log(options.at(1).html());
+			console.log(options.at(2).html());
+			console.log(options.at(3).html());
+			console.log(options.at(4).html());
+
+			expect(options.length).to.be.equal(4); // no <non selected>
 		});
 	});
 
@@ -112,46 +117,37 @@ describe.skip("fieldSelectEx.vue", function() {
 			]
 		};
 		let model = { city: [2] };
-		let input;
 
 		before(() => {
-			createField(this, schema, model, false);
-			input = el.getElementsByTagName("select")[0];
+			createField2({ schema, model, disabled: false });
 		});
 
-		it("should contain option elements", () => {
-			let options = input.querySelectorAll("option");
-			expect(options.length).to.be.equal(4 + 1); // +1 for <non selected>
+		it.skip("should contain option elements", () => {
+			let options = input.findAll("option");
 
-			expect(options[2].value).to.be.equal("2");
-			expect(options[2].textContent).to.be.equal("Paris");
-			expect(options[2].selected).to.be.true;
-			expect(options[1].selected).to.be.false;
+			expect(options.length).to.be.equal(4 + 1); // +1 for <non selected>
+			expect(options.at(2).element.value).to.be.equal("2");
+			expect(options.at(2).text()).to.be.equal("Paris");
+			expect(options.at(2).element.selected).to.be.true;
+			expect(options.at(1).element.selected).to.be.false;
 		});
 
-		it("should contain the value", done => {
-			vm.$nextTick(() => {
-				expect(input.value).to.be.equal("2");
-				done();
-			});
+		it.skip("should contain the value", () => {
+			expect(input.element.value).to.be.equal("2");
 		});
 
-		it("input value should be the model value after changed", done => {
+		it("input value should be the model value after changed", () => {
 			model.city = 3;
-			vm.$nextTick(() => {
-				expect(input.value).to.be.equal("3");
-				done();
-			});
+			wrapper.update();
+
+			expect(input.element.value).to.be.equal("3");
 		});
 
-		it("model value should be the input value if changed", done => {
-			input.value = "4";
-			trigger(input, "change");
+		it("model value should be the input value if changed", () => {
+			input.element.value = "4";
+			input.trigger("change");
 
-			vm.$nextTick(() => {
-				expect(model.city).to.be.equal(4);
-				done();
-			});
+			expect(model.city).to.be.equal(4);
 		});
 	});
 
@@ -170,36 +166,26 @@ describe.skip("fieldSelectEx.vue", function() {
 			}
 		};
 		let model = { city: [2] };
-		let input;
 
 		before(() => {
-			createField(this, schema, model, false);
-			input = el.getElementsByTagName("select")[0];
+			createField2({ schema, model, disabled: false });
+			wrapper.update();
 		});
 
-		it("should contain the value", done => {
-			vm.$nextTick(() => {
-				expect(input.value).to.be.equal("2");
-				done();
-			});
+		it.skip("should contain the value", () => {
+			expect(input.element.value).to.be.equal("2");
 		});
 
-		it("input value should be the model value after changed", done => {
+		it("input value should be the model value after changed", () => {
 			model.city = 3;
-			vm.$nextTick(() => {
-				expect(input.value).to.be.equal("3");
-				done();
-			});
+			wrapper.update();
+			expect(input.element.value).to.be.equal("3");
 		});
 
-		it("model value should be the input value if changed", done => {
-			input.value = "4";
-			trigger(input, "change");
-
-			vm.$nextTick(() => {
-				expect(model.city).to.be.equal(4);
-				done();
-			});
+		it("model value should be the input value if changed", () => {
+			input.element.value = "4";
+			input.trigger("change");
+			expect(model.city).to.be.equal(4);
 		});
 	});
 });