Commit 2d18835f by bert

学习单元测试

parent b188f449
......@@ -63,8 +63,6 @@
"karma-spec-reporter": "0.0.23",
"karma-webpack": "^1.7.0",
"mocha": "^2.3.4",
"phantomjs": "^1.9.19",
"phantomjs-polyfill": "0.0.1",
"react-addons-test-utils": "^0.14.6",
"sinon": "^1.17.2"
},
......@@ -73,7 +71,7 @@
"lint": "eslint --ext .js,.jsx src",
"start": "dora -p 8001 --plugins \"webpack,proxy,livereload?enableJs=false&injectHost=127.0.0.1,browser-history?index=/src/entries/index.html\"",
"test-antd": "atool-test-mocha ./src/**/__tests__/*-test.js",
"test": "mocha --compilers js:babel-register --recursive ./tests/test_helper.js",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive",
"test:watch": "npm test -- --watch"
}
}
import React, { Component, PropTypes } from 'react';
const propTypes = {
onMount: PropTypes.func.isRequired,
isActive: PropTypes.bool
};
class CommentList extends Component {
componentDidMount() {
this.props.onMount();
}
render() {
return (
<ul>
<li> Comment One </li>
</ul>
)
}
}
CommentList.propTypes = propTypes;
export default CommentList;
\ No newline at end of file
import React from 'react';
// Once we set up Karma to run our tests through webpack
// we will no longer need to have these long relative paths
import CommentList from '../../src/views/Demo/CommentList';
import {
describeWithDOM,
mount,
shallow,
spyLifecycle
} from 'enzyme';
describe('(Component) CommentList', () => {
// using special describeWithDOM helper that enzyme
// provides so if other devs on my team don't have JSDom set up
// properly or are using old version of node it won't bork their test suite
//
// All of our tests that depend on mounting should go inside one of these
// special describe blocks
describeWithDOM('Lifecycle methods', () => {
it('calls componentDidMount', () => {
spyLifecyle(CommentList);
const props = {
onMount: () => {}, // an anonymous function in ES6 arrow syntax
isActive: false
}
// using destructuring to pass props down
// easily and then mounting the component
mount(<CommentList {...props} />);
// CommentList's componentDidMount should have been
// called once. spyLifecyle attaches sinon spys so we can
// make this assertion
expect(
CommentList.prototype.componentDidMount.calledOnce
).to.be.true;
});
it('calls onMount prop once it mounts', () => {
// create a spy for the onMount function
const props = { onMount: sinon.spy() };
// mount our component
mount(<CommentList {...props} />);
// expect that onMount was called
expect(props.onMount.calledOnce).to.be.true;
});
});
});
\ No newline at end of file
import React from 'react'; // required to get test to work. we can get around this later with more configuration
import { shallow } from 'enzyme'; // method from enzyme which allows us to do shallow render
import Root from '../../views/Demo/Root'; // import our soon to be component
import Root from '../../src/views/Demo/Root'; // import our soon to be component
// describe('(Container) Root', () => {
// it('renders as a <div>', () => {
// const wrapper = shallow(<Root />);
// expect(wrapper.type()).to.eql('div');
// });
// it('has style with height 100%', () => {
// const wrapper = shallow(<Root />);
// const expectedStyles = {
// height: '100%',
// background: '#333'
// }
// expect(wrapper.prop('style')).to.eql(expectedStyles);
// });
// it('contains a header explaining the app', () => {
// const wrapper = shallow(<Root />);
// expect(wrapper.find('.welcome-header')).to.have.length(1);
// });
// });
describe('(Container) Root', () => {
const wrapper = shallow(<Root />);
it('renders as a <div>', () => {
const wrapper = shallow(<Root />);
expect(wrapper.type()).to.eql('div');
});
it('has style with height 100%', () => {
const wrapper = shallow(<Root />);
const expectedStyles = {
height: '100%',
background: '#333'
......@@ -18,7 +39,6 @@ describe('(Container) Root', () => {
});
it('contains a header explaining the app', () => {
const wrapper = shallow(<Root />);
expect(wrapper.find('.welcome-header')).to.have.length(1);
});
});
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment