Updated karma config to use phantomJS, removed features that break in old browsers.

Author: STRML

.travis.yml

@@ -1,6 +1,7 @@
 language: node_js
 node_js:
   - "0.10"
+  - "0.12"
 before_script:
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start

Makefile

@@ -29,7 +29,7 @@ dist/%.js: $(BIN)
 	@$(BIN)/webpack --devtool source-map
 
 test: $(BIN)
-	@$(BIN)/karma start --browsers Firefox --single-run
+	@$(BIN)/karma start --single-run
 
 dev: $(BIN)
 	script/build-watch
@@ -52,15 +52,15 @@ define release
 	git tag "v$$NEXT_VERSION" -m "release v$$NEXT_VERSION"
 endef
 
-release-patch: test build
+release-patch: test clean build
 	@$(call release,patch)
 
-release-minor: test build
+release-minor: test clean build
 	@$(call release,minor)
 
-release-major: test build
+release-major: test clean build
 	@$(call release,major)
 
-publish: build
+publish: clean build
 	git push --tags origin HEAD:master
 	npm publish

karma.conf.js

@@ -1,62 +1,62 @@
 module.exports = function(config) {
-	config.set({
+  config.set({
 
-		basePath: '',
+    basePath: '',
 
-		frameworks: ['jasmine'],
+    frameworks: ['jasmine'],
 
-		files: [
-			'specs/main.js'
-		],
+    files: [
+      'specs/main.js'
+    ],
 
-		exclude: [
-		],
+    exclude: [
+    ],
 
-		preprocessors: {
-			'specs/main.js': ['webpack']
-		},
+    preprocessors: {
+      'specs/main.js': ['webpack']
+    },
 
-		webpack: {
-			cache: true,
-			module: {
-				loaders: [
-					{
-						test: /\.(?:js|es).?$/,
-						loader: 'babel-loader',
-						exclude: /(node_modules)/
-					}
-				]
-			},
-			resolve: {
-				extensions: ["", ".webpack.js", ".web.js", ".js", ".es6"]
-			}
-		},
+    webpack: {
+      cache: true,
+      module: {
+        loaders: [
+          {
+            test: /\.(?:js|es).?$/,
+            loader: 'babel-loader',
+            exclude: /(node_modules)/
+          }
+        ]
+      },
+      resolve: {
+        extensions: ["", ".webpack.js", ".web.js", ".js", ".es6"]
+      }
+    },
 
-		webpackServer: {
-			stats: {
-				colors: true
-			}
-		},
+    webpackServer: {
+      stats: {
+        colors: true
+      }
+    },
 
-		reporters: ['progress'],
+    reporters: ['progress'],
 
-		port: 9876,
+    port: 9876,
 
-		colors: true,
+    colors: true,
 
-		logLevel: config.LOG_INFO,
+    logLevel: config.LOG_INFO,
 
-		autoWatch: false,
+    autoWatch: false,
 
-		browsers: ['Chrome'],
+    browsers: ['PhantomJS', 'Firefox'],
 
-		singleRun: false,
+    singleRun: false,
 
-		plugins: [
-			require('karma-jasmine'),
-			require('karma-chrome-launcher'),
-			require('karma-firefox-launcher'),
-			require('karma-webpack')
-		]
-	});
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-phantomjs-launcher'),
+      require('karma-firefox-launcher'),
+      require('karma-webpack')
+    ]
+  });
 };

lib/utils/domFns.es6

@@ -1,4 +1,4 @@
-import {findInArray, isFunction, int} from './shims';
+import {findInArray, isFunction, isNum, int} from './shims';
 import browserPrefix from './getPrefix';
 import assign from 'object-assign';
 import React from 'react';
