test(*): add unit tests

Author: topheman

src/components/Profile/__tests__/Profile.spec.js

@@ -0,0 +1,48 @@
+/* eslint-disable no-unused-expressions, react/prop-types */
+import { expect } from 'chai';
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import Profile from '../Profile';
+import Panel from '../../common/Panel';
+import DisplayInfosPanel from '../../common/DisplayInfosPanel';
+
+const mockProfile = {
+  data: {
+    html_url: 'https://github.com/topheman',
+    login: 'topheman',
+    avatar_url: 'https://avatars.githubusercontent.com/u/985982?v=3',
+    name: 'Christophe Rosset',
+    location: 'Paris',
+    created_at: '2011-08-17T11:59:42Z',
+    blog: 'http://labs.topheman.com/',
+    followers: 37,
+    following: 2,
+    bio: 'JavaScript FTW'
+  }
+};
+
+describe('components/Profile', () => {
+  describe('state/render', () => {
+    describe('profile fully hydrated', () => {
+      const wrapper = shallow(<Profile profile={mockProfile} />);
+      it('should render a Panel with props.profile.data.login as title', () => {
+        expect(wrapper.find(Panel).props().title).to.be.equal('topheman');
+      });
+      it('should render a proper anchor with link & title', () => {
+        const a = wrapper.find('a').first();
+        expect(a.props().href).to.be.equal('https://github.com/topheman');
+        expect(a.props().title).to.be.equal('Visit topheman profile on Github');
+      });
+      it('should render a proper image profile with correct avatar url (adapted)', () => {
+        expect(wrapper.find('img').first().props().src).to.be.equal('https://avatars.githubusercontent.com/u/985982?v=3&s=130');
+      });
+    });
+    describe('profile not fully hydrated', () => {
+      it('should return a placeholder panel', () => {
+        const wrapper = shallow(<Profile profile={{pristineLogin: 'topheman'}} />);
+        expect(wrapper.equals(<DisplayInfosPanel infos={{pristineLogin: 'topheman'}} originalTitle="topheman" />)).to.be.true;
+      });
+    });
+  });
+});

src/components/ProfileBox/ProfileBox.js

@@ -12,7 +12,10 @@ const ProfileBox = ({user}) => {
 };
 
 ProfileBox.propTypes = {
-  user: React.PropTypes.object.isRequired
+  user: React.PropTypes.shape({
+    login: React.PropTypes.string.isRequired,
+    $avatar_url: React.PropTypes.string.isRequired
+  })
 };
 
 export default ProfileBox;

src/components/ProfileBox/__tests__/ProfileBox.spec.js

@@ -0,0 +1,27 @@
+/* eslint-disable no-unused-expressions, react/prop-types */
+import { expect } from 'chai';
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import ProfileBox from '../ProfileBox';
+import { Link } from 'react-router';
+
+const mockUser = {
+  login: 'topheman',
+  $avatar_url: 'https://avatars.githubusercontent.com/u/985982?v=3&s=130'
+};
+
+describe('components/ProfileBox', () => {
+  describe('state/render', () => {
+    const wrapper = shallow(<ProfileBox user={mockUser} />);
+    it('should render link with correct props', () => {
+      expect(wrapper.find(Link).prop('to')).to.be.equal('/github/user/topheman');
+    });
+    it('should render an img with src same as props.user.$avatar_url', () => {
+      expect(wrapper.contains(<img src="https://avatars.githubusercontent.com/u/985982?v=3&s=130" width="40"/>)).to.be.true;
+    });
+    it('should render the user login', () => {
+      expect(wrapper.contains(<strong>topheman</strong>)).to.be.true;
+    });
+  });
+});

src/components/ProfileList/__tests__/ProfileList.spec.js

