├── .babelrc
├── .gitignore
├── assets
    ├── homer.jpg
    └── main.css
├── package.json
├── readme.md
├── src
    └── components
    │   ├── FollowButton.jsx
    │   ├── ProfilePicture.jsx
    │   └── UserProfile.jsx
├── test
    └── avatarSpec.jsx
└── wallaby.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "presets": ["es2015", "react"]
3 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | /.idea


--------------------------------------------------------------------------------
/assets/homer.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wallabyjs/wallaby-react-component/98d5e965c669e0ae2aff926958cdff51713156a3/assets/homer.jpg


--------------------------------------------------------------------------------
/assets/main.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     font: 24px "Helvetica Neue", Helvetica, Arial, sans-serif;
 5 | }
 6 | 
 7 | body {
 8 |     margin-left: 20px;
 9 |     margin-top: 20px;
10 | }
11 | 
12 | p {
13 |     width: 200px;
14 |     height: 40px;
15 |     color: white;
16 |     border-radius: 5px;
17 |     text-align: center;
18 |     line-height: 38px;
19 | }
20 | 
21 | p.follow {
22 |     background-color: #0084B4;
23 | }
24 | 
25 | p.unfollow {
26 |     background-color: salmon;
27 | }
28 | 
29 | img {
30 |     width: 200px;
31 |     margin-bottom: 10px;
32 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "dependencies": {
 4 |     "react": "^0.14.7"
 5 |   },
 6 |   "devDependencies": {
 7 |     "babel-core": "^6.4.5",
 8 |     "babel-preset-es2015": "^6.3.13",
 9 |     "babel-preset-react": "^6.3.13",
10 |     "phantomjs-polyfill": "0.0.1"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | [![Wallaby.js](https://img.shields.io/badge/wallaby.js-configured-green.svg)](https://wallabyjs.com)
2 | 
3 | # React components testing with wallaby.js
4 | [See the tutorial for more details.](http://dm.gl/2015/03/11/wallaby-react/)
5 | 
6 | ![wallabyreacteditor 1](https://cloud.githubusercontent.com/assets/979966/7109910/4f1bd2be-e1eb-11e4-9159-a6213ed3336d.png)
7 | 


--------------------------------------------------------------------------------
/src/components/FollowButton.jsx:
--------------------------------------------------------------------------------
 1 | var FollowButton = React.createClass({
 2 | 
 3 |   handleClick() {
 4 |     this.setState({text: 'Unfollow'});
 5 |   },
 6 | 
 7 |   render() {
 8 |     return (
 9 |       <p onClick={this.handleClick} className={this.state ? 'unfollow' : 'follow'}>
10 |         {this.state && this.state.text || 'Follow ' + this.props.username}
11 |       </p>
12 |     );
13 |   }
14 | });


--------------------------------------------------------------------------------
/src/components/ProfilePicture.jsx:
--------------------------------------------------------------------------------
1 | var ProfilePicture = React.createClass({
2 |   render: function () {
3 |     return (
4 |       <img src={'assets/' + this.props.username + '.jpg'}/>
5 |     );
6 |   }
7 | });


--------------------------------------------------------------------------------
/src/components/UserProfile.jsx:
--------------------------------------------------------------------------------
 1 | var UserProfile = React.createClass({
 2 |   render: function() {
 3 |     return (
 4 |       <div>
 5 |         <ProfilePicture username={this.props.username} />
 6 |         <FollowButton username={this.props.username} />
 7 |       </div>
 8 |     );
 9 |   }
10 | });


--------------------------------------------------------------------------------
/test/avatarSpec.jsx:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var testUtils = React.addons.TestUtils;
 4 | 
 5 | describe('User Profile', function () {
 6 | 
 7 |   var instance;
 8 | 
 9 |   beforeEach(function () {
10 |     this.container = document.createElement('div');
11 |     document.body.appendChild(this.container);
12 |     instance = React.render(<UserProfile username='Homer' />, this.container);
13 |   });
14 | 
15 |   afterEach(function () {
16 |     this && document.body.removeChild(this.container);
17 |   });
18 | 
19 |   describe('Follow button', function () {
20 | 
21 |     it('should display user name', function () {
22 |       expect(instance.getDOMNode().textContent).toBe('Follow Homer');
23 |     });
24 | 
25 |     it('should change its text to "Unfollow" when clicked', function () {
26 |       testUtils.Simulate.click(testUtils.findRenderedDOMComponentWithTag(instance, 'p'));
27 |       expect(instance.getDOMNode().textContent).toBe('Unfollow');
28 |     });
29 |   });
30 | 
31 | });
32 | 


--------------------------------------------------------------------------------
/wallaby.js:
--------------------------------------------------------------------------------
 1 | module.exports = function (wallaby) {
 2 |   return {
 3 | 
 4 |     files: [
 5 |       {pattern: 'node_modules/react/dist/react-with-addons.js', instrument: false},
 6 |       'assets/**',
 7 |       'src/**'
 8 |     ],
 9 | 
10 |     tests: [
11 |       'test/**/*Spec.jsx'
12 |     ],
13 | 
14 |     compilers: {
15 |       '**/*.js*': wallaby.compilers.babel()
16 |     }
17 |   };
18 | };
19 | 


--------------------------------------------------------------------------------