feat: step 5 - added tests

Author: Antoine Lelaisant

.eslintrc.js

@@ -4,10 +4,12 @@ module.exports = {
     'node': true,
     'es6': true,
     'browser': true,
+    'jest/globals': true,
   },
   'plugins': [
     'react',
     'react-hooks',
+    'jest',
   ],
   'parser': 'babel-eslint',
   'extends': [

jsconfig.json

@@ -7,7 +7,8 @@
   ],
   "paths": {
     "assets": ["./assets/*"],
-    "components": ["./components/*"]
-    "modules": ["./modules/*"]
+    "components": ["./components/*"],
+    "modules": ["./modules/*"],
+    "utils": ["./utils/*"]
   }
 }

package.json

@@ -45,6 +45,7 @@
     "@testing-library/user-event": "^12.6.3",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.21.0",
+    "eslint-plugin-jest": "^24.2.1",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0"
   }

src/components/Game/Game.test.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import { Game } from './Game'
+import { Provider } from 'react-redux'
+import { MemoryRouter as Router } from 'react-router-dom'
+import { render, screen, waitFor } from '@testing-library/react'
+import configureStore from '../../configureStore'
+
+describe('Game', () => {
+  it('it renders correctly', async () => {
+    const initialState = {
+      game: { 
+        lines: 6,
+        linesPerMillisecond: 2,
+        skills: {}
+      }
+    }
+
+    render(
+      <Provider store={configureStore(initialState)}>
+        <Router>
+          <Game />
+        </Router>
+      </Provider>
+    )
+
+    expect(screen.getByText(/6 lines/)).toBeInTheDocument()
+    expect(screen.getByText(/per second: 20/)).toBeInTheDocument()
+    expect(screen.getByText(/Skills/)).toBeInTheDocument()
+    expect(screen.getByText(/Store/)).toBeInTheDocument()
+
+    await waitFor(
+      () => expect(screen.getByText(/8 lines/)).toBeInTheDocument(),
+      { timeout: 150 }
+    )
+    await waitFor(
+      () => expect(screen.getByText(/10 lines/)).toBeInTheDocument(),
+      { timeout: 150 }
+    )
+  })
+})

src/components/Gitcoin/Gitcoin.js

@@ -13,6 +13,7 @@ export const Gitcoin = () => {
     <button
       className="gitcoin"
       onClick={handleClick}
+      aria-label="Gitcoin"
     >
       <img src={githubIcon} alt="Gitcoin" />
     </button>

src/components/Gitcoin/Gitcoin.test.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Gitcoin } from './Gitcoin'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { click } from 'modules/game'
+import configureStore from '../../configureStore'
+
+jest.mock('react-redux', () => {
+  const dispatch = jest.fn()
+
+  return {
+    ...jest.requireActual('react-redux'),
+    useDispatch: () => dispatch
+  }
+})
+import { Provider, useDispatch } from 'react-redux'
+
+describe('Gitcoin', () => {
+  it('Allows to click', () => {
+    const initialState = {
+      game: { lines: 6, linesPerMillisecond: 2 }
+    }
+
+    render(
+      <Provider store={configureStore(initialState)}>
+        <Gitcoin />
+      </Provider>
+    )
+
+    expect(screen.getByAltText(/Gitcoin/i)).toBeInTheDocument()
+
+    const dispatch = useDispatch()
+
+    fireEvent.click(screen.getByLabelText(/Gitcoin/))
+    expect(dispatch).toHaveBeenCalledWith(click())
+  })
+})

src/components/Home.test.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Home } from './Home'
+import { MemoryRouter as Router } from 'react-router-dom'
+import { render, screen } from '@testing-library/react'
+
+describe('Home', () => {
+  it('renders correctly', () => {
+    render(
+      <Router>
+        <Home />
+      </Router>
+    )
+
+    expect(screen.getByText(/Dogs have boundless enthusiasm/i)).toBeInTheDocument()
+    expect(screen.getByText(/Play/i)).toBeInTheDocument()
+  })
+})

src/components/Score.js

@@ -1,9 +1,10 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
+import numberFormat from 'utils/numberFormat'
 
 export const Score = () => {
-  const lines = useSelector(state => parseInt(state.game.lines))
-  const linesPerSecond = useSelector(state => parseInt(state.game.linesPerMillisecond * 10))
+  const lines = useSelector(state => numberFormat(state.game.lines))
+  const linesPerSecond = useSelector(state => numberFormat(state.game.linesPerMillisecond * 10))
 
   return (
     <>

src/components/Score.test.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Score } from './Score'
+import { Provider } from 'react-redux'
+import { render, screen } from '@testing-library/react'
+import configureStore from '../configureStore'
+
+describe('Score', () => {
+  it('should displays the number of lines', () => {
+    const initialState = {
+      game: { lines: 6, linesPerMillisecond: 2 }
+    }
+
+    render(
+      <Provider store={configureStore(initialState)}>
+        <Score />
+      </Provider>
+    )
+
+    expect(screen.getByText(/6 lines/i)).toBeInTheDocument()
+    expect(screen.getByText(/per second: 20/i)).toBeInTheDocument()
+  })
+})

src/components/Skills/Section.test.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { Section } from './Section'
+
+describe('Section', () => {
+  it('Displays the owned skills', () => {
+    render(<Section itemName="Bash" number={3} />)
+
+    expect(screen.getByText('Bash')).toBeInTheDocument()
+    expect(screen.getAllByAltText('Bash')).toHaveLength(3)
+  })
+})
+

src/components/Skills/Skills.test.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Provider } from 'react-redux'
+import { render, screen } from '@testing-library/react'
+import { Skills } from './Skills'
+import configureStore from '../../configureStore'
+
+
+describe('Store', () => {
+  it('Renders correctly', () => {
+    const initialState = {
+      game: { 
+        skills: { 'Bash': 2, 'Git': 3, 'Javascript': 4 } 
+      }
+    }
+
+    render(
+      <Provider store={configureStore(initialState)}>
+        <Skills />
+      </Provider>
+    )
+
+    expect(screen.getByText(/Bash/i)).toBeInTheDocument()
+    expect(screen.getByText(/Git/i)).toBeInTheDocument()
+    expect(screen.getByText(/Javascript/i)).toBeInTheDocument()
+  })
+})
+

