🐛 test: Fix noUiSlider test #46

Author: icebob

dev/schema.js

@@ -397,6 +397,7 @@ module.exports = {
 			min: 1,
 			max: 10,
 			required: true,
+			disabled: false,
 			sliderOptions: {
 				// connect: "lower",	// "lower", "upper", true, false
 				// margin: 2 //number

dev/utils.js

@@ -18,7 +18,7 @@ module.exports = {
 					} else if (/null/.test(match)) {
 						cls = "null";
 					}
-					return "<span class=" + cls + ">" + match + "</span>";
+					return "<span class='" + cls + "'>" + match + "</span>";
 				});
 			}
 		}

src/fields/fieldNoUiSlider.vue

@@ -4,7 +4,7 @@
 
 <script>
 import abstractField from "./abstractField";
-import { defaults } from "lodash";
+import { isArray, defaults } from "lodash";
 
 export default {
 	mixins: [abstractField],
@@ -17,21 +17,20 @@ export default {
 
 	watch: {
 		model: function() {
-			if (window.noUiSlider) {
+			if (window.noUiSlider && this.slider && this.slider.noUiSlider) {
 				this.slider.noUiSlider.set(this.value);
 			}
 		}
 	},
 
 	methods: {
 		onChange(value) {
-			console.log(value);
-			if (value.length === 1) {
-				// Single value
-				this.value = parseFloat(value[0]);
-			} else {
+			if (isArray(value)) {
 				// Array (range)
 				this.value = [parseFloat(value[0]), parseFloat(value[1])];
+			} else {
+				// Single value
+				this.value = parseFloat(value);
 			}
 		}
 	},
@@ -40,7 +39,7 @@ export default {
 		if (window.noUiSlider) {
 			this.slider = this.$el;
 			window.noUiSlider.create(this.slider, defaults(this.schema.sliderOptions || {}, {
-				start: this.schema.min,
+				start: this.value != null ? this.value : this.schema.min,
 				range: {
 					"min": this.schema.min,
 					"max": this.schema.max

src/fields/fieldSlider.vue

@@ -19,10 +19,13 @@
 					} else
 						valueFrom = this.value;
 
-					$(this.$el).data("ionRangeSlider").update({
-						from: valueFrom,
-						to: valueTo
-					});	
+					let ionRangeSlider = $(this.$el).data("ionRangeSlider");
+					if (ionRangeSlider) {
+						ionRangeSlider.update({
+							from: valueFrom,
+							to: valueTo
+						});	
+					}
 				}
 			}
 		},

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

@@ -49,7 +49,7 @@ describe("fieldNoUiSlider.vue", () => {
 				vm.$nextTick( () => {
 					let handle = input.querySelector(".noUi-handle");
 					expect(handle).to.be.defined;
-					// expect(input.classList.contains("noui-target")).to.be.true;
+					expect(input.classList.contains("noUi-target")).to.be.true;
 					done();
 				});
 			} else {
@@ -58,47 +58,37 @@ describe("fieldNoUiSlider.vue", () => {
 			}
 		});
 
-		it.skip("should contain the value", (done) => {
+		it("should contain the value", (done) => {
 			vm.$nextTick( () => {
 				let origin = input.querySelector(".noUi-origin");				
 				expect(origin.style.left).to.be.within("70%", "90%");
 				done();
 			});
 		});
 
-		before( () => {
-			vm.model = { rating: 10 };
-		});
-
 		it("handle value should be the model value after changed", (done) => {
-			vm.$nextTick( () => {
+			field.model = { rating: 10 };
+			setTimeout( () => {
 				let origin = input.querySelector(".noUi-origin");				
 				expect(origin.style.left).to.be.equal("100%");				
 				done();
-			});
+			}, 100);
 		});
 
-		// before( (done) => {
-		// 	input.querySelectorAll(".noUi-origin")[0].style.left = "0%";
-		// 	vm.$nextTick( () => {
-		// 		done();
-		// 	});
-		// });
-
-		it.skip("model value should be the handle value after changed", (done) => {
-			vm.$nextTick( () => {
-				expect(vm.model.rating).to.be.equal("0");				
+		it("model value should be the handle value after changed", (done) => {
+			// `field.slider.noUiSlider.set(3);`	- It doesn't fired the onChange event 
+			field.onChange(3);
+			setTimeout( () => {
+				expect(vm.model.rating).to.be.equal(3);				
 				done();
-			});
+			}, 100);
 		});
 
-		it.skip("should set disabled", (done) => {			
-			console.log(field.disabled);
-			console.log(input);
-			vm.schema.disabled = true;
+		it("should set disabled", (done) => {			
+			field.disabled = true;
 			vm.$nextTick( () => {
-				console.log(input);
-				expect(input.disabled).to.be.true;
+				// This is not real input, it is a div. So we can check the disabled attribute
+				expect(input.hasAttribute("disabled")).to.be.true;
 				done();
 			});
 		});