Adding tests

Author: mzabriskie

.npmignore

@@ -4,4 +4,6 @@ build
 example
 script
 specs
+.travis.yml
+karma.conf.js
 webpack.config.js

.travis.yml

@@ -0,0 +1,9 @@
+language: node_js
+node_js:
+  - "0.10"
+before_script:
+  - export DISPLAY=:99.0
+  - sh -e /etc/init.d/xvfb start
+email:
+  on_failure: change
+  on_success: never

karma.conf.js

@@ -0,0 +1,55 @@
+module.exports = function(config) {
+	config.set({
+
+		basePath: '',
+
+		frameworks: ['jasmine'],
+
+		files: [
+			'specs/main.js'
+		],
+
+		exclude: [
+		],
+
+		preprocessors: {
+			'specs/main.js': ['webpack']
+		},
+
+		webpack: {
+			cache: true,
+			module: {
+				loaders: [
+					{test: /\.js$/, loader: 'jsx-loader'}
+				]
+			}
+		},
+
+		webpackServer: {
+			stats: {
+				colors: true
+			}
+		},
+
+		reporters: ['progress'],
+
+		port: 9876,
+
+		colors: true,
+
+		logLevel: config.LOG_INFO,
+
+		autoWatch: false,
+
+		browsers: ['Chrome'],
+
+		singleRun: false,
+
+		plugins: [
+			require('karma-jasmine'),
+			require('karma-chrome-launcher'),
+			require('karma-firefox-launcher'),
+			require('karma-webpack')
+		]
+	});
+};

package.json

@@ -4,7 +4,7 @@
   "description": "React draggable component",
   "main": "lib/main.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "script/test --browsers Firefox --single-run",
     "build": "script/build"
   },
   "repository": {
@@ -23,6 +23,14 @@
   "homepage": "https://github.com/mzabriskie/react-draggable",
   "devDependencies": {
     "react": "^0.11.0",
-    "jsx-loader": "^0.11.0"
+    "jsx-loader": "^0.11.0",
+    "karma": "^0.12.19",
+    "karma-cli": "0.0.4",
+    "karma-jasmine": "^0.1.5",
+    "karma-chrome-launcher": "^0.1.4",
+    "karma-firefox-launcher": "^0.1.3",
+    "webpack": "^1.3.2-beta8",
+    "webpack-dev-server": "^1.4.7",
+    "karma-webpack": "^1.2.1"
   }
 }

script/test

@@ -0,0 +1,2 @@
+#!/bin/sh
+node_modules/.bin/karma start "$@"

specs/draggable.spec.js

