Setup test for client and add tests

.eslintrc

@@ -21,6 +21,7 @@
       "react"
     ],
     "rules": {
-      "react/jsx-filename-extension": 0
+      "react/jsx-filename-extension": 0,
+      "import/no-extraneous-dependencies": ["error", {"devDependencies": true}]
     }
   }

client/src/components/UI/NavBar.jsx

@@ -25,9 +25,7 @@ const ButtonAppBar = ({ classes, isLoggedIn }) => (
         </Typography>
         {isLoggedIn
           ? (
-            <>
-              <Button color="inherit">Lead Board</Button>
-            </>
+            <Button color="inherit">Leader Board</Button>
           )
           : <Button color="inherit" href="/auth/signin">login</Button>}
       </Toolbar>

client/src/components/UI/__tests__/navBar.test.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import NavBar from '../NavBar';
+
+describe('<NavBar />', () => {
+  it('should render', () => {
+    const wrapper = shallow(<NavBar />);
+    expect(wrapper.dive().find('div').length).toBe(1);
+  });
+  it('should contain LogIn button by default', () => {
+    const wrapper = shallow(<NavBar />);
+    expect(wrapper.dive().contains('login')).toBe(true);
+  });
+  it('should not contain Leader Board by default', () => {
+    const wrapper = shallow(<NavBar />);
+    expect(wrapper.dive().contains('Leader Board')).toBe(false);
+  });
+  it('should not contain LogIn button if user has already logged in', () => {
+    const wrapper = shallow(<NavBar isLoggedIn />);
+    expect(wrapper.dive().contains('login')).toBe(false);
+  });
+  it('should contain Leader Board by default', () => {
+    const wrapper = shallow(<NavBar isLoggedIn />);
+    expect(wrapper.dive().contains('Leader Board')).toBe(true);
+  });
+});

client/src/components/UI/__tests__/scoreCard.test.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Table from '@material-ui/core/Table';
+import TableRow from '@material-ui/core/TableRow';
+import ScoreCard from '../ScoreCard';
+
+describe('<ScoreCard />', () => {
+  it('should render just one Table at a time', () => {
+    const wrapper = shallow(<ScoreCard />);
+    expect(wrapper.dive().find(Table).length).toBe(1);
+  });
+  it('should render three Rows if its not detailed scorecard', () => {
+    const wrapper = shallow(<ScoreCard />);
+    expect(wrapper.dive().find(TableRow).length).toBe(3);
+  });
+  it('should render five Rows if its detailed scorecard', () => {
+    const wrapper = shallow(<ScoreCard isDetailed />);
+    expect(wrapper.dive().find(TableRow).length).toBe(5);
+  });
+});

client/src/setupTests.js

@@ -0,0 +1,4 @@
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });