Skip to content

[Tests] use enzyme-adapter-react-helper; test on multiple react versions #118

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

[Tests] use enzyme-adapter-react-helper; test on multiple react versions #118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
77b138e
[Tests] use enzyme-adapter-react-helper; test on multiple react versions
ljharb Nov 17, 2017
d966a31
[Tests] add node 9; allow non-LTS nodes to fail
ljharb Nov 17, 2017
927a1a6
[Tests] make tests pass on 0.14; add 0.13 and 16; allow 0.13 to fail
ljharb Nov 17, 2017
65ae8aa
[Tests] use `ifReact` from `enzyme-adapter-react-helper`
ljharb Nov 22, 2017
a29bc5b
[Tests] use `safeSFC` from `enzyme-adapter-react-helper`
ljharb Nov 26, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion .travis.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ language: node_js
os:
- linux
node_js:
- "9"
- "8"
- "7"
- "6"
Expand All @@ -18,7 +19,11 @@ script:
- 'if [ -n "${TEST-}" ]; then npm run tests-only ; fi'
sudo: false
env:
- TEST=true
- TEST=true REACT=16
- TEST=true REACT=15
- TEST=true REACT=15.4
- TEST=true REACT=0.14
- TEST=true REACT=0.13
matrix:
fast_finish: true
include:
Expand All @@ -28,3 +33,7 @@ matrix:
- os: osx
- env: TEST=true ALLOW_FAILURE=true
- env: COVERAGE=true
- node_js: "9"
- node_js: "7"
- node_js: "5"
- env: TEST=true REACT=0.13
4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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.2.1",
"eslint": "^4.11.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.8.0",
Expand Down
7 changes: 4 additions & 3 deletions test/.eslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@
},
"extends": "airbnb",
"rules": {
"import/no-extraneous-dependencies": [2, {
"devDependencies": true
}]
"prefer-arrow-callback": 0,
"react/prefer-stateless-function": 0,
"react/no-multi-comp": 0,
"react/prop-types": 0,
}
}
5 changes: 2 additions & 3 deletions test/_setup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
66 changes: 36 additions & 30 deletions test/withStyles_test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { render, shallow } from 'enzyme';
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';
Expand Down Expand Up @@ -59,7 +61,7 @@ describe('withStyles()', () => {
return null;
}

const WrappedComponent = withStyles(() => ({}))(MyComponent);
const WrappedComponent = withStyles(() => ({}))(safeSFC(MyComponent));
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is an interesting solution, but I think it actually makes the tests less readable. My preference would be to not include this at all, and just not run tests against React 0.13.

shallow(<WrappedComponent />);
expect(testInterface.create.callCount).to.equal(1);
});
Expand All @@ -69,7 +71,7 @@ describe('withStyles()', () => {
return null;
}

const result = withStyles(() => ({}))(MyComponent);
const result = withStyles(() => ({}))(safeSFC(MyComponent));
expect(result.displayName).to.equal('withStyles(MyComponent)');
});

Expand All @@ -79,7 +81,7 @@ describe('withStyles()', () => {
return null;
}

const Wrapped = withStyles(() => ({}))(MyComponent);
const Wrapped = withStyles(() => ({}))(safeSFC(MyComponent));
shallow(<Wrapped />).dive();
});

Expand All @@ -89,7 +91,7 @@ describe('withStyles()', () => {
return null;
}

const Wrapped = withStyles(() => ({}), { themePropName: 'foo' })(MyComponent);
const Wrapped = withStyles(() => ({}), { themePropName: 'foo' })(safeSFC(MyComponent));
shallow(<Wrapped />).dive();
});

Expand All @@ -103,7 +105,7 @@ describe('withStyles()', () => {
foo: {
color: color.red,
},
}))(MyComponent);
}))(safeSFC(MyComponent));
shallow(<Wrapped />).dive();
});

Expand All @@ -113,7 +115,7 @@ describe('withStyles()', () => {
return null;
}

const Wrapped = withStyles()(MyComponent);
const Wrapped = withStyles()(safeSFC(MyComponent));
shallow(<Wrapped />).dive();
});

Expand All @@ -127,7 +129,7 @@ describe('withStyles()', () => {
foo: {
color: '#ff0000',
},
}), { stylesPropName: 'bar' })(MyComponent);
}), { stylesPropName: 'bar' })(safeSFC(MyComponent));
shallow(<Wrapped />).dive();
});

