add testing

Author: Cap32

karma.conf.js

@@ -0,0 +1,96 @@
+/* eslint-disable max-len */
+
+import webpackConfig from './webpack.config.babel';
+
+export default (config) => {
+	const configuration = {
+
+		// base path that will be used to resolve all patterns (eg. files, exclude)
+		basePath: 'test',
+
+
+		// frameworks to use
+		// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+		frameworks: ['mocha'],
+
+
+		// list of files / patterns to load in the browser
+		files: [
+			'index.html',
+			'index.js',
+		],
+
+
+		// list of files to exclude
+		exclude: [
+		],
+
+
+		// preprocess matching files before serving them to the browser
+		// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+		preprocessors: {
+			'index.js': ['webpack'],
+			'index.html': ['html2js'],
+		},
+
+
+		webpack: {
+			...webpackConfig,
+			entry: {
+				index: './src/index.js',
+			},
+		},
+
+		webpackMiddleware: { stats: 'errors-only' },
+
+
+		// test results reporter to use
+		// possible values: 'dots', 'progress'
+		// available reporters: https://npmjs.org/browse/keyword/karma-reporter
+		reporters: ['mocha'],
+
+
+		// web server port
+		port: 9876,
+
+
+		// enable / disable colors in the output (reporters and logs)
+		colors: true,
+
+
+		// level of logging
+		// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+		logLevel: config.LOG_ERROR,
+
+
+		// enable / disable watching file and executing tests whenever any file changes
+		autoWatch: true,
+
+
+		// start these browsers
+		// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+		browsers: ['Chrome'],
+
+		customLaunchers: {
+			Chrome_travis_ci: {
+				base: 'Chrome',
+				flags: ['--no-sandbox']
+			}
+		},
+
+
+		// Continuous Integration mode
+		// if true, Karma captures browsers, runs the tests and exits
+		// singleRun: true,
+
+		// Concurrency level
+		// how many browser should be started simultaneous
+		concurrency: Infinity
+	};
+
+	if (process.env.TRAVIS) {
+		configuration.browsers = ['Chrome_travis_ci'];
+	}
+
+	config.set(configuration);
+};

package.json

@@ -3,6 +3,9 @@
   "version": "0.0.0-alpha.7",
   "description": "Bring react-native Animated to web",
   "scripts": {
+    "start": "npm run karma -- start",
+    "test": "npm run karma -- start --single-run",
+    "karma": "cross-env ANIMATED_TEST=true babel-node -- ./node_modules/.bin/karma",
     "prebuild": "rimraf ./dist && mkdirp ./dist && rimraf ./lib && mkdirp ./lib",
     "build:cjs": "babel src -d lib",
     "build:umd": "webpack src dist/react-web-animated.js",
@@ -31,7 +34,15 @@
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-0": "^6.16.0",
     "babel-register": "^6.16.3",
+    "cross-env": "^3.1.4",
+    "karma": "^1.5.0",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-html2js-preprocessor": "^1.1.0",
+    "karma-mocha": "^1.3.0",
+    "karma-mocha-reporter": "^2.2.2",
+    "karma-webpack": "^2.0.2",
     "mkdirp": "^0.5.1",
+    "mocha": "^3.2.0",
     "react": "^15.3.2",
     "react-dom": "^15.3.2",
     "rimraf": "^2.5.4",

test/index.html

@@ -0,0 +1 @@
+<div id="app"></div>

test/index.js

@@ -0,0 +1,56 @@
+
+import assert from 'assert';
+import React, { Component } from 'react';
+import { render, findDOMNode } from 'react-dom';
+import Animated from '../src';
+
+describe('library', function () {
+	let rootNode;
+
+	beforeEach(function () {
+		document.body.innerHTML = window.__html__['index.html'];
+		rootNode = document.getElementById('app');
+	});
+
+	it('<Animated.Div>', function () {
+		const value = 'it works';
+
+		const App = () => (<Animated.Div>{value}</Animated.Div>);
+
+		render(<App />, rootNode);
+		assert.equal(rootNode.textContent, value);
+	});
+
+	it('Animated.Value()', function (done) {
+		const defaultValue = 0;
+		const updatedValue = 1;
+
+		class App extends Component {
+			state = {
+				anim: new Animated.Value(defaultValue),
+			};
+
+			componentDidMount() {
+				const { style } = findDOMNode(this);
+
+				assert.equal(parseInt(domNode.style.width, 10), defaultValue);
+				this.state.anim.setValue(updatedValue);
+				assert.equal(parseInt(domNode.style.width, 10), updatedValue);
+				done();
+			}
+
+			render() {
+				return (
+					<Animated.Div
+						style={{
+							width: this.state.anim,
+						}}
+					/>
+				);
+			}
+		}
+
+		render(<App />, rootNode);
+	});
+
+});

webpack.config.babel.js

@@ -2,8 +2,11 @@
 import { resolve } from 'path';
 import webpack from 'webpack';
 
-process.env.NODE_ENV = process.env.NODE_ENV || 'development';
+const { env } = process;
 
+process.env.NODE_ENV = env.NODE_ENV || 'development';
+
+const isTesting = !!env.ANIMATED_TEST;
 const PROJECT_PATH = __dirname;
 const inProject = (...args) => resolve(PROJECT_PATH, ...args);
 const inSrc = inProject.bind(null, 'src');
@@ -18,7 +21,7 @@ export default {
 		rules: [
 			{
 				test: /\.jsx?$/,
-				include: srcDir,
+				include: [srcDir, inProject('test')],
 				loader: 'babel',
 				query: {
 					presets: [
@@ -47,7 +50,7 @@ export default {
 		alias: { React: 'react' },
 	},
 	devtool: 'source-map',
-	externals: {
+	externals: isTesting ? {} : {
 		react: 'React',
 		'react-dom': 'ReactDOM',
 	},