From c22dbeee4983d4b00a102675b2dc2917f5cb98ac Mon Sep 17 00:00:00 2001 From: Ovidiu Chereches Date: Sun, 18 Oct 2015 15:53:03 +0300 Subject: [PATCH 1/6] Use separate package for React test utils #14 --- package.json | 1 + tests/load-child-component.js | 5 +++-- tests/load-child-mixin.js | 5 +++-- tests/render-inject-state.js | 5 +++-- tests/serialize.js | 5 +++-- 5 files changed, 13 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index d2b1e4d..23838ae 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "karma-webpack": "^1.7.0", "mocha": "^2.2.4", "react": "^0.13.1", + "react-addons-test-utils": "^0.14.0", "sinon": "^1.14.1", "sinon-chai": "^2.7.0", "webpack": "^1.12.0" diff --git a/tests/load-child-component.js b/tests/load-child-component.js index f363cca..7674551 100644 --- a/tests/load-child-component.js +++ b/tests/load-child-component.js @@ -1,6 +1,7 @@ var _ = require('lodash'), - React = require('react/addons'), - renderIntoDocument = React.addons.TestUtils.renderIntoDocument, + React = require('react'), + TestUtils = require('react-addons-test-utils'), + renderIntoDocument = TestUtils.renderIntoDocument, loadChild = require('../src/load-child.js'), LoadChildComponent = require('../src/load-child-component.js'); diff --git a/tests/load-child-mixin.js b/tests/load-child-mixin.js index 36cd53f..aa6ab77 100644 --- a/tests/load-child-mixin.js +++ b/tests/load-child-mixin.js @@ -1,6 +1,7 @@ var _ = require('lodash'), - React = require('react/addons'), - renderIntoDocument = React.addons.TestUtils.renderIntoDocument, + React = require('react'), + TestUtils = require('react-addons-test-utils'), + renderIntoDocument = TestUtils.renderIntoDocument, loadChild = require('../src/load-child.js'), LoadChildMixin = require('../src/load-child-mixin.js'); diff --git a/tests/render-inject-state.js b/tests/render-inject-state.js index 1f624e3..f102936 100644 --- a/tests/render-inject-state.js +++ b/tests/render-inject-state.js @@ -1,5 +1,6 @@ -var React = require('react/addons'), - renderIntoDocument = React.addons.TestUtils.renderIntoDocument, +var React = require('react'), + TestUtils = require('react-addons-test-utils'), + renderIntoDocument = TestUtils.renderIntoDocument, render = require('../src/render.js').render; describe('Render and inject state', function() { diff --git a/tests/serialize.js b/tests/serialize.js index fbe782b..db6d60a 100644 --- a/tests/serialize.js +++ b/tests/serialize.js @@ -1,5 +1,6 @@ -var React = require('react/addons'), - renderIntoDocument = React.addons.TestUtils.renderIntoDocument, +var React = require('react'), + TestUtils = require('react-addons-test-utils'), + renderIntoDocument = TestUtils.renderIntoDocument, serialize = require('../src/serialize.js').serialize; describe('Serialize', function() { From 0e93646fca59e5c81b6430ff76932556d330f4c8 Mon Sep 17 00:00:00 2001 From: Ovidiu Chereches Date: Sun, 18 Oct 2015 16:02:05 +0300 Subject: [PATCH 2/6] Render using ReactDOM #14 --- package.json | 10 ++++++---- src/render.js | 5 +++-- tests/render-inject-state.js | 5 +++-- tests/render.js | 9 +++++---- 4 files changed, 17 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 23838ae..486d9d3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-component-tree", - "version": "0.2.4", + "version": "0.3.0", "description": "Serialize and reproduce the state of an entire tree of React components", "main": "dist/entry.js", "repository": { @@ -22,7 +22,7 @@ "jscs": "^1.12.0", "karma": "^0.13.9", "karma-chai": "^0.1.0", - "karma-cli": "0.0.4", + "karma-cli": "0.1.1", "karma-coverage": "^0.2.7", "karma-mocha": "^0.1.10", "karma-mocha-reporter": "^1.0.2", @@ -30,14 +30,16 @@ "karma-sinon-chai": "^0.3.0", "karma-webpack": "^1.7.0", "mocha": "^2.2.4", - "react": "^0.13.1", + "react": "^0.14.0", "react-addons-test-utils": "^0.14.0", + "react-dom": "^0.14.0", "sinon": "^1.14.1", "sinon-chai": "^2.7.0", "webpack": "^1.12.0" }, "peerDependencies": { - "react": "^0.13.1" + "react": "^0.14.0", + "react-dom": "^0.14.0" }, "scripts": { "pretest": "jscs --esnext ./", diff --git a/src/render.js b/src/render.js index 2d1c0c8..4da0eba 100644 --- a/src/render.js +++ b/src/render.js @@ -1,5 +1,6 @@ var _ = require('lodash'), - React = require('react'); + React = require('react'), + ReactDOM = require('react-dom'); exports.render = function(options) { /** @@ -18,7 +19,7 @@ exports.render = function(options) { children = options.snapshot.children; var element = React.createElement(options.component, props, children), - component = React.render(element, options.container); + component = ReactDOM.render(element, options.container); if (!_.isEmpty(state)) { exports.injectState(component, state); diff --git a/tests/render-inject-state.js b/tests/render-inject-state.js index f102936..e195ab3 100644 --- a/tests/render-inject-state.js +++ b/tests/render-inject-state.js @@ -1,4 +1,5 @@ var React = require('react'), + ReactDOM = require('react-dom'), TestUtils = require('react-addons-test-utils'), renderIntoDocument = TestUtils.renderIntoDocument, render = require('../src/render.js').render; @@ -31,11 +32,11 @@ describe('Render and inject state', function() { sinon.spy(component.refs.child, 'setState'); sinon.spy(component.refs.child.refs.child, 'setState'); - sinon.stub(React, 'render').returns(component); + sinon.stub(ReactDOM, 'render').returns(component); }); afterEach(function() { - React.render.restore(); + ReactDOM.render.restore(); }); it('should set state on root component', function() { diff --git a/tests/render.js b/tests/render.js index 835bed7..9462798 100644 --- a/tests/render.js +++ b/tests/render.js @@ -1,4 +1,5 @@ var React = require('react'), + ReactDOM = require('react-dom'), render = require('../src/render.js').render; describe('Render', function() { @@ -16,7 +17,7 @@ describe('Render', function() { beforeEach(function() { sinon.spy(React, 'createElement'); - sinon.stub(React, 'render'); + sinon.stub(ReactDOM, 'render'); domContainer = document.createElement('div'); @@ -32,7 +33,7 @@ describe('Render', function() { afterEach(function() { React.createElement.restore(); - React.render.restore(); + ReactDOM.render.restore(); }); it('should create element for component', function() { @@ -56,12 +57,12 @@ describe('Render', function() { }); it('should render created element', function() { - var args = React.render.lastCall.args; + var args = ReactDOM.render.lastCall.args; expect(args[0]).to.equal(React.createElement.returnValues[0]); }); it('should render in given container', function() { - var args = React.render.lastCall.args; + var args = ReactDOM.render.lastCall.args; expect(args[1]).to.equal(domContainer); }); }); From 662cef540d1c47627b9e02bc93562ba527dff694 Mon Sep 17 00:00:00 2001 From: Ovidiu Chereches Date: Sun, 18 Oct 2015 16:06:25 +0300 Subject: [PATCH 3/6] Move unit tests in dedicated folder #14 --- tests/{ => unit}/load-child-component.js | 4 ++-- tests/{ => unit}/load-child-mixin.js | 4 ++-- tests/{ => unit}/load-child.js | 2 +- tests/{ => unit}/load-missing-child.js | 2 +- tests/{ => unit}/render-inject-state.js | 2 +- tests/{ => unit}/render.js | 2 +- tests/{ => unit}/serialize.js | 2 +- 7 files changed, 9 insertions(+), 9 deletions(-) rename tests/{ => unit}/load-child-component.js (90%) rename tests/{ => unit}/load-child-mixin.js (90%) rename tests/{ => unit}/load-child.js (97%) rename tests/{ => unit}/load-missing-child.js (92%) rename tests/{ => unit}/render-inject-state.js (97%) rename tests/{ => unit}/render.js (97%) rename tests/{ => unit}/serialize.js (97%) diff --git a/tests/load-child-component.js b/tests/unit/load-child-component.js similarity index 90% rename from tests/load-child-component.js rename to tests/unit/load-child-component.js index 7674551..cd93475 100644 --- a/tests/load-child-component.js +++ b/tests/unit/load-child-component.js @@ -2,8 +2,8 @@ var _ = require('lodash'), React = require('react'), TestUtils = require('react-addons-test-utils'), renderIntoDocument = TestUtils.renderIntoDocument, - loadChild = require('../src/load-child.js'), - LoadChildComponent = require('../src/load-child-component.js'); + loadChild = require('../../src/load-child.js'), + LoadChildComponent = require('../../src/load-child-component.js'); describe('Load child component', function() { var fakeReactElement = {}, diff --git a/tests/load-child-mixin.js b/tests/unit/load-child-mixin.js similarity index 90% rename from tests/load-child-mixin.js rename to tests/unit/load-child-mixin.js index aa6ab77..84be8d6 100644 --- a/tests/load-child-mixin.js +++ b/tests/unit/load-child-mixin.js @@ -2,8 +2,8 @@ var _ = require('lodash'), React = require('react'), TestUtils = require('react-addons-test-utils'), renderIntoDocument = TestUtils.renderIntoDocument, - loadChild = require('../src/load-child.js'), - LoadChildMixin = require('../src/load-child-mixin.js'); + loadChild = require('../../src/load-child.js'), + LoadChildMixin = require('../../src/load-child-mixin.js'); describe('Load child mixin', function() { var fakeReactElement = {}, diff --git a/tests/load-child.js b/tests/unit/load-child.js similarity index 97% rename from tests/load-child.js rename to tests/unit/load-child.js index fabdcb1..03e777f 100644 --- a/tests/load-child.js +++ b/tests/unit/load-child.js @@ -1,5 +1,5 @@ var React = require('react'), - loadChild = require('../src/load-child.js').loadChild; + loadChild = require('../../src/load-child.js').loadChild; describe('Load child', function() { var FirstComponent = {}, diff --git a/tests/load-missing-child.js b/tests/unit/load-missing-child.js similarity index 92% rename from tests/load-missing-child.js rename to tests/unit/load-missing-child.js index 4811525..0c5f050 100644 --- a/tests/load-missing-child.js +++ b/tests/unit/load-missing-child.js @@ -1,5 +1,5 @@ var React = require('react'), - loadChild = require('../src/load-child.js').loadChild; + loadChild = require('../../src/load-child.js').loadChild; describe('Load missing child', function() { var component; diff --git a/tests/render-inject-state.js b/tests/unit/render-inject-state.js similarity index 97% rename from tests/render-inject-state.js rename to tests/unit/render-inject-state.js index e195ab3..3d5cb79 100644 --- a/tests/render-inject-state.js +++ b/tests/unit/render-inject-state.js @@ -2,7 +2,7 @@ var React = require('react'), ReactDOM = require('react-dom'), TestUtils = require('react-addons-test-utils'), renderIntoDocument = TestUtils.renderIntoDocument, - render = require('../src/render.js').render; + render = require('../../src/render.js').render; describe('Render and inject state', function() { var component; diff --git a/tests/render.js b/tests/unit/render.js similarity index 97% rename from tests/render.js rename to tests/unit/render.js index 9462798..35268d8 100644 --- a/tests/render.js +++ b/tests/unit/render.js @@ -1,6 +1,6 @@ var React = require('react'), ReactDOM = require('react-dom'), - render = require('../src/render.js').render; + render = require('../../src/render.js').render; describe('Render', function() { var domContainer, diff --git a/tests/serialize.js b/tests/unit/serialize.js similarity index 97% rename from tests/serialize.js rename to tests/unit/serialize.js index db6d60a..4c2aa9e 100644 --- a/tests/serialize.js +++ b/tests/unit/serialize.js @@ -1,7 +1,7 @@ var React = require('react'), TestUtils = require('react-addons-test-utils'), renderIntoDocument = TestUtils.renderIntoDocument, - serialize = require('../src/serialize.js').serialize; + serialize = require('../../src/serialize.js').serialize; describe('Serialize', function() { class ChildComponent extends React.Component { From b02619d29c55535a0a85040a346ff01d5899f00b Mon Sep 17 00:00:00 2001 From: Ovidiu Chereches Date: Sun, 18 Oct 2015 16:33:34 +0300 Subject: [PATCH 4/6] Add integration tests for rendering #14 --- karma.conf.js | 4 +- tests/integration/render-inject-state.js | 82 ++++++++++++++++++++++++ tests/integration/render.js | 47 ++++++++++++++ tests/unit/load-child-component.js | 2 +- tests/unit/load-child-mixin.js | 2 +- tests/unit/load-child.js | 2 +- tests/unit/load-missing-child.js | 2 +- tests/unit/render-inject-state.js | 2 +- tests/unit/render.js | 2 +- tests/unit/serialize.js | 2 +- 10 files changed, 139 insertions(+), 8 deletions(-) create mode 100644 tests/integration/render-inject-state.js create mode 100644 tests/integration/render.js diff --git a/karma.conf.js b/karma.conf.js index 28648ff..3f2be5d 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -7,7 +7,9 @@ module.exports = function(config) { dir: 'coverage/' }, files: [ - '**/*.js' + 'bind-polyfill.js', + 'unit/*.js', + 'integration/*.js' ], frameworks: ['mocha', 'chai', 'sinon-chai'], preprocessors: { diff --git a/tests/integration/render-inject-state.js b/tests/integration/render-inject-state.js new file mode 100644 index 0000000..a9ca763 --- /dev/null +++ b/tests/integration/render-inject-state.js @@ -0,0 +1,82 @@ +var React = require('react'), + ReactDOM = require('react-dom'), + render = require('../../src/render.js').render; + +describe('INTEGRATION Render and inject state', function() { + var domContainer, + component; + + class ChildComponent extends React.Component { + render() { + return React.DOM.span(); + } + } + + class ParentComponent extends React.Component { + render() { + return React.createElement(ChildComponent, {ref: 'child'}); + } + } + + class GrandparentComponent extends React.Component { + render() { + return React.createElement(ParentComponent, {ref: 'child'}); + } + } + + beforeEach(function() { + domContainer = document.createElement('div'); + }); + + afterEach(function() { + ReactDOM.unmountComponentAtNode(domContainer); + }); + + it('should set state on root component', function() { + component = render({ + component: GrandparentComponent, + snapshot: { + state: {foo: 'bar'} + }, + container: domContainer + }); + + expect(component.state.foo).to.equal('bar'); + }); + + it('should set state on child component', function() { + component = render({ + component: GrandparentComponent, + snapshot: { + state: { + children: { + child: {foo: 'bar'} + } + } + }, + container: domContainer + }); + + expect(component.refs.child.state.foo).to.equal('bar'); + }); + + it('should set state on grandchild component', function() { + component = render({ + component: GrandparentComponent, + snapshot: { + state: { + children: { + child: { + children: { + child: {foo: 'bar'} + } + } + } + } + }, + container: domContainer + }); + + expect(component.refs.child.refs.child.state.foo).to.equal('bar'); + }); +}); diff --git a/tests/integration/render.js b/tests/integration/render.js new file mode 100644 index 0000000..7d83709 --- /dev/null +++ b/tests/integration/render.js @@ -0,0 +1,47 @@ +var React = require('react'), + ReactDOM = require('react-dom'), + render = require('../../src/render.js').render; + +describe('INTEGRATION Render', function() { + var domContainer, + children = [React.createElement('span', { + key: '1', + children: 'test child' + })], + component; + + class Component extends React.Component { + render() { + return React.DOM.span(); + } + } + + beforeEach(function() { + domContainer = document.createElement('div'); + + component = render({ + component: Component, + snapshot: { + foo: 'bar', + children: children + }, + container: domContainer + }); + }); + + afterEach(function() { + ReactDOM.unmountComponentAtNode(domContainer); + }); + + it('should create component with correct props', function() { + expect(component.props.foo).to.equal('bar'); + }); + + it('should receive children through props', function() { + expect(component.props.children).to.be.equal(children); + }); + + it('should render in given container', function() { + expect(ReactDOM.findDOMNode(component).parentNode).to.equal(domContainer); + }); +}); diff --git a/tests/unit/load-child-component.js b/tests/unit/load-child-component.js index cd93475..1292c69 100644 --- a/tests/unit/load-child-component.js +++ b/tests/unit/load-child-component.js @@ -5,7 +5,7 @@ var _ = require('lodash'), loadChild = require('../../src/load-child.js'), LoadChildComponent = require('../../src/load-child-component.js'); -describe('Load child component', function() { +describe('UNIT Load child component', function() { var fakeReactElement = {}, myComponent; diff --git a/tests/unit/load-child-mixin.js b/tests/unit/load-child-mixin.js index 84be8d6..22c9d87 100644 --- a/tests/unit/load-child-mixin.js +++ b/tests/unit/load-child-mixin.js @@ -5,7 +5,7 @@ var _ = require('lodash'), loadChild = require('../../src/load-child.js'), LoadChildMixin = require('../../src/load-child-mixin.js'); -describe('Load child mixin', function() { +describe('UNIT Load child mixin', function() { var fakeReactElement = {}, myComponent; diff --git a/tests/unit/load-child.js b/tests/unit/load-child.js index 03e777f..14b2234 100644 --- a/tests/unit/load-child.js +++ b/tests/unit/load-child.js @@ -1,7 +1,7 @@ var React = require('react'), loadChild = require('../../src/load-child.js').loadChild; -describe('Load child', function() { +describe('UNIT Load child', function() { var FirstComponent = {}, SecondComponent = {}, component, diff --git a/tests/unit/load-missing-child.js b/tests/unit/load-missing-child.js index 0c5f050..c1efecc 100644 --- a/tests/unit/load-missing-child.js +++ b/tests/unit/load-missing-child.js @@ -1,7 +1,7 @@ var React = require('react'), loadChild = require('../../src/load-child.js').loadChild; -describe('Load missing child', function() { +describe('UNIT Load missing child', function() { var component; beforeEach(function() { diff --git a/tests/unit/render-inject-state.js b/tests/unit/render-inject-state.js index 3d5cb79..0ee42f8 100644 --- a/tests/unit/render-inject-state.js +++ b/tests/unit/render-inject-state.js @@ -4,7 +4,7 @@ var React = require('react'), renderIntoDocument = TestUtils.renderIntoDocument, render = require('../../src/render.js').render; -describe('Render and inject state', function() { +describe('UNIT Render and inject state', function() { var component; class ChildComponent extends React.Component { diff --git a/tests/unit/render.js b/tests/unit/render.js index 35268d8..3dbb3a5 100644 --- a/tests/unit/render.js +++ b/tests/unit/render.js @@ -2,7 +2,7 @@ var React = require('react'), ReactDOM = require('react-dom'), render = require('../../src/render.js').render; -describe('Render', function() { +describe('UNIT Render', function() { var domContainer, children = [React.createElement('span', { key: '1', diff --git a/tests/unit/serialize.js b/tests/unit/serialize.js index 4c2aa9e..72086f0 100644 --- a/tests/unit/serialize.js +++ b/tests/unit/serialize.js @@ -3,7 +3,7 @@ var React = require('react'), renderIntoDocument = TestUtils.renderIntoDocument, serialize = require('../../src/serialize.js').serialize; -describe('Serialize', function() { +describe('UNIT Serialize', function() { class ChildComponent extends React.Component { render() { return React.DOM.span(); From c4fc29b2fe7458b71212a88af90aa0d0ab876e94 Mon Sep 17 00:00:00 2001 From: Ovidiu Chereches Date: Sun, 15 Nov 2015 17:01:58 +0200 Subject: [PATCH 5/6] Replace jscs with ESLint #14 --- .eslintignore | 2 ++ .eslintrc | 21 +++++++++++++++++++++ .jscsrc | 12 ------------ package.json | 7 +++++-- 4 files changed, 28 insertions(+), 14 deletions(-) create mode 100644 .eslintignore create mode 100644 .eslintrc delete mode 100644 .jscsrc diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..0a5c2f3 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,2 @@ +dist +tests/coverage diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..329eec0 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,21 @@ +{ + "ecmaFeatures": { + "jsx": true, + "modules": true + }, + "env": { + "browser": true, + "node": true + }, + "parser": "babel-eslint", + "rules": { + "quotes": [2, "single"], + "strict": [2, "never"], + "react/jsx-uses-react": 2, + "react/jsx-uses-vars": 2, + "react/react-in-jsx-scope": 2 + }, + "plugins": [ + "react" + ] +} diff --git a/.jscsrc b/.jscsrc deleted file mode 100644 index aad5667..0000000 --- a/.jscsrc +++ /dev/null @@ -1,12 +0,0 @@ -{ - "excludeFiles": [ - ".git/**", - "node_modules/**", - "tests/coverage/**", - "dist/**" - ], - "fileExtensions": [".js"], - "preset": "google", - - "disallowMultipleVarDecl": null -} diff --git a/package.json b/package.json index 486d9d3..e07eeb7 100644 --- a/package.json +++ b/package.json @@ -14,12 +14,14 @@ "devDependencies": { "babel": "^5.8.23", "babel-core": "^5.0.12", + "babel-eslint": "^4.1.5", "babel-loader": "^5.0.0", "chai": "^2.2.0", "coveralls": "^2.11.2", + "eslint": "^1.9.0", + "eslint-plugin-react": "^3.8.0", "istanbul": "^0.3.13", "istanbul-instrumenter-loader": "^0.1.2", - "jscs": "^1.12.0", "karma": "^0.13.9", "karma-chai": "^0.1.0", "karma-cli": "0.1.1", @@ -42,7 +44,8 @@ "react-dom": "^0.14.0" }, "scripts": { - "pretest": "jscs --esnext ./", + "pretest": "npm run lint", + "lint": "eslint .", "test": "karma start --single-run", "coveralls": "cat tests/coverage/*/lcov.info | node_modules/coveralls/bin/coveralls.js", "compile": "babel -d dist/ src/", From 78ad146b0376df36fcdc5c5ff61b8d95d83d213e Mon Sep 17 00:00:00 2001 From: Ovidiu Chereches Date: Sun, 15 Nov 2015 17:06:56 +0200 Subject: [PATCH 6/6] Add note on React compatibility #14 --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 458b1c3..c422b0b 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,10 @@ A few examples where this can be useful: that exact state later on when debugging - "Pausing" the app state and resuming it later (nice for games) +React compatibility: +- `react-component-tree@0.2` with `react@0.13` and below +- `react-component-tree@0.3` with `react@0.14` and above + ## ComponentTree.serialize Generate a snapshot with the props and state of a component combined, including