From 77b138e8e355e016bad4ac71821e9deda9816702 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Fri, 17 Nov 2017 16:22:44 -0600 Subject: [PATCH 1/5] [Tests] use enzyme-adapter-react-helper; test on multiple react versions --- .travis.yml | 5 ++++- package.json | 4 +++- test/_setup.js | 5 ++--- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/.travis.yml b/.travis.yml index 296b0b76..903c8a7d 100644 --- a/.travis.yml +++ b/.travis.yml @@ -18,7 +18,10 @@ script: - 'if [ -n "${TEST-}" ]; then npm run tests-only ; fi' sudo: false env: - - TEST=true + - TEST=true REACT=15 + - TEST=true REACT=15.4 + - TEST=true REACT=0.14 + - TEST=true REACT=0.13 matrix: fast_finish: true include: diff --git a/package.json b/package.json index 7c381a77..2178cde5 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,9 @@ "pretest": "npm run --silent lint", "preversion": "npm run test && npm run check-changelog && npm run check-only-changelog-changed", "tag": "git tag v$npm_package_version", + "react": "enzyme-adapter-react-install 15.4", "test": "npm run tests-only", + "pretests-only": "npm run react", "tests-only": "npm run mocha --silent test", "version:major": "npm --no-git-tag-version version major", "version:minor": "npm --no-git-tag-version version minor", @@ -52,7 +54,7 @@ "babel-register": "^6.26.0", "chai": "^4.1.2", "enzyme": "^3.2.0", - "enzyme-adapter-react-15.4": "^1.0.5", + "enzyme-adapter-react-helper": "^1.0.3", "eslint": "^4.11.0", "eslint-config-airbnb": "^16.1.0", "eslint-plugin-import": "^2.8.0", diff --git a/test/_setup.js b/test/_setup.js index 199147a0..20b4274b 100644 --- a/test/_setup.js +++ b/test/_setup.js @@ -1,4 +1,3 @@ -import Adapter from 'enzyme-adapter-react-15.4'; -import { configure } from 'enzyme'; +import configure from 'enzyme-adapter-react-helper'; -configure({ adapter: new Adapter() }); +configure(); From d966a317fd509bb2bfd790d76d1662c8d08f2702 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Fri, 17 Nov 2017 16:33:46 -0600 Subject: [PATCH 2/5] [Tests] add node 9; allow non-LTS nodes to fail --- .travis.yml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.travis.yml b/.travis.yml index 903c8a7d..0da3d336 100644 --- a/.travis.yml +++ b/.travis.yml @@ -2,6 +2,7 @@ language: node_js os: - linux node_js: + - "9" - "8" - "7" - "6" @@ -31,3 +32,6 @@ matrix: - os: osx - env: TEST=true ALLOW_FAILURE=true - env: COVERAGE=true + - node_js: "9" + - node_js: "7" + - node_js: "5" From 927a1a6273d444c863103799f28562586f672061 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Fri, 17 Nov 2017 16:33:12 -0600 Subject: [PATCH 3/5] [Tests] make tests pass on 0.14; add 0.13 and 16; allow 0.13 to fail --- .travis.yml | 2 ++ package.json | 1 + test/.eslintrc | 6 +++--- test/withStyles_test.jsx | 19 ++++++++++++++----- 4 files changed, 20 insertions(+), 8 deletions(-) diff --git a/.travis.yml b/.travis.yml index 0da3d336..3ae91266 100644 --- a/.travis.yml +++ b/.travis.yml @@ -19,6 +19,7 @@ script: - 'if [ -n "${TEST-}" ]; then npm run tests-only ; fi' sudo: false env: + - TEST=true REACT=16 - TEST=true REACT=15 - TEST=true REACT=15.4 - TEST=true REACT=0.14 @@ -35,3 +36,4 @@ matrix: - node_js: "9" - node_js: "7" - node_js: "5" + - env: TEST=true REACT=0.13 diff --git a/package.json b/package.json index 2178cde5..64984dab 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,7 @@ "react-test-renderer": "~15.4.2", "rimraf": "^2.6.2", "safe-publish-latest": "^1.1.1", + "semver": "^5.4.1", "sinon": "^4.1.2", "sinon-sandbox": "^1.0.2" }, diff --git a/test/.eslintrc b/test/.eslintrc index 506af945..d1cb8331 100644 --- a/test/.eslintrc +++ b/test/.eslintrc @@ -4,8 +4,8 @@ }, "extends": "airbnb", "rules": { - "import/no-extraneous-dependencies": [2, { - "devDependencies": true - }] + "react/prefer-stateless-function": 0, + "react/no-multi-comp": 0, + "react/prop-types": 0, } } diff --git a/test/withStyles_test.jsx b/test/withStyles_test.jsx index 36357b18..4c0ba0a4 100644 --- a/test/withStyles_test.jsx +++ b/test/withStyles_test.jsx @@ -5,10 +5,15 @@ import { render, shallow } from 'enzyme'; import deepmerge from 'deepmerge'; import sinon from 'sinon-sandbox'; import DirectionProvider, { DIRECTIONS } from 'react-with-direction/dist/DirectionProvider'; +import semver from 'semver'; import ThemedStyleSheet from '../src/ThemedStyleSheet'; import { css, cssNoRTL, withStyles, withStylesPropTypes } from '../src/withStyles'; +const itIfReact = function itIfReact(range) { + return semver.intersects(range, React.version) ? it : it.skip; +}; + describe('withStyles()', () => { const defaultTheme = { color: { @@ -219,13 +224,17 @@ describe('withStyles()', () => { } const Wrapped = withStyles(() => ({}))(MyComponent); - expect(Object.getPrototypeOf(Wrapped)).to.equal(React.Component); - expect(Object.getPrototypeOf(Wrapped.prototype)).to.equal(React.Component.prototype); - expect(Object.getPrototypeOf(Wrapped)).not.to.equal(React.PureComponent); - expect(Object.getPrototypeOf(Wrapped.prototype)).not.to.equal(React.PureComponent.prototype); + const wrappedProto = Object.getPrototypeOf(Wrapped); + const wrappedProtoProto = Object.getPrototypeOf(Wrapped.prototype); + expect(wrappedProto).to.equal(React.Component); + expect(wrappedProtoProto).to.equal(React.Component.prototype); + if (React.PureComponent) { + expect(wrappedProto).not.to.equal(React.PureComponent); + expect(wrappedProtoProto).not.to.equal(React.PureComponent.prototype); + } }); - it('with the pureComponent option set, extends React.PureComponent', () => { + itIfReact('>= 15.3', 'with the pureComponent option set, extends React.PureComponent', () => { function MyComponent() { return null; } From 65ae8aa5672fcf305a917343186a1e330a6408b2 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Wed, 22 Nov 2017 11:48:17 -0600 Subject: [PATCH 4/5] [Tests] use `ifReact` from `enzyme-adapter-react-helper` --- package.json | 3 +-- test/withStyles_test.jsx | 8 ++------ 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 64984dab..d8955670 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "babel-register": "^6.26.0", "chai": "^4.1.2", "enzyme": "^3.2.0", - "enzyme-adapter-react-helper": "^1.0.3", + "enzyme-adapter-react-helper": "^1.1.0", "eslint": "^4.11.0", "eslint-config-airbnb": "^16.1.0", "eslint-plugin-import": "^2.8.0", @@ -70,7 +70,6 @@ "react-test-renderer": "~15.4.2", "rimraf": "^2.6.2", "safe-publish-latest": "^1.1.1", - "semver": "^5.4.1", "sinon": "^4.1.2", "sinon-sandbox": "^1.0.2" }, diff --git a/test/withStyles_test.jsx b/test/withStyles_test.jsx index 4c0ba0a4..b7b677fb 100644 --- a/test/withStyles_test.jsx +++ b/test/withStyles_test.jsx @@ -5,15 +5,11 @@ import { render, shallow } from 'enzyme'; import deepmerge from 'deepmerge'; import sinon from 'sinon-sandbox'; import DirectionProvider, { DIRECTIONS } from 'react-with-direction/dist/DirectionProvider'; -import semver from 'semver'; +import ifReact from 'enzyme-adapter-react-helper/build/ifReact'; import ThemedStyleSheet from '../src/ThemedStyleSheet'; import { css, cssNoRTL, withStyles, withStylesPropTypes } from '../src/withStyles'; -const itIfReact = function itIfReact(range) { - return semver.intersects(range, React.version) ? it : it.skip; -}; - describe('withStyles()', () => { const defaultTheme = { color: { @@ -234,7 +230,7 @@ describe('withStyles()', () => { } }); - itIfReact('>= 15.3', 'with the pureComponent option set, extends React.PureComponent', () => { + ifReact('>= 15.3', it, it.skip)('with the pureComponent option set, extends React.PureComponent', () => { function MyComponent() { return null; } From a29bc5be7b3c78541ad678d234e2764aabff1f16 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Sun, 26 Nov 2017 12:26:33 -0800 Subject: [PATCH 5/5] [Tests] use `safeSFC` from `enzyme-adapter-react-helper` --- package.json | 2 +- test/.eslintrc | 1 + test/withStyles_test.jsx | 51 ++++++++++++++++++++-------------------- 3 files changed, 28 insertions(+), 26 deletions(-) diff --git a/package.json b/package.json index d8955670..b3baad1e 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "babel-register": "^6.26.0", "chai": "^4.1.2", "enzyme": "^3.2.0", - "enzyme-adapter-react-helper": "^1.1.0", + "enzyme-adapter-react-helper": "^1.2.1", "eslint": "^4.11.0", "eslint-config-airbnb": "^16.1.0", "eslint-plugin-import": "^2.8.0", diff --git a/test/.eslintrc b/test/.eslintrc index d1cb8331..aeca955e 100644 --- a/test/.eslintrc +++ b/test/.eslintrc @@ -4,6 +4,7 @@ }, "extends": "airbnb", "rules": { + "prefer-arrow-callback": 0, "react/prefer-stateless-function": 0, "react/no-multi-comp": 0, "react/prop-types": 0, diff --git a/test/withStyles_test.jsx b/test/withStyles_test.jsx index b7b677fb..35f30395 100644 --- a/test/withStyles_test.jsx +++ b/test/withStyles_test.jsx @@ -6,6 +6,7 @@ import deepmerge from 'deepmerge'; import sinon from 'sinon-sandbox'; import DirectionProvider, { DIRECTIONS } from 'react-with-direction/dist/DirectionProvider'; import ifReact from 'enzyme-adapter-react-helper/build/ifReact'; +import safeSFC from 'enzyme-adapter-react-helper/build/safeSFC'; import ThemedStyleSheet from '../src/ThemedStyleSheet'; import { css, cssNoRTL, withStyles, withStylesPropTypes } from '../src/withStyles'; @@ -60,7 +61,7 @@ describe('withStyles()', () => { return null; } - const WrappedComponent = withStyles(() => ({}))(MyComponent); + const WrappedComponent = withStyles(() => ({}))(safeSFC(MyComponent)); shallow(); expect(testInterface.create.callCount).to.equal(1); }); @@ -70,7 +71,7 @@ describe('withStyles()', () => { return null; } - const result = withStyles(() => ({}))(MyComponent); + const result = withStyles(() => ({}))(safeSFC(MyComponent)); expect(result.displayName).to.equal('withStyles(MyComponent)'); }); @@ -80,7 +81,7 @@ describe('withStyles()', () => { return null; } - const Wrapped = withStyles(() => ({}))(MyComponent); + const Wrapped = withStyles(() => ({}))(safeSFC(MyComponent)); shallow().dive(); }); @@ -90,7 +91,7 @@ describe('withStyles()', () => { return null; } - const Wrapped = withStyles(() => ({}), { themePropName: 'foo' })(MyComponent); + const Wrapped = withStyles(() => ({}), { themePropName: 'foo' })(safeSFC(MyComponent)); shallow().dive(); }); @@ -104,7 +105,7 @@ describe('withStyles()', () => { foo: { color: color.red, }, - }))(MyComponent); + }))(safeSFC(MyComponent)); shallow().dive(); }); @@ -114,7 +115,7 @@ describe('withStyles()', () => { return null; } - const Wrapped = withStyles()(MyComponent); + const Wrapped = withStyles()(safeSFC(MyComponent)); shallow().dive(); }); @@ -128,7 +129,7 @@ describe('withStyles()', () => { foo: { color: '#ff0000', }, - }), { stylesPropName: 'bar' })(MyComponent); + }), { stylesPropName: 'bar' })(safeSFC(MyComponent)); shallow().dive(); }); @@ -137,7 +138,7 @@ describe('withStyles()', () => { return null; } - const Wrapped = withStyles(() => ({}))(MyComponent); + const Wrapped = withStyles(() => ({}))(safeSFC(MyComponent)); shallow(); expect(testInterface.flush.callCount).to.equal(0); }); @@ -147,7 +148,7 @@ describe('withStyles()', () => { return null; } - const Wrapped = withStyles(() => ({}), { flushBefore: true })(MyComponent); + const Wrapped = withStyles(() => ({}), { flushBefore: true })(safeSFC(MyComponent)); shallow(); expect(testInterface.flush.callCount).to.equal(1); }); @@ -158,7 +159,7 @@ describe('withStyles()', () => { } MyComponent.foo = 'bar'; - const Wrapped = withStyles(() => ({}), { flushBefore: true })(MyComponent); + const Wrapped = withStyles(() => ({}), { flushBefore: true })(safeSFC(MyComponent)); expect(Wrapped.foo).to.equal('bar'); }); @@ -174,7 +175,7 @@ describe('withStyles()', () => { foo: { color: color.red, }, - }))(MyComponent); + }))(safeSFC(MyComponent)); const wrapper = shallow().dive(); expect(wrapper.prop('style')).to.eql({ color: '#990000' }); @@ -198,7 +199,7 @@ describe('withStyles()', () => { foo: { color: color.red, }, - }))(MyComponent); + }))(safeSFC(MyComponent)); // copied const expectedPropTypes = deepmerge({}, MyComponent.propTypes); @@ -219,7 +220,7 @@ describe('withStyles()', () => { return null; } - const Wrapped = withStyles(() => ({}))(MyComponent); + const Wrapped = withStyles(() => ({}))(safeSFC(MyComponent)); const wrappedProto = Object.getPrototypeOf(Wrapped); const wrappedProtoProto = Object.getPrototypeOf(Wrapped.prototype); expect(wrappedProto).to.equal(React.Component); @@ -235,7 +236,7 @@ describe('withStyles()', () => { return null; } - const Wrapped = withStyles(() => ({}), { pureComponent: true })(MyComponent); + const Wrapped = withStyles(() => ({}), { pureComponent: true })(safeSFC(MyComponent)); expect(Object.getPrototypeOf(Wrapped)).not.to.equal(React.Component); expect(Object.getPrototypeOf(Wrapped.prototype)).not.to.equal(React.Component.prototype); expect(Object.getPrototypeOf(Wrapped)).to.equal(React.PureComponent); @@ -245,18 +246,18 @@ describe('withStyles()', () => { describe('css/cssNoRTL', () => { it('css calls resolve method', () => { - function MyComponent() { + const MyComponent = safeSFC(function MyComponent() { return
; - } + }); shallow(); expect(testInterfaceResolveStub.callCount).to.equal(1); }); it('cssNoRTL calls resolve method if resolveNoRTL does not exist', () => { - function MyComponent() { + const MyComponent = safeSFC(function MyComponent() { return
; - } + }); shallow(); expect(testInterfaceResolveStub.callCount).to.equal(1); @@ -296,9 +297,9 @@ describe('RTL support', () => { describe('css/cssNoRTL', () => { it('css calls resolve method', () => { - function MyComponent() { + const MyComponent = safeSFC(function MyComponent() { return
; - } + }); shallow(); expect(resolveStub.callCount).to.equal(1); @@ -306,9 +307,9 @@ describe('RTL support', () => { }); it('cssNoRTL calls resolve method if resolveNoRTL does not exist', () => { - function MyComponent() { + const MyComponent = safeSFC(function MyComponent() { return
; - } + }); shallow(); expect(resolveStub.callCount).to.equal(0); @@ -322,7 +323,7 @@ describe('RTL support', () => { return null; } - const WrappedComponent = withStyles(() => ({}))(MyComponent); + const WrappedComponent = withStyles(() => ({}))(safeSFC(MyComponent)); render(); expect(testInterface.create).to.have.property('callCount', 1); }); @@ -332,7 +333,7 @@ describe('RTL support', () => { return null; } - const WrappedComponent = withStyles(() => ({}))(MyComponent); + const WrappedComponent = withStyles(() => ({}))(safeSFC(MyComponent)); render(( @@ -346,7 +347,7 @@ describe('RTL support', () => { return null; } - const WrappedComponent = withStyles(() => ({}))(MyComponent); + const WrappedComponent = withStyles(() => ({}))(safeSFC(MyComponent)); render((