├── .babelrc
├── README.md
├── lib
├── main.jsx
├── avatar.jsx
├── email.jsx
└── gravatar.jsx
├── test
├── helpers
│ └── browser.js
├── avatar.spec.js
├── email.spec.js
└── gravatar.spec.js
├── index.html
├── .gitignore
├── LICENSE
├── webpack.config.js
└── package.json
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["airbnb", "es2015", "stage-0"]
3 | }
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-testing-components-enzyme
2 | Sample repo for a blog post on testing react components with enzyme
3 |
4 | ## installation
5 | `npm i`
6 |
7 | ## start
8 | `npm run dev:hot`
9 |
10 | ## run tests
11 | `npm test`
--------------------------------------------------------------------------------
/lib/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {render} from 'react-dom';
3 | import Gravatar from './gravatar';
4 |
5 | const appRoot = document.getElementById('root');
6 |
7 | render(
8 | ,
9 | appRoot
10 | );
11 |
--------------------------------------------------------------------------------
/lib/avatar.jsx:
--------------------------------------------------------------------------------
1 | import React, {PropTypes} from 'react';
2 |
3 |
4 | export default class Avatar extends React.Component {
5 | render() {
6 | return (
7 |
8 |
9 | {this.props.email}
10 |
11 |
12 |
14 |
15 | Loading!
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/test/avatar.spec.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { mount, shallow } from 'enzyme';
3 | import {expect} from 'chai';
4 |
5 | import Avatar from '../lib/avatar';
6 |
7 | describe('', function () {
8 | it('should have an image to display the gravatar', function () {
9 | const wrapper = shallow();
10 | expect(wrapper.find('img')).to.have.length(1);
11 | });
12 |
13 | it('should have props for email and src', function () {
14 | const wrapper = shallow();
15 | expect(wrapper.props().email).to.be.defined;
16 | expect(wrapper.props().src).to.be.defined;
17 | });
18 | });
19 |
--------------------------------------------------------------------------------
/lib/email.jsx:
--------------------------------------------------------------------------------
1 | import React, {PropTypes} from 'react';
2 |
3 | export default class Email extends React.Component {
4 | constructor(props) {
5 | super(props);
6 | }
7 | render() {
8 | return (
9 |
10 |
13 |
14 |
15 | );
16 | }
17 | }
18 |
19 | Email.propTypes = {
20 | handleEmailChange: PropTypes.func,
21 | fetchGravatar: PropTypes.func,
22 | };
23 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 |
6 | # Runtime data
7 | pids
8 | *.pid
9 | *.seed
10 |
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 |
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 |
17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
18 | .grunt
19 |
20 | # node-waf configuration
21 | .lock-wscript
22 |
23 | # Compiled binary addons (http://nodejs.org/api/addons.html)
24 | build/Release
25 |
26 | # Dependency directory
27 | node_modules
28 |
29 | # Optional npm cache directory
30 | .npm
31 |
32 | # Optional REPL history
33 | .node_repl_history
34 |
35 | #ignore dist
36 | dist
37 |
--------------------------------------------------------------------------------
/test/email.spec.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { mount, shallow } from 'enzyme';
3 | import {expect} from 'chai';
4 |
5 | import Email from '../lib/email';
6 |
7 | describe('', function () {
8 | it('should have an input for the email', function () {
9 | const wrapper = shallow();
10 | expect(wrapper.find('input')).to.have.length(1);
11 | });
12 |
13 | it('should have a button', function () {
14 | const wrapper = shallow();
15 | expect(wrapper.find('button')).to.have.length(1);
16 | });
17 |
18 | it('should have props for handleEmailChange and fetchGravatar', function () {
19 | const wrapper = shallow();
20 | expect(wrapper.props().handleEmailChange).to.be.defined;
21 | expect(wrapper.props().fetchGravatar).to.be.defined;
22 | });
23 |
24 | });
25 |
--------------------------------------------------------------------------------
/lib/gravatar.jsx:
--------------------------------------------------------------------------------
1 | import React, {propTypes} from 'react';
2 | import md5 from 'md5';
3 |
4 | import Avatar from './avatar';
5 | import Email from './email';
6 |
7 | export default class Gravatar extends React.Component {
8 | constructor(props) {
9 | super(props);
10 | this.state = {
11 | email: 'someone@example.com',
12 | src: 'http://placehold.it/200x200'
13 | }
14 | }
15 |
16 | updateGravatar() {
17 | this.setState({
18 | src: `http://gravatar.com/avatar/${md5(this.state.email)}?s=200`
19 | });
20 | }
21 |
22 | updateEmail(event) {
23 | this.setState({email: event.target.value});
24 | }
25 |
26 | render() {
27 | return (
28 |
29 |
Avatar for:
30 |
31 |
32 |