src/components/Store/Item.js

@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Button from '@material-ui/core/Button'
 import Typography from '@material-ui/core/Typography'
+import numberFormat from 'utils/numberFormat'
 import './Item.css'
 
 export const Item = ({ item, lines, onBuy }) => {
@@ -20,15 +21,16 @@ export const Item = ({ item, lines, onBuy }) => {
         <img src={item.icon} alt={item.name} />
         <div>
           <Typography variant="subtitle1">{item.name}</Typography>
-          <small>{linePerSecond} lines per second</small>
+          <small>{numberFormat(linePerSecond)} lines per second</small>
         </div>
       </div>
       <Button 
+        name="buy"
         variant="contained"
         color="secondary"
         disabled={!canBuy(item)}
       >
-        {item.price}
+        {numberFormat(item.price)}
       </Button>
     </div>
   )

src/components/Store/Item.test.js

@@ -0,0 +1,61 @@
+import React from 'react'
+import BashIcon from 'devicon/icons/bash/bash-original.svg'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Item } from './Item'
+
+describe('Item', () => {
+  it('Renders a buyable item', () => {
+    const item = {
+      name: 'Bash',
+      price: 10,
+      multiplier: 0.1,
+      icon: BashIcon
+    }
+
+    const onBuy = jest.fn()
+
+    render(
+      <Item 
+        item={item}
+        lines={150}
+        onBuy={onBuy}
+      />
+    )
+
+    expect(screen.getByText(/Bash/i)).toBeInTheDocument()
+    expect(screen.getByText(/1 lines per second/i)).toBeInTheDocument()
+    expect(screen.getByRole('button')).not.toBeDisabled()
+
+    fireEvent.click(screen.getByRole('button'))
+
+    expect(onBuy).toHaveBeenCalledWith(item)
+  })
+
+  it('Renders a non buyable item', () => {
+    const item = {
+      name: 'Bash',
+      price: 10,
+      multiplier: 0.1,
+      icon: BashIcon
+    }
+
+    const onBuy = jest.fn()
+
+    render(
+      <Item 
+        item={item}
+        lines={0}
+        onBuy={onBuy}
+      />
+    )
+
+    expect(screen.getByText(/Bash/i)).toBeInTheDocument()
+    expect(screen.getByText(/1 lines per second/i)).toBeInTheDocument()
+    expect(screen.getByRole(/button/i)).toBeDisabled()
+
+    fireEvent.click(screen.getByRole('button'))
+
+    expect(onBuy).not.toHaveBeenCalledWith(item)
+  })
+})
+

src/components/Store/Store.test.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Provider } from 'react-redux'
+import { render, screen } from '@testing-library/react'
+import { Store } from './Store'
+import configureStore from '../../configureStore'
+
+
+describe('Store', () => {
+  it('Renders correctly', () => {
+    const initialState = {
+      game: { lines: 6 }
+    }
+
+    render(
+      <Provider store={configureStore(initialState)}>
+        <Store />
+      </Provider>
+    )
+
+    expect(screen.getByText(/Bash/i)).toBeInTheDocument()
+    expect(screen.getByText(/Git/i)).toBeInTheDocument()
+    expect(screen.getByText(/Javascript/i)).toBeInTheDocument()
+    expect(screen.getByText(/React/i)).toBeInTheDocument()
+    expect(screen.getByText(/Vim/i)).toBeInTheDocument()
+  })
+})

src/configureStore.js

@@ -1,8 +1,8 @@
 import { createStore } from 'redux'
 import { rootReducer } from './modules'
 
-export default () => {
-  const store = createStore(rootReducer)
+export default (initialState = {}) => {
+  const store = createStore(rootReducer, initialState)
 
   return store
 }

src/modules/game.js

@@ -1,7 +1,7 @@
 // Actions
-const CLICK = 'game::CLICK'
-const BUY_ITEM = 'game::BUY_ITEM'
-const LOOP = 'game::LOOP'
+export const CLICK = 'game::CLICK'
+export const BUY_ITEM = 'game::BUY_ITEM'
+export const LOOP = 'game::LOOP'
 
 // Action creators
 export const click = () => ({
@@ -20,7 +20,7 @@ export const loop = () => ({
 const INITIAL_STATE = {
   lines: 0,
   linesPerMillisecond: 0,
-  skills: []
+  skills: {}
 }
 
 export const reducer = (state = INITIAL_STATE, action) => {