noUiSlider unit test

dev/main.js

@@ -1,7 +1,7 @@
 $(function() {
 	let App = require("./App.vue");
 
-	new Vue({
+	let app = new Vue({
 		el: "body",
 		components: {
 			App

dev/schema.js

@@ -222,9 +222,9 @@ module.exports = {
     			numeralDecimalScale: 2,
     			numeralDecimalMark: '.',
     			// General
-    			blocks: [0, 2, 3, 4],
+    			blocks: [0, 2, 0, 3, 4],
     			delimiter: ' ',
-    			delimiters: ['(', ') ', '-', '-'],
+    			delimiters: ['(', ')', ' ', '-', '-'],
     			// prefix: '(',
     			numericOnly: true,
     			uppercase: false,
@@ -406,6 +406,16 @@ module.exports = {
 				// direction: "ltr", //"ltr", "rtl"
 				// tooltips: false, // false, true, formatter, array[formatter or false]
 				// animate: true,
+				range:{
+					'min': [  0 ],
+					'max': [ 10 ]
+				},
+				pips: {
+					mode: 'count',
+					values: 6,
+					density: 10,
+					stepped: true
+				}
 			},
 			// validator: validators.integer
 		},

dev/utils.js

@@ -4,21 +4,21 @@ module.exports = {
 		prettyJSON: function(json) {
 			if (json) {
 				json = JSON.stringify(json, undefined, 4);
-				json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+				json = json.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 				return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
-					var cls = 'number';
+					var cls = "number";
 					if (/^"/.test(match)) {
 						if (/:$/.test(match)) {
-							cls = 'key';
+							cls = "key";
 						} else {
-							cls = 'string';
+							cls = "string";
 						}
 					} else if (/true|false/.test(match)) {
-						cls = 'boolean';
+						cls = "boolean";
 					} else if (/null/.test(match)) {
-						cls = 'null';
+						cls = "null";
 					}
-					return '<span class="' + cls + '">' + match + '</span>';
+					return "<span class="" + cls + "">" + match + "</span>";
 				});
 			}
 		}

examples/simple/main.js

@@ -1,3 +1,5 @@
+var VueFormGenerator = window.VueFormGenerator;
+
 var vm = new Vue({
 	el: "#app",
 	components: {
@@ -8,21 +10,21 @@ var vm = new Vue({
 		prettyJSON: function(json) {
 			if (json) {
 				json = JSON.stringify(json, undefined, 4);
-				json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+				json = json.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 				return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
-					var cls = 'number';
+					var cls = "number";
 					if (/^"/.test(match)) {
 						if (/:$/.test(match)) {
-							cls = 'key';
+							cls = "key";
 						} else {
-							cls = 'string';
+							cls = "string";
 						}
 					} else if (/true|false/.test(match)) {
-						cls = 'boolean';
+						cls = "boolean";
 					} else if (/null/.test(match)) {
-						cls = 'null';
+						cls = "null";
 					}
-					return '<span class="' + cls + '">' + match + '</span>';
+					return "<span class="" + cls + "">" + match + "</span>";
 				});
 			}
 		}

package.json

@@ -39,20 +39,20 @@
   "author": "Icebob",
   "license": "MIT",
   "devDependencies": {
-    "babel-core": "6.11.4",
-    "babel-loader": "6.2.4",
+    "babel-core": "6.13.2",
+    "babel-loader": "6.2.5",
     "babel-plugin-transform-runtime": "6.12.0",
-    "babel-preset-es2015": "6.9.0",
+    "babel-preset-es2015": "6.13.2",
     "babel-preset-stage-0": "6.5.0",
     "chai": "3.5.0",
     "conventional-changelog-cli": "1.2.0",
     "conventional-github-releaser": "1.1.3",
     "coveralls": "2.11.12",
     "css-loader": "0.23.1",
-    "eslint": "3.2.2",
+    "eslint": "3.3.1",
     "eslint-friendly-formatter": "2.0.6",
     "eslint-loader": "1.5.0",
-    "eslint-plugin-html": "1.5.1",
+    "eslint-plugin-html": "1.5.2",
     "eslint-plugin-vue": "0.1.1",
     "extract-text-webpack-plugin": "1.0.1",
     "fakerator": "0.3.0",
@@ -62,7 +62,7 @@
     "isparta-loader": "2.0.0",
     "jade": "1.11.0",
     "jade-loader": "0.8.0",
-    "karma": "1.1.2",
+    "karma": "1.2.0",
     "karma-chai": "0.1.0",
     "karma-chrome-launcher": "1.0.1",
     "karma-coverage": "1.1.1",
@@ -72,15 +72,15 @@
     "karma-sinon-chai": "1.2.3",
     "karma-sourcemap-loader": "0.3.7",
     "karma-spec-reporter": "0.0.26",
-    "karma-webpack": "1.7.0",
-    "lodash": "4.14.1",
+    "karma-webpack": "1.8.0",
+    "lodash": "4.15.0",
     "lolex": "1.5.1",
     "mocha": "2.5.3",
     "mocha-generators": "1.2.0",
     "mocha-loader": "0.7.1",
     "moment": "2.14.1",
     "node-sass": "3.8.0",
-    "phantomjs-prebuilt": "2.1.10",
+    "phantomjs-prebuilt": "2.1.12",
     "sass-loader": "3.2.0",
     "sinon": "1.17.5",
     "sinon-chai": "2.8.0",
@@ -90,9 +90,9 @@
     "vue-html-loader": "1.2.3",
     "vue-loader": "8.5.3",
     "vue-style-loader": "1.0.0",
-    "webpack": "1.13.1",
+    "webpack": "1.13.2",
     "webpack-dev-middleware": "1.6.1",
-    "webpack-dev-server": "1.14.1",
+    "webpack-dev-server": "1.15.0",
     "webpack-merge": "0.14.1"
   },
   "dependencies": {

src/fields/fieldNoUiSlider.vue

@@ -1,5 +1,5 @@
 <template lang="jade">
-	div.slider
+	div.slider(:disabled="disabled")
 </template>
 
 <script>

test/unit/index.js

@@ -1,10 +1,10 @@
 // require all test files (files that ends with .spec.js)
-var testsContext = require.context('./specs', true, /\.spec$/);
+var testsContext = require.context("./specs", true, /\.spec$/);
 testsContext.keys().forEach(testsContext);
 
 
 // require all src files except main.js for coverage.
 // you can also change this to match only the subset of files that
 // you want coverage for.
-var srcContext = require.context('src', true, /\.(js|vue)$/);
+var srcContext = require.context("src", true, /\.(js|vue)$/);
 srcContext.keys().forEach(srcContext);

test/unit/karma.conf.js

@@ -1,38 +1,38 @@
-var wsConfig = require('./webpack.test.config');
+var wsConfig = require("./webpack.test.config");
 
 module.exports = function(config) {
     var settings = {
         // base path that will be used to resolve all patterns (eg. files, exclude)
-        basePath: '',
+        basePath: "",
 
-        browsers: ['PhantomJS'],
+        browsers: ["PhantomJS"],
 
-        reporters: ['spec', 'coverage'],
+        reporters: ["spec", "coverage"],
 
-        frameworks: ['mocha', 'chai', 'sinon-chai'],
+        frameworks: ["mocha", "chai", "sinon-chai"],
 
         files: [
-            'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js',
-            'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js',
-            'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js',
-            'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js',
-            'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js',
-            'https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.js',
-            'https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js',
-            'https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/js/ion.rangeSlider.js',
-            'https://rawgit.com/monterail/vue-multiselect/master/lib/vue-multiselect.min.js',
-            'https://rawgit.com/nosir/cleave.js/master/dist/cleave.min.js',
-            'https://nosir.github.io/cleave.js/lib/cleave-phone.i18n.js',
-            'https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.js',
-            'https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.4.0/pikaday.min.js',
-
-            './index.js'
+            "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js",
+            "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js",
+            "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js",
+            "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js",
+            "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js",
+            "https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.js",
+            "https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js",
+            "https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/js/ion.rangeSlider.js",
+            "https://rawgit.com/monterail/vue-multiselect/master/lib/vue-multiselect.min.js",
+            "https://rawgit.com/nosir/cleave.js/master/dist/cleave.min.js",
+            "https://nosir.github.io/cleave.js/lib/cleave-phone.i18n.js",
+            "https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.js",
+            "https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.4.0/pikaday.min.js",
+
+            "./index.js"
         ],
 
         exclude: [],
 
         preprocessors: {
-            './index.js': ['webpack', 'sourcemap']
+            "./index.js": ["webpack", "sourcemap"]
         },
 
         webpack: wsConfig,
@@ -52,10 +52,10 @@ module.exports = function(config) {
         singleRun: true,
 
         coverageReporter: {
-            dir: './coverage',
+            dir: "./coverage",
             reporters: [
-                { type: 'lcov', subdir: '.' },
-                { type: 'text-summary' }
+                { type: "lcov", subdir: "." },
+                { type: "text-summary" }
             ]
         }
     }

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

@@ -36,7 +36,71 @@ describe("fieldNoUiSlider.vue", () => {
 			expect(field.$el).to.be.exist;
 
 			expect(input).to.be.defined;
-			expect(input.classList.contains("slider")).to.be.true;			
+			expect(input.classList.contains("slider")).to.be.true;
+			expect(input.disabled).to.be.undefined;
+		});
+
+		before( () => {
+			vm.$appendTo(document.body);
+		});
+
+		it("should contain an handle element", (done) => {
+			if (window.noUiSlider) {
+				vm.$nextTick( () => {
+					let handle = input.querySelector(".noUi-handle");
+					expect(handle).to.be.defined;
+					// expect(input.classList.contains("noui-target")).to.be.true;
+					done();
+				});
+			} else {
+				// eslint-disable-next-line
+				throw new Exception("Library is not loaded");
+			}
+		});
+
+		it.skip("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( () => {
+				let origin = input.querySelector(".noUi-origin");				
+				expect(origin.style.left).to.be.equal("100%");				
+				done();
+			});
+		});
+
+		// 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");				
+				done();
+			});
+		});
+
+		it.skip("should set disabled", (done) => {			
+			console.log(field.disabled);
+			console.log(input);
+			vm.schema.disabled = true;
+			vm.$nextTick( () => {
+				console.log(input);
+				expect(input.disabled).to.be.true;
+				done();
+			});
 		});
 	});
 });