test: add easy npm run dev task

I struggled a little bit in contributing to the library. So I added some stack to easily provide people an `npm run dev` task that will: - watch src/* and rebuild - serve tests/slider.html and automatically reload if: a test changes, a build file change I am sure you will love it, give it a try! I also added: - blanket as a dependency - simulant to simulate click events (less code, IE8 compatible)
leongersen · Sep 9, 2015 · 70f798e · 70f798e
1 parent 5208910
commit 70f798e
Show file tree

Hide file tree

Showing 16 changed files with 51 additions and 72 deletions.
diff --git a/README.md b/README.md
@@ -62,6 +62,13 @@ Building
 npm run build
 ```
 
+Testing
+-------
+
+```sh
+npm run dev
+```
+
 Version numbering
 ------------------------------
 Version numbering follows the 'Semantic versioning' style.

diff --git a/package.json b/package.json
@@ -4,17 +4,24 @@
   "main": "distribute/nouislider",
   "license": "WTFPL",
   "scripts": {
-    "build": "grunt create"
+    "build": "grunt create",
+    "watch:js": "onchange 'src/js/*.js' 'src/*.css' -- npm run build",
+    "serve-tests": "browser-sync start --server . --startPath tests/slider.html --files 'distribute/, tests/*.js'",
+    "dev": "./scripts/dev.sh"
   },
   "devDependencies": {
+    "blanket": "1.1.7",
+    "browser-sync": "2.9.3",
     "grunt": "~0.4.1",
     "grunt-cli": "0.1.13",
     "grunt-contrib-compress": "^0.11.0",
     "grunt-contrib-concat": "^0.5.0",
     "grunt-contrib-copy": "^0.5.0",
     "grunt-contrib-cssmin": "^0.10.0",
     "grunt-contrib-jshint": "^0.10.0",
-    "grunt-contrib-uglify": "^0.5.1"
+    "grunt-contrib-uglify": "^0.5.1",
+    "onchange": "2.0.0",
+    "simulant": "0.1.5"
   },
   "repository": {
     "type": "git",

diff --git a/scripts/dev.sh b/scripts/dev.sh
@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+
+set -e # exit when error
+
+# & wait added so that if any of the command fails
+# you can still CTRL+C the whole thing (no phantom process)
+npm run watch:js & npm run serve-tests & wait
diff --git a/tests/blanket.min.js b/tests/blanket.min.js
diff --git a/tests/slider.html b/tests/slider.html
@@ -15,9 +15,11 @@
 	</style>
 
 	<link href="../distribute/jquery.nouislider.min.css" rel="stylesheet">
+	<link href="../distribute/nouislider.min.css" rel="stylesheet">
 	<link href="http://code.jquery.com/qunit/qunit-1.18.0.css" rel="stylesheet">
 
 	<script src="http://code.jquery.com/qunit/qunit-1.18.0.js"></script>
+	<script src="../node_modules/simulant/dist/simulant.js"></script>
 	<script src="../distribute/nouislider.js" data-cover></script>
 
 
@@ -57,6 +59,8 @@
 
 	<script src="addon_pips.js"></script>
 
-	<script src="blanket.min.js"></script>
-
+	<!-- No blanket.js support in IE < 9 -->
+	<!--[if gt IE 8]><!-->
+	<script src="../node_modules/blanket/dist/qunit/blanket.min.js"></script>
+	<!--<![endif]-->
 </body>
diff --git a/tests/slider_binding.js b/tests/slider_binding.js
@@ -5,7 +5,7 @@
 
 		Q.innerHTML = '<div class="slider"></div>';
 
-		var sliders = Q.getElementsByClassName('slider'),
+		var sliders = Q.querySelectorAll('.slider'),
 			slider = sliders[0];
 
 		noUiSlider.create(slider, {
@@ -64,18 +64,11 @@
 			};
 		}
 
-		var origin = slider.getElementsByClassName('noUi-origin')[1],
-			clickEvent = new MouseEvent('mousedown', {
-				bubbles: true,
-				cancelable: true,
-				view: window,
-				buttons: 1,
-				clientX: offset(slider).left + 100,
-				clientY: offset(slider).top + 8
-			});
-
-		console.log(offset(slider));
-		origin.dispatchEvent(clickEvent);
+		simulant.fire( slider.querySelectorAll('.noUi-origin')[1], 'mousedown', {
+			button: 1, // middle-click
+			clientX: offset(slider).left + 100,
+			clientY: offset(slider).top + 8
+		});
 
 		slider.noUiSlider.off('.namespace');
 

diff --git a/tests/slider_errors.js b/tests/slider_errors.js
@@ -3,7 +3,7 @@
 
 		Q.innerHTML = '<div class="slider"></div>';
 
-		var sliders = Q.getElementsByClassName('slider'),
+		var sliders = Q.querySelectorAll('.slider'),
 			slider = sliders[0];
 
 		assert.throws(function(){

diff --git a/tests/slider_limit.js b/tests/slider_limit.js
@@ -12,7 +12,7 @@
 			}
 		};
 
-		var slider = Q.getElementsByClassName('slider')[0];
+		var slider = Q.querySelector('.slider');
 
 		noUiSlider.create(slider, settings);
 

diff --git a/tests/slider_non-linear-rtl.js b/tests/slider_non-linear-rtl.js
@@ -6,8 +6,8 @@
 			<div class="sliderLTR"></div>\
 		';
 
-		var sliderRTL = Q.getElementsByClassName('sliderRTL')[0];
-		var sliderLTR = Q.getElementsByClassName('sliderLTR')[0];
+		var sliderRTL = Q.querySelector('.sliderRTL');
+		var sliderLTR = Q.querySelector('.sliderLTR');
 
 		noUiSlider.create(sliderRTL, {
 			range: {

diff --git a/tests/slider_rtl.js b/tests/slider_rtl.js
@@ -3,7 +3,7 @@
 
 		Q.innerHTML = '<div class="slider"></div>';
 
-		var slider = Q.getElementsByClassName('slider')[0];
+		var slider = Q.querySelector('.slider');
 
 		noUiSlider.create(slider, {
 			range: { min: 0.201, max: 1 },

diff --git a/tests/slider_rtl2.js b/tests/slider_rtl2.js
@@ -3,7 +3,7 @@
 
 		Q.innerHTML = '<div class="slider"></div>';
 
-		var slider = Q.getElementsByClassName('slider')[0];
+		var slider = Q.querySelector('.slider');
 
 		noUiSlider.create(slider, {
 			range: {

diff --git a/tests/slider_setting-getting.js b/tests/slider_setting-getting.js
@@ -3,7 +3,7 @@
 
 		Q.innerHTML = '<div class="slider"></div>';
 
-		var slider = Q.getElementsByClassName('slider')[0];
+		var slider = Q.querySelector('.slider');
 
 		noUiSlider.create(slider, {
 			range: { min: -30, max: 1080 },

diff --git a/tests/slider_step.js b/tests/slider_step.js
@@ -3,7 +3,7 @@
 
 		Q.innerHTML = '<div class="slider"></div>';
 
-		var slider = Q.getElementsByClassName('slider')[0];
+		var slider = Q.querySelector('.slider');
 
 		noUiSlider.create(slider, {
 			range: { min: 3, max: 106 },

diff --git a/tests/slider_unordered.js b/tests/slider_unordered.js
@@ -3,7 +3,7 @@
 
 		Q.innerHTML = '<div class="slider"></div>';
 
-		var slider = Q.getElementsByClassName('slider')[0];
+		var slider = Q.querySelector('.slider');
 
 		noUiSlider.create(slider, {
 			start: [ 12 ],
@@ -18,13 +18,13 @@
 
 		slider.noUiSlider.set(11);
 		equal(slider.noUiSlider.get(), 11);
-		equal(slider.getElementsByClassName('noUi-origin')[0].style.left, '0%');
+		equal(slider.querySelector('.noUi-origin').style.left, '0%');
 
 		slider.noUiSlider.set(12);
 		equal(slider.noUiSlider.get(), 12);
-		equal(slider.getElementsByClassName('noUi-origin')[0].style.left, '10%');
+		equal(slider.querySelector('.noUi-origin').style.left, '10%');
 
 		slider.noUiSlider.set(16);
 		equal(slider.noUiSlider.get(), 16);
-		equal(slider.getElementsByClassName('noUi-origin')[0].style.left, '50%');
+		equal(slider.querySelector('.noUi-origin').style.left, '50%');
 	});
diff --git a/tests/slider_update.js b/tests/slider_update.js
@@ -5,7 +5,7 @@
 			<div class="slider"></div>\
 			<input class="input">';
 
-		var slider = Q.getElementsByClassName('slider')[0];
+		var slider = Q.querySelector('.slider');
 
 		noUiSlider.create(slider, {
 			range: { min: 20, max: 140 },
@@ -35,14 +35,14 @@
 		slider.noUiSlider.set(40);
 		assert.deepEqual(slider.noUiSlider.get(), ['40', '60']);
 
-		equal ( slider.getElementsByClassName('noUi-connect').length, 0, 'Slider uses no connection' );
+		equal ( slider.querySelectorAll('.noUi-connect').length, 0, 'Slider uses no connection' );
 
 		settings.connect = true;
 		slider.noUiSlider.destroy();
 
 		noUiSlider.create(slider, settings);
 
-		equal ( slider.getElementsByClassName('noUi-connect').length, 1, 'Slider now connects' );
+		equal ( slider.querySelectorAll('.noUi-connect').length, 1, 'Slider now connects' );
 
 		assert.deepEqual(slider.noUiSlider.get(), ['30', '60'], 'Value was unchanged');
 

diff --git a/tests/slider_values.js b/tests/slider_values.js
@@ -3,7 +3,7 @@
 
 		Q.innerHTML = '<div class="slider"></div>';
 
-		var slider = Q.getElementsByClassName('slider')[0];
+		var slider = Q.querySelector('.slider');
 
 		noUiSlider.create(slider, {
 			start: [ 50, 100 ],