Chore/browser tests (#10)

- Refactor the test directory structure.
- Imports the `node` tests into the browser, building with webpack. They are the source of truth.
- Run headless chrome in Travis.
- Run IE9 in Appveyor.
- Use `builder` to parallelize running lint and various tests.
- Fixes #7

.travis.yml

@@ -1,8 +1,37 @@
+dist: trusty
+
 language: node_js
+
 node_js:
-  - "4"
   - "6"
-  - "7"
   - "8"
+  - "9"
+
+branches:
+  only:
+    - master
+
+addons:
+  chrome: stable
+
+before_install:
+  # GUI for real browsers.
+  - export DISPLAY=:99.0
+  - sh -e /etc/init.d/xvfb start
+  # Headless chrome
+  - google-chrome-stable --headless --disable-gpu --remote-debugging-port=9222 http://localhost &
+
+script:
+  # Output useful info for debugging.
+  - node --version
+  - yarn --version
+  # Tests
+  - yarn run test
+
 after_script:
   - coveralls < coverage/lcov.info
+
+cache:
+  yarn: true
+  directories:
+    - node_modules

CONTRIBUTING.md

@@ -0,0 +1,98 @@
+Contributing
+============
+
+Thanks for contributing!
+
+## Development
+
+Install the project using `yarn` (which we've standardized on for development):
+
+```sh
+$ yarn install
+```
+
+`tl;dr` -- Everything you normally need to run is aggregated into:
+
+```sh
+$ yarn run test
+$ yarn run benchmark
+```
+
+(We use `builder` to parallelize things, so tasks may output in different
+orders)
+
+### Testing
+
+We write one set of tests located in:
+
+- `tests/node/**.spec.js`
+
+that run in two very different scenarios:
+
+#### Node
+
+The tests are natively run in `node` (hence why they are located in `tests/node`
+to begin with) without any transpilation or "build". You can run them with:
+
+```sh
+# Single run
+$ yarn run test-node
+
+# Persistent watch
+$ yarn run test-node --watch
+```
+
+#### Browsers
+
+The same tests are then imported and built with `webpack` to a test bundle that
+can be run in arbitrary browsers. So far in CI, we execute the tests in headless
+Chrome on Linux in Travis and IE9-emulated IE11 in Appveyor.
+
+To run the browser tests on your machine (note: you must already have the
+browser you're running installed):
+
+```sh
+# Default: headless chrome
+$ yarn run test-browser
+# Example: real Chrome + Firefox + Safari
+$ yarn run test-browser --browsers Chrome,Firefox,Safari
+
+# IE9 emulation (on Windows)
+$ yarn run test-browser-ie
+```
+
+### Types
+
+We validate our TypeScript `index.d.ts` with:
+
+```sh
+$ yarn run test-ts
+```
+
+### Style
+
+```sh
+$ yarn run eslint
+```
+
+## Before submitting a PR...
+
+Before you go ahead and submit a PR, make sure that you have done the following:
+
+```sh
+$ yarn run test
+$ yarn run benchmark
+```
+
+Everything must be correct / pass checks. You should also check the benchmark
+stats and make sure that we don't have any significant performance regressions
+(check out `master` for a baseline comparison on _your_ machine).
+
+## Releasing a new version to NPM
+
+_Only for project administrators_.
+
+1. Run `npm version patch` (or `minor|major|VERSION`) to run tests and lint,
+   build published directories, then update `package.json` + add a git tag.
+2. Run `npm publish` and publish to NPM if all is well.
+3. Run `git push && git push --tags`

README.md

@@ -1,9 +1,15 @@
-# react-fast-compare
+react-fast-compare
+==================
 
-The fastest deep equal comparison for React, perfect for `shouldComponentUpdate`, also really fast at general-purpose deep comparison. This is a fork of the brilliant [fast-deep-equal](https://github.com/epoberezkin/fast-deep-equal) with some extra handling for React. 
+The fastest deep equal comparison for React, perfect for
+`shouldComponentUpdate`, also really fast at general-purpose deep comparison.
+This is a fork of the brilliant
+[fast-deep-equal](https://github.com/epoberezkin/fast-deep-equal) with some
+extra handling for React.
 
-[![Build Status](https://travis-ci.org/FormidableLabs/react-fast-compare.svg?branch=master)](https://travis-ci.org/FormidableLabs/react-fast-compare)
-[![npm version](https://badge.fury.io/js/react-fast-compare.svg)](http://badge.fury.io/js/react-fast-compare)
+[![Travis Status][trav_img]][trav_site]
+[![AppVeyor Status][appveyor_img]][appveyor_site]
+[![npm version][npm_img]][npm_site]
 
 <img src="https://i.imgur.com/KLUWQla.png" alt="chart" width="550"/>
 
@@ -11,13 +17,12 @@ The fastest deep equal comparison for React, perfect for `shouldComponentUpdate`
 
 ## Install
 
-```bash
-yarn add react-fast-compare
+```sh
+$ yarn add react-fast-compare
 # or
-npm install react-fast-compare
+$ npm install react-fast-compare
 ```
 
-
 ## Highlights
 
 - ES5 compatible; works in node.js (0.10+) and browsers (IE9+)
@@ -47,9 +52,14 @@ class ExpensiveRenderer extends React.Component {
 
 ## Benchmarking
 
-All tests carried out locally on a Macbook. The absolute values are much less important than the relative differences between packages.
+All tests carried out locally on a MacBook. The absolute values are much less
+important than the relative differences between packages.
 
-Benchmarking source can be found [here](https://github.com/FormidableLabs/react-fast-compare/blob/master/spec/tests.js). Each "operation" consists of running all relevant tests. The React benchmark uses both the generic tests and the react tests; these runs will be slower simply because there are more tests in each operation.
+Benchmarking source can be found
+[here](https://github.com/FormidableLabs/react-fast-compare/blob/master/node/tests.js).
+Each "operation" consists of running all relevant tests. The React benchmark
+uses both the generic tests and the react tests; these runs will be slower
+simply because there are more tests in each operation.
 
 ### Generic Data
 
@@ -62,7 +72,9 @@ shallow-equal-fuzzy x 94,141 ops/sec ±1.80% (89 runs sampled)
   fastest: react-fast-compare,fast-deep-equal
 ```
 
-`react-fast-compare` and `fast-deep-equal` should be the same speed for these tests; any difference is just noise. `react-fast-compare` won't be faster than `fast-deep-equal`, because it's based on it.
+`react-fast-compare` and `fast-deep-equal` should be the same speed for these
+tests; any difference is just noise. `react-fast-compare` won't be faster than
+`fast-deep-equal`, because it's based on it.
 
 ### React and Generic Data
 
@@ -75,16 +87,29 @@ shallow-equal-fuzzy x 454 ops/sec ±1.42% (79 runs sampled)
   fastest: react-fast-compare
 ```
 
-Three of these packages cannot handle comparing React elements (which are circular): `fast-deep-equal`, `nano-equal`, and `shallow-equal-fuzzy`.
+Three of these packages cannot handle comparing React elements (which are
+circular): `fast-deep-equal`, `nano-equal`, and `shallow-equal-fuzzy`.
 
 ### Running Benchmarks
 
-```bash
-yarn install
-yarn run benchmark
+```sh
+$ yarn install
+$ yarn run benchmark
 ```
 
-
 ## License
 
 [MIT](https://github.com/FormidableLabs/react-fast-compare/blob/readme/LICENSE)
+
+## Contributing
+
+Please see our [contributions guide](./CONTRIBUTING.md).
+
+[trav_img]: https://api.travis-ci.org/FormidableLabs/react-fast-compare.svg
+[trav_site]: https://travis-ci.org/FormidableLabs/react-fast-compare
+[cov_img]: https://img.shields.io/coveralls/FormidableLabs/react-fast-compare.svg
+[cov_site]: https://coveralls.io/r/FormidableLabs/react-fast-compare
+[npm_img]: https://badge.fury.io/js/react-fast-compare.svg
+[npm_site]: http://badge.fury.io/js/react-fast-compare
+[appveyor_img]: https://ci.appveyor.com/api/projects/status/github/formidablelabs/react-fast-compare?branch=master&svg=true
+[appveyor_site]: https://ci.appveyor.com/project/FormidableLabs/react-fast-compare

appveyor.yml

@@ -0,0 +1,29 @@
+# Test against this version of Node.js
+environment:
+  matrix:
+    - nodejs_version: "6"
+    - nodejs_version: "8"
+    - nodejs_version: "9"
+
+# Install scripts. (runs after repo cloning)
+install:
+  - ps: Install-Product node $env:node_version
+  - yarn install
+
+# Post-install test scripts.
+test_script:
+  # Output useful info for debugging.
+  - node --version
+  - yarn --version
+  # Run tests
+  - yarn run test-ie
+
+# Don't actually build.
+build: off
+
+matrix:
+  fast_finish: true
+
+cache:
+ - node_modules
+ - "%LOCALAPPDATA%/Yarn"

benchmark/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const tests = require('../spec/tests');
+const tests = require('../test/node/tests');
 const Benchmark = require('benchmark');
 
 const correctnessTests = [];

package.json

@@ -4,13 +4,16 @@
   "description": "Fastest deep equal comparison for React. Perfect for shouldComponentUpdate. Also really fast general-purpose deep comparison",
   "main": "index.js",
   "scripts": {
+    "preversion": "npm run test",
     "benchmark": "node benchmark",
-    "eslint": "eslint *.js benchmark spec",
-    "test-spec-watch": "mocha spec/*.spec.js -R spec --watch",
-    "test-spec": "mocha spec/*.spec.js -R spec",
-    "test-cov": "nyc npm run test-spec",
+    "eslint": "eslint \"*.js\" benchmark test",
+    "test-browser": "karma start test/browser/karma.conf.js",
+    "test-browser-ie": "karma start test/browser/karma.conf.ie.js",
+    "test-node": "mocha \"test/node/*.spec.js\"",
+    "test-node-cov": "nyc npm run test-node",
     "test-ts": "tsc --target ES5 --noImplicitAny index.d.ts",
-    "test": "npm run eslint && npm run test-ts && npm run test-cov"
+    "test": "builder concurrent --buffer eslint test-ts test-node-cov test-browser",
+    "test-ie": "builder concurrent --buffer eslint test-ts test-node-cov test-browser-ie"
   },
   "repository": {
     "type": "git",
@@ -31,10 +34,23 @@
   },
   "homepage": "https://github.com/FormidableLabs/react-fast-compare",
   "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.4",
+    "babel-preset-env": "^1.6.1",
     "benchmark": "^2.1.4",
+    "builder": "^4.0.0",
+    "core-js": "^2.5.5",
     "coveralls": "^2.13.1",
     "eslint": "^4.0.0",
     "fast-deep-equal": "^1.1.0",
+    "karma": "^2.0.0",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-firefox-launcher": "^1.1.0",
+    "karma-ie-launcher": "^1.0.0",
+    "karma-mocha": "^1.3.0",
+    "karma-mocha-reporter": "^2.2.5",
+    "karma-safari-launcher": "^1.0.0",
+    "karma-webpack": "^3.0.0",
     "lodash": "^4.17.4",
     "mocha": "^3.4.2",
     "nano-equal": "^1.0.1",
@@ -43,11 +59,12 @@
     "react-test-renderer": "^16.3.1",
     "shallow-equal-fuzzy": "0.0.2",
     "sinon": "^4.5.0",
-    "typescript": "^2.6.1"
+    "typescript": "^2.6.1",
+    "webpack": "^4.5.0"
   },
   "nyc": {
     "exclude": [
-      "**/spec/**",
+      "**/test/**",
       "node_modules"
     ],
     "reporter": [

test/browser/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+// Polyfills for IE9 in React 16.
+require('core-js/es6/map');
+require('core-js/es6/set');
+require('core-js/es6/weak-map');
+
+// Re-use node tests.
+const testsContext = require.context('../node', true, /\.spec\.js$/);
+testsContext.keys().forEach(testsContext);

test/browser/karma.conf.ie.js

@@ -0,0 +1,15 @@
+'use strict';
+
+module.exports = function(config) {
+  require('./karma.conf.js')(config);
+  config.set({
+    plugins: config.plugins.concat('karma-ie-launcher'),
+    browsers: ['IE9'],
+    customLaunchers: {
+      IE9: {
+        base: 'IE',
+        'x-ua-compatible': 'IE=EmulateIE9'
+      }
+    }
+  });
+};

test/browser/karma.conf.js

@@ -0,0 +1,72 @@
+'use strict';
+
+const path = require('path');
+
+module.exports = function(config) {
+  config.set({
+    basePath: '../..',
+    frameworks: ['mocha'],
+    files: [
+      'test/browser/index.js'
+    ],
+    preprocessors: {
+      'test/browser/index.js': ['webpack']
+    },
+    webpack: {
+      mode: 'development',
+      // Normally, would follow this guide for source maps:
+      // https://github.com/webpack-contrib/karma-webpack#source-maps
+      // Unfortunately, karma-webpack doesn't work with source maps w/ babel.
+      // https://github.com/webpack-contrib/karma-webpack/issues/176
+      devtool: false,
+      module: {
+        rules: [
+          {
+            test: /\.js$/,
+            enforce: 'pre',
+            include: path.resolve(__dirname, '..'),
+            loader: 'babel-loader',
+            options: {
+              presets: ['babel-preset-env']
+            }
+          }
+        ]
+      }
+    },
+    exclude: [],
+    port: 8080,
+    logLevel: config.LOG_INFO,
+    colors: true,
+    autoWatch: false,
+    // Run a customized instance of headless chrome for dev + Travis CI.
+    browsers: ['ChromeHeadlessCustom'],
+    customLaunchers: {
+      ChromeHeadlessCustom: {
+        base: 'ChromeHeadless',
+        // --no-sandbox for https://github.com/travis-ci/docs-travis-ci-com/pull/1671/files
+        flags: ['--no-sandbox']
+      }
+    },
+    reporters: ['mocha'/* TODO, 'coverage'*/],
+    browserNoActivityTimeout: 60000,
+    plugins: [
+      'karma-chrome-launcher',
+      'karma-firefox-launcher',
+      'karma-safari-launcher',
+      //'karma-coverage',
+      'karma-mocha',
+      'karma-mocha-reporter',
+      'karma-webpack'
+    ],
+    coverageReporter: {
+      type: 'text'
+    },
+    browserConsoleLogOptions: {
+      level: 'log',
+      format: '%b %T: %m',
+      terminal: true
+    },
+    captureTimeout: 100000,
+    singleRun: true
+  });
+};

test/mocha.opts

@@ -0,0 +1 @@
+--reporter spec

test/node/advanced.spec.js

@@ -5,7 +5,7 @@ const sinon = require('sinon');
 const React = require('react');
 const ReactTestRenderer = require('react-test-renderer');
 
-const equal = require('../index');
+const equal = require('../..');
 const tests = require('./tests');
 
 class ChildWithShouldComponentUpdate extends React.Component {

test/node/basics.spec.js

@@ -3,11 +3,12 @@
 var assert = require('assert');
 var sinon = require('sinon');
 
-var equal = require('../index');
+var equal = require('../..');
 var tests = require('./tests');
 
 describe('basics', function() {
   let sandbox;
+
   beforeEach(() => {
     sandbox = sinon.sandbox.create();
     sandbox.stub(console, 'warn');