test: unit test for fieldSpectrum

Author: icebob

src/fields/fieldDateTime.vue

@@ -48,7 +48,6 @@
 
 		ready() {
 			if ($.fn.datetimepicker) {
-				let self = this;
 				$(this.$el).datetimepicker(defaults(this.schema.dateTimePickerOptions || {}, {
 					format: inputFormat
 				}));

src/fields/fieldSlider.vue

@@ -13,7 +13,7 @@
 		data() {
 			return {
 				slider: null
-			}
+			};
 		},
 
 		watch: {

src/fields/fieldSpectrum.vue

@@ -9,17 +9,30 @@
 	export default {
 		mixins: [ abstractField ],
 
+		data() {
+			return {
+				picker: null
+			};
+		},
+
 		watch: { 
 			model() {
 				if ($.fn.spectrum) {
-					$(this.$el).spectrum("set", this.value);
+					this.picker.spectrum("set", this.value);
 				}
+			},
+
+			disabled(val) {
+				if (val)
+					this.picker.spectrum("disable");
+				else
+					this.picker.spectrum("enable");
 			}
 		},
 
 		ready() {
 			if ($.fn.spectrum) {
-				$(this.$el).spectrum("destroy").spectrum(defaults(this.schema.colorOptions || {}, {
+				this.picker = $(this.$el).spectrum("destroy").spectrum(defaults(this.schema.colorOptions || {}, {
 					showInput: true,
 					showAlpha: true,
 					disabled: this.schema.disabled,
@@ -29,9 +42,16 @@
 						this.value = color ? color.toString() : null;
 					}
 				}));
+				this.picker.spectrum("set", this.value);
+
 			} else {
 				console.warn("Spectrum color library is missing. Please download from http://bgrins.github.io/spectrum/ and load the script and CSS in the HTML head section!");
 			}
+		},
+
+		beforeDestroy() {
+			if (this.picker)
+				this.picker.spectrum("destroy");
 		}
 
 	};

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

@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { createVueField, trigger } from "../util";
+import { createVueField } from "../util";
 import moment from "moment";
 
 import Vue from "vue";

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

@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { createVueField } from "../util";
+import { createVueField, trigger } from "../util";
 
 import Vue from "vue";
 import FieldSpectrum from "src/fields/fieldSpectrum.vue";
@@ -38,10 +38,10 @@ describe("fieldSpectrum.vue", () => {
 			//expect(input.classList.contains("form-control")).to.be.true;
 			expect(input.disabled).to.be.false;	
 		});
-		/* TODO
+
 		it("should contain the value", (done) => {
 			vm.$nextTick( () => {
-				expect(input.value).to.be.equal("#ff8822");	
+				expect(field.picker.spectrum("get").toHexString()).to.be.equal("#ff8822");	
 				done();
 			});
 		});
@@ -50,29 +50,31 @@ describe("fieldSpectrum.vue", () => {
 			field.disabled = true;
 			vm.$nextTick( () => {
 				expect(input.disabled).to.be.true;	
+				expect(el.querySelectorAll(".sp-disabled").length).to.be.equal(1);
+				field.disabled = false;
 				done();
 			});
 		});
 
 		it("input value should be the model value after changed", (done) => {
-			model.color = "#ffff00";
+			field.model = { color: "#ffff00" };
 			vm.$nextTick( () => {
-				expect(input.value).to.be.equal("#ffff00");	
+				expect(field.picker.spectrum("get").toHexString()).to.be.equal("#ffff00");	
 				done();
 			});
 
 		});
 
 		it("model value should be the input value if changed", (done) => {
-			input.value = "#123456";
-			trigger(input, "change");
+			field.picker.spectrum("set", "#123456");
+			trigger(document.querySelector(".sp-input"), "change");
 
 			vm.$nextTick( () => {
-				expect(model.color).to.be.equal("#123456");	
+				expect(field.model.color).to.be.equal("#123456");	
 				done();
 			});
 
-		});*/
+		});
 
 	});