@@ -0,0 +1,156 @@
+/** @jsx React.DOM */
+var React = require('react/addons'),
+	TestUtils = React.addons.TestUtils,
+	Draggable = require('../lib/main');
+
+describe('react-draggable', function () {
+	describe('props', function () {
+		it('should have default properties', function () {
+			var drag = TestUtils.renderIntoDocument(<Draggable><div/></Draggable>);
+
+			expect(drag.props.axis).toEqual('both');
+			expect(drag.props.handle).toEqual(null);
+			expect(drag.props.cancel).toEqual(null);
+			expect(isNaN(drag.props.zIndex)).toEqual(true);
+			expect(typeof drag.props.onStart).toEqual('function');
+			expect(typeof drag.props.onDrag).toEqual('function');
+			expect(typeof drag.props.onStop).toEqual('function');
+		});
+
+		it('should honor props', function () {
+			function handleStart() {}
+			function handleDrag() {}
+			function handleStop() {}
+
+			var drag = TestUtils.renderIntoDocument(
+					<Draggable
+						axis="y"
+						handle=".handle"
+						cancel=".cancel"
+						zIndex={1000}
+						onStart={handleStart}
+						onDrag={handleDrag}
+						onStop={handleStop}>
+						<div>
+							<div className="handle"/>
+							<div className="cancel"/>
+						</div>
+					</Draggable>
+				);
+
+			expect(drag.props.axis).toEqual('y');
+			expect(drag.props.handle).toEqual('.handle');
+			expect(drag.props.cancel).toEqual('.cancel');
+			expect(drag.props.zIndex).toEqual(1000);
+			expect(drag.props.onStart).toEqual(handleStart);
+			expect(drag.props.onDrag).toEqual(handleDrag);
+			expect(drag.props.onStop).toEqual(handleStop);
+		});
+
+		it('should call onStart when dragging begins', function () {
+			var called = false,
+				drag = TestUtils.renderIntoDocument(
+					<Draggable onStart={function () { called = true; }}>
+						<div/>
+					</Draggable>
+				);
+
+			TestUtils.Simulate.mouseDown(drag.getDOMNode());
+			expect(called).toEqual(true);
+		});
+
+		it('should call onStop when dragging ends', function () {
+			var called = false,
+				drag = TestUtils.renderIntoDocument(
+					<Draggable onStop={function () { called = true; }}>
+						<div/>
+					</Draggable>
+				);
+
+			TestUtils.Simulate.mouseDown(drag.getDOMNode());
+			TestUtils.Simulate.mouseUp(drag.getDOMNode());
+			expect(called).toEqual(true);
+		});
+	});
+
+	describe('interaction', function () {
+		it('should initialize dragging onmousedown', function () {
+			var drag = TestUtils.renderIntoDocument(<Draggable><div/></Draggable>);
+
+			TestUtils.Simulate.mouseDown(drag.getDOMNode());
+			expect(drag.state.dragging).toEqual(true);
+		});
+
+		it('should only initialize dragging onmousedown of handle', function () {
+			var drag = TestUtils.renderIntoDocument(
+					<Draggable handle=".handle">
+						<div>
+							<div className="handle">Handle</div>
+							<div className="content">Lorem ipsum...</div>
+						</div>
+					</Draggable>
+				);
+
+			TestUtils.Simulate.mouseDown(drag.getDOMNode().querySelector('.content'));
+			expect(drag.state.dragging).toEqual(false);
+
+			TestUtils.Simulate.mouseDown(drag.getDOMNode().querySelector('.handle'));
+			expect(drag.state.dragging).toEqual(true);
+		});
+
+		it('should not initialize dragging onmousedown of cancel', function () {
+			var drag = TestUtils.renderIntoDocument(
+					<Draggable cancel=".cancel">
+						<div>
+							<div className="cancel">Cancel</div>
+							<div className="content">Lorem ipsum...</div>
+						</div>
+					</Draggable>
+				);
+
+			TestUtils.Simulate.mouseDown(drag.getDOMNode().querySelector('.cancel'));
+			expect(drag.state.dragging).toEqual(false);
+
+			TestUtils.Simulate.mouseDown(drag.getDOMNode().querySelector('.content'));
+			expect(drag.state.dragging).toEqual(true);
+		});
+
+		it('should discontinue dragging onmouseup', function () {
+			var drag = TestUtils.renderIntoDocument(<Draggable><div/></Draggable>);
+
+			TestUtils.Simulate.mouseDown(drag.getDOMNode());
+			expect(drag.state.dragging).toEqual(true);
+
+			TestUtils.Simulate.mouseUp(drag.getDOMNode());
+			expect(drag.state.dragging).toEqual(false);
+		});
+	});
+
+	describe('validation', function () {
+		it('should result with invariant when there isn\'t any children', function () {
+			var drag = (<Draggable/>);
+
+			var error = false;
+			try {
+				TestUtils.renderIntoDocument(drag);
+			} catch (e) {
+				error = true;
+			}
+
+			expect(error).toEqual(true);
+		});
+
+		it('should result with invariant if there\'s more than a single child', function () {
+			var drag = (<Draggable><div/><div/></Draggable>);
+
+			var error = false;
+			try {
+				TestUtils.renderIntoDocument(drag);
+			} catch (e) {
+				error = true;
+			}
+
+			expect(error).toEqual(true);
+		});
+	});
+});

specs/main.js

@@ -0,0 +1 @@
+require('./draggable.spec.js');