@@ -0,0 +1,44 @@
+/* eslint-disable no-unused-expressions, react/prop-types */
+import { expect } from 'chai';
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import ProfileList from '../ProfileList';
+import ProfileBox from '../../ProfileBox/ProfileBox';
+
+describe('components/ProfileList', () => {
+  describe('state/render', () => {
+    describe('case props.results not hydrated with data', () => {
+      it('should render default message if props.results=null', () => {
+        const wrapper = shallow(<ProfileList results={null} />);
+        expect(wrapper.type()).to.be.equal('p');
+      });
+      it('should render the error if props.results.error is set', () => {
+        const wrapper = shallow(<ProfileList results={{error: 'Something went wrong'}} />);
+        expect(wrapper.equals(<div>Something went wrong</div>)).to.be.true;
+      });
+      it('should show "No results" if props.results.total_count=0', () => {
+        const wrapper = shallow(<ProfileList results={{total_count: 0}} />);
+        expect(wrapper.equals(<div>No results.</div>)).to.be.true;
+      });
+    });
+    describe('case props.results hydrated with data', () => {
+      it('header should show "Total result" in case props.results.total_count=1', () => {
+        const wrapper = shallow(<ProfileList results={{total_count: 1, items: [{$avatar_url: 'someurl', id: 42, login: 'foo'}] }} />);
+        expect(wrapper.find('.panel-heading').text()).to.equal('Total result : 1 / showing : 1');
+      });
+      it('header should show "Total results" in case props.results.total_count>1', () => {
+        const wrapper = shallow(<ProfileList results={{total_count: 2, items: [{$avatar_url: 'someurl', id: 42, login: 'foo'}, {$avatar_url: 'someurl', id: 43, login: 'bar'}] }} />);
+        expect(wrapper.find('.panel-heading').text()).to.equal('Total results : 2 / showing : 2');
+      });
+      it('should render correctly the ProfileBox in the list', () => {
+        const wrapper = shallow(<ProfileList results={{total_count: 1, items: [{$avatar_url: 'someurl', id: 42, login: 'foo'}] }} />);
+        expect(wrapper.find(ProfileBox).first().prop('user').id).to.equal(42);
+      });
+      it('should render correctly multiple ProfileBox in the list', () => {
+        const wrapper = shallow(<ProfileList results={{total_count: 1, items: [{$avatar_url: 'someurl', id: 42, login: 'foo'}, {$avatar_url: 'someurl', id: 43, login: 'bar'}] }} />);
+        expect(wrapper.find(ProfileBox).length).to.equal(2);
+      });
+    });
+  });
+});

src/components/Repos/Repos.js

@@ -12,27 +12,16 @@ export default class Repos extends React.Component {
     reposGotoPage: React.PropTypes.func.isRequired
   }
 
