✅ test: More fields test cases

src/fields/fieldColor.vue

@@ -1,5 +1,5 @@
 <template lang="jade">
-	input(type="color", v-model="value", :disabled="disabled", :placeholder="schema.placeholder")
+	input(type="color", v-model="value", :disabled="disabled")
 	span.helper {{ value }}
 </template>
 

src/fields/fieldStaticMap.vue

@@ -10,8 +10,8 @@
 
 		computed: {
 			mapLink() {
-				if (this.model.address && this.model.address.geo)
-					return `http://maps.googleapis.com/maps/api/staticmap?center=${this.model.address.geo.lat},${this.model.address.geo.lng}&zoom=8&scale=false&size=800x300&maptype=roadmap&format=png&visual_refresh=true&markers=size:mid%7Ccolor:0xff0000%7Clabel:%7C${this.model.address.city}`;
+				if (this.value && this.value.lat && this.value.lng)
+					return `http://maps.googleapis.com/maps/api/staticmap?center=${this.value.lat},${this.value.lng}&zoom=8&scale=false&size=800x300&maptype=roadmap&format=png&visual_refresh=true&markers=size:mid%7Ccolor:0xff0000`;
 			}
 		}
 	};

test/unit/specs/fields/fieldCheckbox.spec.js

@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { trigger } from "../util";
+import { createVueField, trigger } from "../util";
 
 import Vue from "vue";
 import FieldCheckbox from "src/fields/fieldCheckbox.vue";
@@ -9,22 +9,10 @@ Vue.component("FieldCheckbox", FieldCheckbox);
 let el, vm, field;
 
 function createField(schema = {}, model = null, disabled = false, options) {
-	el = document.createElement("div");		
-	el.innerHTML = `<field-checkbox :schema.sync="schema" :model.sync="model" :disabled="disabled" v-ref:field></field-checkbox>`;
-	vm = new Vue({
-		el: el,
-		data: {
-			schema,
-			model,
-			disabled,
-			options
-		}
-	});
-
-	field = vm.$refs.field;
-	//console.log(el);
+	[ el, vm, field ] = createVueField("fieldCheckbox", schema, model, disabled, options);
 }
 
