#160928262 Test files in Home module

client/src/modules/Home/components/CardItem.jsx

@@ -4,74 +4,73 @@ import { NavLink } from 'react-router-dom';
 
 const CardItems = ({
   item, favorite, lock, toolTip, progressBar, addFavorites, isFavorited
-}) => {
-  return (
-    <div>
-      <div className="col s12 m6 l3 team-card">
-        <div className="card">
-          <div className={`card-header ${progressBar[0]}`}>
-            <span className="card-title">{item.name}</span>
-            <a
-              onClick={() => { addFavorites(item.id); }}
-              href="#!"
-              data-tip="Add to favorites"
-              className={isFavorited ? `btn-floating favorite-icons halfway-fab waves-effect waves-light favorite-btn ${favorite}` : `btn-floating halfway-fab waves-effect waves-light favorite-btn ${favorite}`}
-            >
-              <i className="material-icons">favorite</i>
-            </a>
-          </div>
-          <div className="card-description black-text">
-            <p>{item.description}</p>
-          </div>
-          <div className="card-icons">
-            <div
-              className="row progress-bar"
-              id="progress-bar"
-              data-tip={`${item.progress}%`}
-            >
-              <div className={`progress center-block col s12 ${progressBar[1]}`}>
-                <div
-                  className={`determinate ${progressBar[0]}`}
-                  style={{ width: `${item.progress}%` }}
-                />
-              </div>
+}) => (
+  <div>
+    <div className="col s12 m6 l3 team-card">
+      <div className="card">
+        <div className={`card-header ${progressBar[0]}`}>
+          <span className="card-title">{item.name}</span>
+          <a
+            id="add-favorite-anchor"
+            onClick={() => { addFavorites(item.id); }}
+            href="#!"
+            data-tip="Add to favorites"
+            className={isFavorited ? `btn-floating favorite-icons halfway-fab waves-effect waves-light favorite-btn ${favorite}` : `btn-floating halfway-fab waves-effect waves-light favorite-btn ${favorite}`}
+          >
+            <i className="material-icons">favorite</i>
+          </a>
+        </div>
+        <div className="card-description black-text">
+          <p>{item.description}</p>
+        </div>
+        <div className="card-icons">
+          <div
+            className="row progress-bar"
+            id="progress-bar"
+            data-tip={`${item.progress}%`}
+          >
+            <div className={`progress center-block col s12 ${progressBar[1]}`}>
+              <div
+                className={`determinate ${progressBar[0]}`}
+                style={{ width: `${item.progress}%` }}
+              />
             </div>
-            <NavLink
-              to={`teams/${item.id}`}
-              className=" waves-effect waves-light uppercase"
-            >
+          </div>
+          <NavLink
+            to={`teams/${item.id}`}
+            className=" waves-effect waves-light uppercase"
+          >
               View team
-            </NavLink>
-            <i className="tiny-small material-icons right" data-tip={toolTip}>
-              {lock}
-            </i>
-            <a
-              className="waves-effect waves-light right modal-trigger icon-link"
-              href="#addMember"
-            >
-              <i className="tiny-small material-icons" data-tip="add member">
+          </NavLink>
+          <i className="tiny-small material-icons right" data-tip={toolTip}>
+            {lock}
+          </i>
+          <a
+            className="waves-effect waves-light right modal-trigger icon-link"
+            href="#addMember"
+          >
+            <i className="tiny-small material-icons" data-tip="add member">
                 person_add
-              </i>
-            </a>
-            <i
-              className="tiny-small material-icons right"
-              data-tip={`manage ${item.members} member(s)`}
-            >
-              groups
             </i>
+          </a>
+          <i
+            className="tiny-small material-icons right"
+            data-tip={`manage ${item.members} member(s)`}
+          >
+              groups
+          </i>
 
-            <i
-              className="tiny-small material-icons right"
-              data-tip="admin settings"
-            >
+          <i
+            className="tiny-small material-icons right"
+            data-tip="admin settings"
+          >
               settings
-            </i>
-          </div>
+          </i>
         </div>
       </div>
     </div>
-  );
-};
+  </div>
+);
 
 
 CardItems.propTypes = {

client/src/modules/Home/components/Cards.jsx

@@ -6,7 +6,7 @@ import HOC from '../../HOC';
 // thunk actions
 import { toggleFavoritesAction, clearTeams } from '../../../redux/actions/teams';
 
-class Cards extends Component {
+export class Cards extends Component {
   static propTypes = {
     teams: PropTypes.object.isRequired,
     toggleFavoritesAction: PropTypes.func.isRequired,
@@ -43,14 +43,18 @@ class Cards extends Component {
   renderCards = HOC;
 
   render() {
-    return this.renderCards(
-      this.addFavorites,
-      this.props.teams
+    return (
+      <span>
+        {this.renderCards(
+          this.addFavorites,
+          this.props.teams
+        )}
+      </span>
     );
   }
 }
 
-const mapStateToProps = state => ({
+export const mapStateToProps = state => ({
   teamsState: state.teams.teams
 });
 

client/src/modules/Home/container/index.jsx

@@ -13,7 +13,7 @@ import Modal from '../../common/Modals/AddMember';
 import Footer from '../../common/Footer';
 import config from '../../../config';
 
-class Home extends Component {
+export class Home extends Component {
   static propTypes = {
     fetchTeams: PropTypes.func.isRequired,
     clearTeams: PropTypes.func.isRequired,
@@ -38,7 +38,7 @@ class Home extends Component {
       offset: 0,
       searchOffset: 0,
       hasMore: true,
-      searchInput: '',
+      searchInput: ''
       // userSearch: ''
     };
 
@@ -183,7 +183,7 @@ class Home extends Component {
   }
 }
 
-const mapStateToProps = state => ({
+export const mapStateToProps = state => ({
   teams: state.teams,
   users: state.users,
   auth: state.auth

client/src/tests/modules/Home/components/Card.test.jsx

@@ -0,0 +1,110 @@
+/* eslint max-nested-callbacks:off */
+/* global jest:true, */
+import { shallow } from 'enzyme';
+import React from 'react';
+import { Cards, mapStateToProps } from '../../../../modules/Home/components/Cards';
+
+const sampleProps = {
+  teams: { teams: [] },
+  toggleFavoritesAction: () => {},
+  clearTeams: () => {},
+  teamsState: [],
+  favoriteId: []
+};
+const getShallowObj = (props = {}) => shallow(<Cards
+  {...sampleProps} {...props} />);
+
+
+describe('Testing CardItem Component', () => {
+  describe('the elements rendered by the component', () => {
+    it('should match snapshot', () => {
+      const wrapper = getShallowObj();
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('mapStateToProps', () => {
+    it('should return an object that contains the value in teams', () => {
+      const mockTeam = 'mock-team';
+      const mockState = {
+        teams: { teams: mockTeam }
+      };
+      const mappedProp = mapStateToProps(mockState);
+      expect(mappedProp.teamsState)
+        .toBe(mockTeam);
+    });
+  });
+
+  describe('the methods in the component', () => {
+    describe('componentWillReceiveProps', () => {
+      it('should be called when props change', () => {
+        const spy = jest.spyOn(Cards.prototype, 'componentWillReceiveProps');
+        const wrapper = getShallowObj();
+        const initSpy = jest.fn();
+        global.M = {
+          Autocomplete: { init: initSpy }
+        };
+        wrapper.setProps({ name: 'name' });
+        expect(spy).toHaveBeenCalled();
+        expect(initSpy).toHaveBeenCalled();
+      });
+    });
+
+
+    describe('addFavorites method', () => {
+      it('should be called when props.teamsState.map function', () => {
+        const props = {
+          teamsState: []
+        };
+        const spy = jest.spyOn(props.teamsState, 'map');
+        const wrapper = getShallowObj(props);
+        wrapper.instance().addFavorites();
+        expect(spy).toHaveBeenCalled();
+      });
+
+      it('should be called when props.toggleFavoritesAction when the a props.team.id equals the id passed ', () => {
+        const id = 3;
+
+        const favActionSpy = jest.fn();
+        const props = {
+          teamsState: [{ id: 1 }, { id: 2 }, { id: 3 }],
+          toggleFavoritesAction: favActionSpy
+        };
+        const spy = jest.spyOn(props.teamsState, 'map');
+        const wrapper = getShallowObj(props);
+        wrapper.instance().addFavorites(id);
+        expect(spy).toHaveBeenCalled();
+        expect(favActionSpy).toHaveBeenCalled();
+      });
+      it('should  not props.toggleFavoritesAction when the id passed is not in props.teamsState', () => {
+        const id = 0;
+
+        const favActionSpy = jest.fn();
+        const props = {
+          teamsState: [{ id: 1 }, { id: 2 }, { id: 3 }],
+          toggleFavoritesAction: favActionSpy
+        };
+        const spy = jest.spyOn(props.teamsState, 'map');
+        const wrapper = getShallowObj(props);
+        wrapper.instance().addFavorites(id);
+        expect(spy).toHaveBeenCalled();
+        expect(favActionSpy).toHaveBeenCalledTimes(0);
+      });
+    });
+    describe('componentWillUnmount', () => {
+      it('should be called when component unmounts', () => {
+        const spy = jest.spyOn(Cards.prototype, 'componentWillUnmount');
+        const wrapper = getShallowObj();
+        wrapper.unmount();
+        expect(spy).toHaveBeenCalled();
+      });
+      it('should call props.clearTeams', () => {
+        const clearTeamsSpy = jest.fn();
+        const wrapper = getShallowObj({ clearTeams: clearTeamsSpy });
+        wrapper.unmount();
+        expect(clearTeamsSpy).toHaveBeenCalled();
+      });
+    });
+  });
+});
+

client/src/tests/modules/Home/components/CardItem.test.jsx

@@ -0,0 +1,82 @@
+/* eslint max-nested-callbacks:off */
+/* eslint max-len: off */
+/* global jest:true, */
+import { shallow } from 'enzyme';
+import React from 'react';
+import CardItem from '../../../../modules/Home/components/CardItem';
+
+
+const sampleProps = {
+  item: {
+    name: 'sample name',
+    description: 'Sample Description',
+    id: 0,
+    progress: '10',
+    members: 'mock-members'
+  },
+  favorite: '',
+  lock: '',
+  toolTip: '',
+  progressBar: [],
+  addFavorites: () => {},
+  isFavorited: false
+};
+const getShallowObj = (props = {}) => shallow(<CardItem
+  {...sampleProps} {...props} />);
+
+describe('Testing CardItem Component', () => {
+  describe('the elements rendered by the component', () => {
+    it('should match snapshot', () => {
+      const wrapper = getShallowObj();
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+  describe('the props passed to it as argument', () => {
+    describe('isFavorited prop', () => {
+      it('should add class "props.favorite" to #add-favorite-anchor when isFavorited === true', () => {
+        const sampleFav = 'favorite-class';
+        const wrapper = getShallowObj({ favorite: sampleFav, isFavorited: true });
+        const element = wrapper.find(`#add-favorite-anchor[className*="favorite-icons"]`);
+        expect(element.length)
+          .toBe(1);
+      });
+      it('should add class "props.favorite" to #add-favorite-anchor when isFavorited === false', () => {
+        const sampleFav = 'favorite-class';
+        const wrapper = getShallowObj({ favorite: sampleFav, isFavorited: false });
+        const element = wrapper.find(`#add-favorite-anchor[className*="favorite-btn"]`);
+        expect(element.length)
+          .toBe(1);
+      });
+    });
+    describe('item prop', () => {
+      it('should render a span with className = "card-title" with text equal to props.item.description', () => {
+        const wrapper = getShallowObj();
+        const span = wrapper.find("span.card-title");
+        expect(span.text())
+          .toBe(sampleProps.item.name);
+      });
+
+      it('the div with #progress-bar should contain prop data-tip= props.item.progress', () => {
+        const wrapper = getShallowObj();
+        expect(wrapper.find(`#progress-bar[data-tip="${sampleProps.item.progress}%"]`).length)
+          .toBe(1);
+      });
+      it('should render an <i> wiith data-tip=item.members', () => {
+        const wrapper = getShallowObj();
+        expect(wrapper.find(`i[data-tip*="${sampleProps.item.members}"]`).length)
+          .toBe(1);
+      });
+      it('the onClick method of a#add-favorite-anchor should call addFavorites with props.item.id', () => {
+        const addFavSpy = jest.fn();
+        const wrapper = getShallowObj({ addFavorites: addFavSpy });
+        wrapper.find("#add-favorite-anchor")
+          .simulate('click');
+        expect(addFavSpy)
+          .toHaveBeenCalledTimes(1);
+        expect(addFavSpy)
+          .toHaveBeenCalledWith(sampleProps.item.id);
+      });
+    });
+  });
+});
+