-  constructor(props) {
-
-    super(props);
-
-    // init context bindings - due to diff between React.createClass and ES6 class
-    this.reposGotoPage = this.reposGotoPage.bind(this);
-
-  }
-  reposGotoPage(pageNum) {
-    this.props.reposGotoPage(pageNum);
-  }
   render() {
-    const { repositories } = this.props;
+    const { repositories, reposGotoPage } = this.props;
     const fetching = repositories.fetching;
     const originalTitle = repositories.pristineLogin + "'s repositories";
     if (repositories && repositories.data) {
       const repos = repositories.data;
       return (
         <Panel title={originalTitle}>
           <div className="panel-body repos-list">
-            <ReposPaginator infos={repositories.infos} reposGotoPage={this.reposGotoPage} fetching={fetching}/>
+            <ReposPaginator infos={repositories.infos} reposGotoPage={reposGotoPage} fetching={fetching}/>
             <div className="list-group">
               {repos.map((repo) => {
                 return (
@@ -45,7 +34,7 @@ export default class Repos extends React.Component {
                 );
               })}
             </div>
-            <ReposPaginator infos={repositories.infos} reposGotoPage={this.reposGotoPage} fetching={fetching}/>
+            <ReposPaginator infos={repositories.infos} reposGotoPage={reposGotoPage} fetching={fetching}/>
           </div>
         </Panel>
       );

src/components/Repos/__tests__/Repos.spec.js

@@ -0,0 +1,48 @@
+/* eslint-disable no-unused-expressions, react/prop-types */
+import { expect } from 'chai';
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import Repos from '../Repos';
+import DisplayInfosPanel from '../../common/DisplayInfosPanel';
+import DisplayStars from '../../common/DisplayStars';
+
+function noop() {}
+
+describe('components/ProfileBox', () => {
+  describe('state/render', () => {
+    it('should render a placeholder if props.repositories.data not hydrated', () => {
+      const mockRepositories = { fetching: false, pristineLogin: 'topheman' };
+      const wrapper = shallow(<Repos repositories={mockRepositories} reposGotoPage={noop} />);
+      expect(wrapper.equals(<DisplayInfosPanel infos={mockRepositories} originalTitle="topheman's repositories"/>)).to.be.true;
+    });
+    describe('check render for list of repositories', () => {
+      const mockRepositories = {
+        fetching: false,
+        infos: {},
+        pristineLogin: 'topheman',
+        data: [
+          { html_url: 'https://github.com/topheman/react-es6-redux', name: 'react-es6-redux', stargazers_count: 57, full_name: 'topheman/react-es6-redux' },
+          { html_url: 'https://github.com/topheman/webpack-babel-starter', name: 'webpack-babel-starter', stargazers_count: 39, full_name: 'topheman/webpack-babel-starter' },
+          { html_url: 'https://github.com/topheman/rxjs-experiments', name: 'rxjs-experiments', stargazers_count: 19, full_name: 'topheman/rxjs-experiments' }
+        ]
+      };
+      const wrapper = shallow(<Repos repositories={mockRepositories} reposGotoPage={noop} />);
+      it('should render the correct amount of links to repos', () => {
+        expect(wrapper.find('a').length).to.equal(3);
+      });
+      it('should render links properly', () => {
+        const anchor = wrapper.find('a').get(1);
+        expect(anchor.props.href).to.equal('https://github.com/topheman/webpack-babel-starter');
+        expect(anchor.props.title).to.equal('topheman/webpack-babel-starter');
+      });
+      it('should render stargazer properly', () => {
+        const displayStars = wrapper.find(DisplayStars).get(1);
+        expect(displayStars.props.number).to.equal(39);
+      });
+    });
+    describe('check paginators', () => {
+
+    });
+  });
+});

src/components/common/__tests__/DisplayInfosPanel.spec.js

@@ -9,10 +9,14 @@ import Panel from '../Panel';
 
 describe('components/common/DisplayInfosPanel', () => {
   describe('state/render', () => {
-    it('should render a spinner when props.infos.fetching=true', () => {
+    it('should render a spinner at fetching=true when props.infos.fetching=true', () => {
       const wrapper = shallow(<DisplayInfosPanel infos={{fetching: true}} originalTitle={""} />);
       expect(wrapper.find(Spinner).props().fetching).to.be.true;
     });
+    it('should render a spinner at fetching=false when props.infos.fetching=false', () => {
+      const wrapper = shallow(<DisplayInfosPanel infos={{fetching: false}} originalTitle={""} />);
+      expect(wrapper.find(Spinner).props().fetching).to.be.false;
+    });
     it('should render a panel with a title=props.originalTitle when props.infos.fetching=true', () => {
       const wrapper = shallow(<DisplayInfosPanel infos={{fetching: true}} originalTitle={"Hello World"} />);
       expect(wrapper.find(Panel).props().title).to.equal('Hello World');

src/components/common/__tests__/Panel.spec.js

@@ -0,0 +1,19 @@
+/* eslint-disable no-unused-expressions, react/prop-types */
+import { expect } from 'chai';
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import Panel from '../Panel';
+
+describe('components/common/Panel', () => {
+  describe('state/render', () => {
+    it('should render title', () => {
+      const wrapper = shallow(<Panel title="Hello World"><div>Hie there</div></Panel>);
+      expect(wrapper.contains(<h3 className="panel-title">Hello World</h3>)).to.be.true;
+    });
+    it('should render children', () => {
+      const wrapper = shallow(<Panel title="Hello World"><div>Hie there</div></Panel>);
+      expect(wrapper.contains(<div>Hie there</div>)).to.be.true;
+    });
+  });
+});

src/components/common/__tests__/Spinner.spec.js

@@ -0,0 +1,21 @@
+/* eslint-disable no-unused-expressions, react/prop-types */
+import { expect } from 'chai';
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import Spinner from '../Spinner';
+
+describe('components/common/Spinner', () => {
+  describe('state/render', () => {
+    it('should render empty div when props.fetching!==true', () => {
+      const wrapper = shallow(<Spinner />);
+      expect(wrapper.find('.bounce1').length).to.equal(0);
+    });
+    it('should render nested divs when props.fetching=true', () => {
+      const wrapper = shallow(<Spinner fetching />);
+      expect(wrapper.find('.bounce1').length).to.equal(1);
+      expect(wrapper.find('.bounce2').length).to.equal(1);
+      expect(wrapper.find('.bounce3').length).to.equal(1);
+    });
+  });
+});

src/components/common/__tests__/Tr.spec.js

@@ -0,0 +1,36 @@
+/* eslint-disable no-unused-expressions, react/prop-types */
+import { expect } from 'chai';
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import Tr from '../Tr';
+
+describe('components/common/Tr', () => {
+  describe('state/render', () => {
+    it('should render 2 columns by default', () => {
+      const wrapper = shallow(<Tr label="Hello" value="World" />);
+      expect(wrapper.find('td').length).to.equal(2);
+      expect(wrapper.contains(<td>Hello</td>)).to.be.true;
+      expect(wrapper.contains(<td>World</td>)).to.be.true;
+    });
+    it('should render in 1 column if props.display=colspan', () => {
+      const wrapper = shallow(<Tr value="Hello World" display="colspan" />);
+      expect(wrapper.find('td').length).to.equal(1);
+      expect(wrapper.contains(<td colSpan="2">Hello World</td>)).to.be.true;
+    });
+    it('should render value as a link if props.type=link', () => {
+      const wrapper = shallow(<Tr value="http://labs.topheman.com" label="Website" type="link" />);
+      expect(wrapper.contains(<a href="http://labs.topheman.com">http://labs.topheman.com</a>)).to.be.true;
+    });
+    it('should render value as date (without hours/min/sec) if value is instance of a Date', () => {
+      const value = new Date('2014-04-24');
+      const expected = 'Thu Apr 24 2014';
+      const wrapper = shallow(<Tr value={value} label="Date" />);
+      expect(wrapper.contains(<td>{expected}</td>)).to.be.true;
+    });
+    it('should render no nested td if no props.value passed', () => {
+      const wrapper = shallow(<Tr />);
+      expect(wrapper.find('td').length).to.equal(0);
+    });
+  });
+});

src/redux/modules/__tests__/counter.spec.js

@@ -0,0 +1,22 @@
+/* eslint-disable no-unused-expressions, react/prop-types */
+import { expect } from 'chai';
+
+import { default as reducer, increment } from '../counter';
+
+const INCREMENT = 'counter/INCREMENT';
+
+describe('redux/modules/counter', () => {
+  describe('reducer', () => {
+    it('should return default state = 0', () => {
+      expect(reducer()).to.equal(0);
+    });
+    it('should return increment state on INCREMENT action', () => {
+      expect(reducer(2, {type: INCREMENT})).to.equal(3);
+    });
+  });
+  describe('action creators', () => {
+    it('increment() should return proper action', () => {
+      expect(increment()).to.eql({type: INCREMENT});
+    });
+  });
+});