@@ -125,7 +125,7 @@ export function styleHacks(draggable) {
 export function createCoreEvent(draggable, clientX, clientY) {
   // State changes are often (but not always!) async. We want the latest value.
   let state = draggable._pendingState || draggable.state;
-  let isStart = !Number.isFinite(state.lastX);
+  let isStart = !isNum(state.lastX);
 
   return {
     node: React.findDOMNode(draggable),

lib/utils/shims.es6

@@ -22,7 +22,9 @@ let lifeCycleMethods = ['constructor', 'componentWillMount', 'componentDidMount'
 // ES6 classes don't autobind their methods
 export function autobind(component) {
   let toBind = Object.getOwnPropertyNames(Object.getPrototypeOf(component));
-  for (let key of toBind) {
+  // Not using for...of here because it requires a full core-js shim to work everywhere.
+  for (var i = 0; i < toBind.length; i++) {
+    var key = toBind[i];
     if (!isFunction(component[key]) || lifeCycleMethods.indexOf(key) !== -1) continue;
     component[key] = component[key].bind(component);
   }

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "test": "make test",
     "dev": "make dev",
-    "build": "make build",
+    "build": "make clean build",
     "commitLint": "eslint `git diff --cached --diff-filter=ACMRTUXB --name-only HEAD | egrep '\\.es6$'`"
   },
   "repository": {
@@ -30,13 +30,14 @@
     "babel-loader": "^5.1.4",
     "eslint": "^0.23.0",
     "karma": "^0.12.19",
-    "karma-chrome-launcher": "^0.1.4",
     "karma-cli": "0.0.4",
     "karma-firefox-launcher": "^0.1.3",
     "karma-jasmine": "^0.1.5",
+    "karma-phantomjs-launcher": "^0.2.0",
     "karma-webpack": "^1.2.1",
     "lodash": "^3.9.3",
     "open": "0.0.5",
+    "phantomjs": "^1.9.17",
     "pre-commit": "^1.0.10",
     "react": "^0.13.2",
     "semver": "^4.3.3",

specs/draggable.spec.jsx

@@ -3,6 +3,8 @@ var TestUtils = require('react/lib/ReactTestUtils');
 var Draggable = require('../index');
 var DraggableCore = require('../index').DraggableCore;
 var _ = require('lodash');
+var browserPrefix = require('../lib/utils/getPrefix.es6');
+var dashedBrowserPrefix = browserPrefix ? '-' + browserPrefix.toLowerCase() + '-' : '';
 
 /*global describe,it,expect,afterEach */
 describe('react-draggable', function () {
@@ -33,8 +35,8 @@ describe('react-draggable', function () {
       drag = (<Draggable><div className="foo" style={{color: 'black'}}/></Draggable>);
 
       expect(renderToHTML(drag)).toEqual('<div class="foo" ' +
-        'style="touch-action:none;color:black;transform:translate(0px,0px);-moz-transform:translate(0px,0px);" ' +
-        'data-reactid=".1"></div>');
+        'style="touch-action:none;color:black;transform:translate(0px,0px);' + dashedBrowserPrefix +
+        'transform:translate(0px,0px);" data-reactid=".1"></div>');
     });
 
     // NOTE: this runs a shallow renderer, which DOES NOT actually render <DraggableCore>
@@ -48,7 +50,7 @@ describe('react-draggable', function () {
         <DraggableCore {...Draggable.defaultProps} handle=".foo" className="react-draggable"
           style={{
             'transform': 'translate(0px,0px)',
-            'MozTransform': 'translate(0px,0px)'
+            [browserPrefix + 'Transform']: 'translate(0px,0px)'
           }}>
           <div />
         </DraggableCore>
@@ -131,8 +133,12 @@ describe('react-draggable', function () {
       TestUtils.Simulate.mouseDown(node, {clientX: 0, clientY: 0});
       // Simulate a movement; can't use TestUtils here because it uses react's event system only,
       // but <DraggableCore> attaches event listeners directly to the document.
-      var e = new MouseEvent('mousemove', {clientX: 100, clientY: 100});
-      document.dispatchEvent(e);
+      // Would love to new MouseEvent() here but it doesn't work with PhantomJS / old browsers.
+      // var e = new MouseEvent('mousemove', {clientX: 100, clientY: 100});
+      var evt = document.createEvent('MouseEvents');
+      evt.initMouseEvent('mousemove', true, true, window,
+          0, 0, 0, 100, 100, false, false, false, false, 0, null);
+      document.dispatchEvent(evt);
       TestUtils.Simulate.mouseUp(node);
 
       var style = node.getAttribute('style');
@@ -142,7 +148,7 @@ describe('react-draggable', function () {
 
     it('should add and remove user-select styles', function () {
       // Karma runs in firefox in our tests
-      var userSelectStyle = ';user-select: none;-moz-user-select: none;';
+      var userSelectStyle = ';user-select: none;' + dashedBrowserPrefix + 'user-select: none;';
 
       drag = TestUtils.renderIntoDocument(
         <Draggable>

specs/main.js

@@ -1 +1,10 @@
+// PhantomJS STILL doesn't support bind yet
+/*eslint no-extend-native:0*/
+Function.prototype.bind = Function.prototype.bind || function (thisp) {
+  var fn = this;
+  return function () {
+    return fn.apply(thisp, arguments);
+  };
+};
+
 require('./draggable.spec.jsx');