Added tests for Players component

src/components/Players.js

@@ -1,10 +1,9 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
+import React, { Component } from "react";
+import { connect } from "react-redux";
 
-import { addPlayer } from '../actions/actions';
+import { addPlayer } from "../actions/actions";
 
-
-class Players extends Component {
+export class Players extends Component {
   constructor(props) {
     super(props);
     this.handleInput = this.handleInput.bind(this);
@@ -14,19 +13,27 @@ class Players extends Component {
     if (event.keyCode === 13) {
       /* enter key press */
       this.props.addPlayer(event.target.value);
-      event.target.value = '';
+      event.target.value = "";
     }
   }
 
   render() {
     let players = this.props.players.map((player, index) => {
-      return (<p className='player-text' key={index}>{player.name}</p>);
+      return (
+        <p className="player-text" key={index}>
+          {player.name}
+        </p>
+      );
     });
     return (
       <div>
         <h2>Players</h2>
         {players}
-        <input type='text' placeholder='Add player...' onKeyUp={this.handleInput}></input>
+        <input
+          type="text"
+          placeholder="Add player..."
+          onKeyUp={this.handleInput}
+        />
       </div>
     );
   }
@@ -36,6 +43,6 @@ const mapStateToProps = state => {
   return {
     players: state.appReducer.players
   };
-}
+};
 
 export default connect(mapStateToProps, { addPlayer })(Players);

src/components/tests/Players.test.js

@@ -0,0 +1,48 @@
+import React from "react";
+import renderer from "react-test-renderer";
+import Adapter from "enzyme-adapter-react-15";
+import { configure, shallow } from "enzyme";
+
+import { Players } from "./../Players";
+
+describe("Player Component", () => {
+  beforeAll(() => {
+    configure({ adapter: new Adapter() });
+  });
+
+  it("renders correctly when not passing players", () => {
+    const tree = renderer.create(<Players store={{}} players={[]} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it("renders correctly when passing players in", () => {
+    const tree = renderer
+      .create(<Players players={[{ name: "John" }, { name: "William" }]} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it("Calls addPlayer when enter is pressed", () => {
+    const mockAddPlayer = jest.fn();
+    const wrapper = shallow(
+      <Players
+        addPlayer={mockAddPlayer}
+        players={[{ name: "John" }, { name: "William" }]}
+      />
+    );
+    wrapper.instance().handleInput({ keyCode: 13, target: { value: "John" } });
+    expect(mockAddPlayer.mock.calls.length).toBe(1);
+  });
+
+  it("Doesn't call addPlayer when enter is not pressed", () => {
+    const mockAddPlayer = jest.fn();
+    const wrapper = shallow(
+      <Players
+        addPlayer={mockAddPlayer}
+        players={[{ name: "John" }, { name: "William" }]}
+      />
+    );
+    wrapper.instance().handleInput({ keyCode: 12, target: { value: "John" } });
+    expect(mockAddPlayer.mock.calls.length).toBe(0);
+  });
+});

src/components/tests/__snapshots__/Players.test.js.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Player Component renders correctly when not passing players 1`] = `
+<div>
+  <h2>
+    Players
+  </h2>
+  <input
+    onKeyUp={[Function]}
+    placeholder="Add player..."
+    type="text"
+  />
+</div>
+`;
+
+exports[`Player Component renders correctly when passing players in 1`] = `
+<div>
+  <h2>
+    Players
+  </h2>
+  <p
+    className="player-text"
+  >
+    John
+  </p>
+  <p
+    className="player-text"
+  >
+    William
+  </p>
+  <input
+    onKeyUp={[Function]}
+    placeholder="Add player..."
+    type="text"
+  />
+</div>
+`;