test: unit test for field slider

Author: icebob

src/fields/fieldSlider.vue

@@ -10,6 +10,12 @@
 	export default {
 		mixins: [ abstractField ],
 
+		data() {
+			return {
+				slider: null
+			}
+		},
+
 		watch: {
 			model: function() {
 				if ($.fn.ionRangeSlider) {
@@ -19,9 +25,8 @@
 					} else
 						valueFrom = this.value;
 
-					let ionRangeSlider = $(this.$el).data("ionRangeSlider");
-					if (ionRangeSlider) {
-						ionRangeSlider.update({
+					if (this.slider) {
+						this.slider.update({
 							from: valueFrom,
 							to: valueTo
 						});	
@@ -38,24 +43,31 @@
 				} else
 					valueFrom = this.value;
 
+				let self = this;
 				$(this.$el).ionRangeSlider(defaults(this.schema.sliderOptions || {}, {
 					type: "single",
 					grid: true,
 					hide_min_max: true,
 					from: valueFrom,
 					to: valueTo,
-					onChange: (slider) => {
-						if (this.schema.sliderOptions.type == "double") {
-							this.value = [ slider.from, slider.to ];
+					onChange(slider) {
+						if (self.slider.options.type == "double") {
+							self.value = [ slider.from, slider.to ];
 						} else {
-							this.value = slider.from;
+							self.value = slider.from;
 						}
 					}
 				}));
+				this.slider = $(this.$el).data("ionRangeSlider");
 			}
 			else
 				console.warn("ion.rangeSlider library is missing. Please download from https://github.com/IonDen/ion.rangeSlider and load the script and CSS in the HTML head section!");
-		}		
+		},
+
+		beforeDestroy() {
+			if (this.slider)
+				this.slider.destroy();
+		}	
 	};
 </script>
 

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

@@ -41,14 +41,43 @@ describe("fieldSlider.vue", () => {
 			expect(input.getAttribute("data-disable")).to.be.null;	
 		});
 
+		it("should contain the value", (done) => {
+			vm.$nextTick( () => {
+				let origin = el.querySelector(".irs-slider.single");				
+				expect(origin.style.left).to.be.within("70%", "90%");
+				done();
+			});
+		});
+
 		it("should set disabled", (done) => {
 			field.disabled = true;
 			vm.$nextTick( () => {
 				expect(input.getAttribute("data-disable")).to.be.equal("");	
+				field.disabled = false;
+				done();
+			});
+		});
+
+		it("input value should be the model value after changed", (done) => {
+			field.model = { rating: 3 };
+			vm.$nextTick( () => {
+				let origin = el.querySelector(".irs-slider.single");				
+				expect(origin.style.left).to.be.within("20%", "40%");
 				done();
 			});
+
 		});
 
+		it("model value should be the input value if changed", (done) => {
+			field.slider.update({ from: 6 });
+			field.slider.callOnChange(field.slider); // trigger changes
+			vm.$nextTick( () => {
+				expect(field.model.rating).to.be.equal(6);	
+				done();
+			});
+
+		});		
+
 	});
 
 });