+
 describe("FieldCheckbox.vue", () => {
 
 	describe("check template", () => {
@@ -42,7 +30,7 @@ describe("FieldCheckbox.vue", () => {
 			input = el.getElementsByTagName("input")[0];
 		});
 
-		it("should contain az input text element", () => {
+		it("should contain a checkbox element", () => {
 			expect(field).to.be.exist;
 			expect(field.$el).to.be.exist;
 

test/unit/specs/fields/fieldColor.spec.js

@@ -0,0 +1,78 @@
+import { expect } from "chai";
+import { createVueField, trigger } from "../util";
+
+import Vue from "vue";
+import FieldColor from "src/fields/fieldColor.vue";
+
+Vue.component("FieldColor", FieldColor);
+
+let el, vm, field;
+
+function createField(schema = {}, model = null, disabled = false, options) {
+	[ el, vm, field ] = createVueField("fieldColor", schema, model, disabled, options);
+}
+
+describe("fieldColor.vue", () => {
+
+	describe("check template", () => {
+		let schema = {
+			type: "color",
+			label: "Color",
+			model: "color"
+		};
+		let model = { color: "#ff8822" };
+		let input;
+
+		before( () => {
+			createField(schema, model, false);
+			input = el.getElementsByTagName("input")[0];
+		});
+
+		it("should contain an input color element", () => {
+			expect(field).to.be.exist;
+			expect(field.$el).to.be.exist;
+
+			expect(input).to.be.defined;
+			expect(input.type).to.be.equal("color");
+			//expect(input.classList.contains("form-control")).to.be.true;
+			expect(input.disabled).to.be.false;	
+		});
+
+		it("should contain the value", (done) => {
+			vm.$nextTick( () => {
+				expect(input.value).to.be.equal("#ff8822");	
+				done();
+			});
+		});
+
+		it("should set disabled", (done) => {
+			field.disabled = true;
+			vm.$nextTick( () => {
+				expect(input.disabled).to.be.true;	
+				done();
+			});
+		});
+
+		it("input value should be the model value after changed", (done) => {
+			model.color = "#ffff00";
+			vm.$nextTick( () => {
+				expect(input.value).to.be.equal("#ffff00");	
+				done();
+			});
+
+		});
+
+		it("model value should be the input value if changed", (done) => {
+			input.value = "#123456";
+			trigger(input, "change");
+
+			vm.$nextTick( () => {
+				expect(model.color).to.be.equal("#123456");	
+				done();
+			});
+
+		});
+
+	});
+
+});

test/unit/specs/fields/fieldEmail.spec.js

@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { trigger } from "../util";
+import { createVueField, trigger } from "../util";
 
 import Vue from "vue";
 import FieldEmail from "src/fields/fieldEmail.vue";
@@ -9,22 +9,10 @@ Vue.component("FieldEmail", FieldEmail);
 let el, vm, field;
 
 function createField(schema = {}, model = null, disabled = false, options) {
-	el = document.createElement("div");		
-	el.innerHTML = `<field-email :schema.sync="schema" :model.sync="model" :disabled="disabled" v-ref:field></field-email>`;
-	vm = new Vue({
-		el: el,
-		data: {
-			schema,
-			model,
-			disabled,
-			options
-		}
-	});
-
-	field = vm.$refs.field;
-	//console.log(el);
+	[ el, vm, field ] = createVueField("fieldEmail", schema, model, disabled, options);
 }
 
+
 describe("fieldEmail.vue", () => {
 
 	describe("check template", () => {
@@ -43,7 +31,7 @@ describe("fieldEmail.vue", () => {
 			input = el.getElementsByTagName("input")[0];
 		});
 
-		it("should contain az input email element", () => {
+		it("should contain an input email element", () => {
 			expect(field).to.be.exist;
 			expect(field.$el).to.be.exist;
 

test/unit/specs/fields/fieldLabel.spec.js

@@ -0,0 +1,56 @@
+import { expect } from "chai";
+import { createVueField, trigger } from "../util";
+
+import Vue from "vue";
+import FieldLabel from "src/fields/fieldLabel.vue";
+
+Vue.component("FieldLabel", FieldLabel);
+
+let el, vm, field;
+
+function createField(schema = {}, model = null, disabled = false, options) {
+	[ el, vm, field ] = createVueField("fieldLabel", schema, model, disabled, options);
+}
+
+describe("fieldLabel.vue", () => {
+
+	describe("check template", () => {
+		let schema = {
+			type: "label",
+			label: "Timestamp",
+			model: "timestamp"
+		};
+		let model = { timestamp: "2 days ago" };
+		let span;
+
+		before( () => {
+			createField(schema, model, false);
+			span = el.getElementsByTagName("span")[0];
+		});
+
+		it("should contain a span element", () => {
+			expect(field).to.be.exist;
+			expect(field.$el).to.be.exist;
+
+			expect(span).to.be.defined;
+		});
+
+		it("should contain the value", (done) => {
+			vm.$nextTick( () => {
+				expect(span.textContent).to.be.equal("2 days ago");	
+				done();
+			});
+		});
+
+		it("input value should be the model value after changed", (done) => {
+			model.timestamp = "Foo bar";
+			vm.$nextTick( () => {
+				expect(span.textContent).to.be.equal("Foo bar");	
+				done();
+			});
+
+		});
+
+	});
+
+});

test/unit/specs/fields/fieldNumber.spec.js

@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { trigger } from "../util";
+import { createVueField, trigger } from "../util";
 
 import Vue from "vue";
 import FieldNumber from "src/fields/fieldNumber.vue";
@@ -9,22 +9,10 @@ Vue.component("FieldNumber", FieldNumber);
 let el, vm, field;
 
 function createField(schema = {}, model = null, disabled = false, options) {
-	el = document.createElement("div");		
-	el.innerHTML = `<field-number :schema.sync="schema" :model.sync="model" :disabled="disabled" v-ref:field></field-number>`;
-	vm = new Vue({
-		el: el,
-		data: {
-			schema,
-			model,
-			disabled,
-			options
-		}
-	});
-
-	field = vm.$refs.field;
-	//console.log(el);
+	[ el, vm, field ] = createVueField("fieldNumber", schema, model, disabled, options);
 }
 
+
 describe("fieldNumber.vue", () => {
 
 	describe("check template", () => {
@@ -45,7 +33,7 @@ describe("fieldNumber.vue", () => {
 			input = el.getElementsByTagName("input")[0];
 		});
 
-		it("should contain az input number element", () => {
+		it("should contain an input number element", () => {
 			expect(field).to.be.exist;
 			expect(field.$el).to.be.exist;
 

test/unit/specs/fields/fieldPassword.spec.js

@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { trigger } from "../util";
+import { createVueField, trigger } from "../util";
 
 import Vue from "vue";
 import FieldPassword from "src/fields/fieldPassword.vue";
@@ -9,22 +9,10 @@ Vue.component("FieldPassword", FieldPassword);
 let el, vm, field;
 
 function createField(schema = {}, model = null, disabled = false, options) {
-	el = document.createElement("div");		
-	el.innerHTML = `<field-password :schema.sync="schema" :model.sync="model" :disabled="disabled" v-ref:field></field-password>`;
-	vm = new Vue({
-		el: el,
-		data: {
-			schema,
-			model,
-			disabled,
-			options
-		}
-	});
-
-	field = vm.$refs.field;
-	//console.log(el);
+	[ el, vm, field ] = createVueField("fieldPassword", schema, model, disabled, options);
 }
 
+
 describe("fieldPassword.vue", () => {
 
 	describe("check template", () => {
@@ -43,7 +31,7 @@ describe("fieldPassword.vue", () => {
 			input = el.getElementsByTagName("input")[0];
 		});
 
-		it("should contain az input password element", () => {
+		it("should contain an input password element", () => {
 			expect(field).to.be.exist;
 			expect(field.$el).to.be.exist;