Skip to content

Commit

Permalink
Chore/browser tests (#10)
Browse files Browse the repository at this point in the history
- 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
  • Loading branch information
ryan-roemer committed Apr 13, 2018
1 parent 0efbd22 commit 53a5ca1
Show file tree
Hide file tree
Showing 15 changed files with 3,606 additions and 93 deletions.
33 changes: 31 additions & 2 deletions .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
98 changes: 98 additions & 0 deletions 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`
57 changes: 41 additions & 16 deletions README.md
@@ -1,23 +1,28 @@
# 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"/>

(Check out the [benchmarking details](#benchmarking).)

## 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+)
Expand Down Expand Up @@ -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

Expand All @@ -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

Expand All @@ -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
29 changes: 29 additions & 0 deletions 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"
2 changes: 1 addition & 1 deletion 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 = [];
Expand Down
31 changes: 24 additions & 7 deletions package.json
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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": [
Expand Down
File renamed without changes.
10 changes: 10 additions & 0 deletions 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);
15 changes: 15 additions & 0 deletions 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'
}
}
});
};

0 comments on commit 53a5ca1

Please sign in to comment.