Expand All @@ -136,7 +138,7 @@ describe('withStyles()', () => {
return null;
}

const Wrapped = withStyles(() => ({}))(MyComponent);
const Wrapped = withStyles(() => ({}))(safeSFC(MyComponent));
shallow(<Wrapped />);
expect(testInterface.flush.callCount).to.equal(0);
});
Expand All @@ -146,7 +148,7 @@ describe('withStyles()', () => {
return null;
}

const Wrapped = withStyles(() => ({}), { flushBefore: true })(MyComponent);
const Wrapped = withStyles(() => ({}), { flushBefore: true })(safeSFC(MyComponent));
shallow(<Wrapped />);
expect(testInterface.flush.callCount).to.equal(1);
});
Expand All @@ -157,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');
});

Expand All @@ -173,7 +175,7 @@ describe('withStyles()', () => {
foo: {
color: color.red,
},
}))(MyComponent);
}))(safeSFC(MyComponent));
const wrapper = shallow(<Wrapped />).dive();

expect(wrapper.prop('style')).to.eql({ color: '#990000' });
Expand All @@ -197,7 +199,7 @@ describe('withStyles()', () => {
foo: {
color: color.red,
},
}))(MyComponent);
}))(safeSFC(MyComponent));

// copied
const expectedPropTypes = deepmerge({}, MyComponent.propTypes);
Expand All @@ -218,19 +220,23 @@ describe('withStyles()', () => {
return null;
}

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 Wrapped = withStyles(() => ({}))(safeSFC(MyComponent));
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', () => {
ifReact('>= 15.3', it, it.skip)('with the pureComponent option set, extends React.PureComponent', () => {
function MyComponent() {
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);
Expand All @@ -240,18 +246,18 @@ describe('withStyles()', () => {

describe('css/cssNoRTL', () => {
it('css calls resolve method', () => {
function MyComponent() {
const MyComponent = safeSFC(function MyComponent() {
return <div {...css({ color: 'red' })} />;
}
});

shallow(<MyComponent />);
expect(testInterfaceResolveStub.callCount).to.equal(1);
});

it('cssNoRTL calls resolve method if resolveNoRTL does not exist', () => {
function MyComponent() {
const MyComponent = safeSFC(function MyComponent() {
return <div {...cssNoRTL({ color: 'red' })} />;
}
});

shallow(<MyComponent />);
expect(testInterfaceResolveStub.callCount).to.equal(1);
Expand Down Expand Up @@ -291,19 +297,19 @@ describe('RTL support', () => {

describe('css/cssNoRTL', () => {
it('css calls resolve method', () => {
function MyComponent() {
const MyComponent = safeSFC(function MyComponent() {
return <div {...css({ color: 'red' })} />;
}
});

shallow(<MyComponent />);
expect(resolveStub.callCount).to.equal(1);
expect(resolveNoRTLStub.callCount).to.equal(0);
});

it('cssNoRTL calls resolve method if resolveNoRTL does not exist', () => {
function MyComponent() {
const MyComponent = safeSFC(function MyComponent() {
return <div {...cssNoRTL({ color: 'red' })} />;
}
});

shallow(<MyComponent />);
expect(resolveStub.callCount).to.equal(0);
Expand All @@ -317,7 +323,7 @@ describe('RTL support', () => {
return null;
}

const WrappedComponent = withStyles(() => ({}))(MyComponent);
const WrappedComponent = withStyles(() => ({}))(safeSFC(MyComponent));
render(<WrappedComponent />);
expect(testInterface.create).to.have.property('callCount', 1);
});
Expand All @@ -327,7 +333,7 @@ describe('RTL support', () => {
return null;
}

const WrappedComponent = withStyles(() => ({}))(MyComponent);
const WrappedComponent = withStyles(() => ({}))(safeSFC(MyComponent));
render((
<DirectionProvider direction={DIRECTIONS.LTR}>
<WrappedComponent />
Expand All @@ -341,7 +347,7 @@ describe('RTL support', () => {
return null;
}

const WrappedComponent = withStyles(() => ({}))(MyComponent);
const WrappedComponent = withStyles(() => ({}))(safeSFC(MyComponent));
render((
<DirectionProvider direction={DIRECTIONS.RTL}>
<WrappedComponent />
Expand Down