Game end and scoring system

**Components **

Parent component

• Game

export class Game extends Component {
  constructor() {
    super()
    this.state = {
      level: 0,
      totalErrors: 0,
      totalCorrect: 0,
      shortcutSet: [
        { name: "Copy", combo: ['Control', 'c'] },
        { name: "Cut", combo: ['Control', 'x'] },
        { name: "Undo", combo: ['Control', 'z'] },
        { name: "Paste", combo: ['Control', 'v'] },
      ],
      currentShortcut: 0,
      gameComplete: false,
     //added this
      gameLength: 2000
    }
  }
  componentDidMount = () => {
    setTimeout(() => {
      this.setState({gameComplete: true})
    }, this.state.gameLength);
  }

Here we are setting a timeout to game length

Child Component

• GameComplete

import React, { Component } from 'react'

export class GameComplete extends Component {
  constructor(props){
    super(props)
  }
  render() {
    return (
      <div>
        <p>Game Complete</p>
        <p>Total Correct: {this.props.score}</p>
        <p>Total Mistakes: {this.props.mistakes}</p>
      </div>
    )
  }
}

import React from 'react'
import GameComplete from './gameComplete.js'
import { shallow } from 'enzyme'

it('renders without crashing', () => {
  shallow(<GameComplete />)
})

it(' says game complete', () => {
  const wrapper = shallow(<GameComplete />)
  const message = <p>Game Complete</p>
  expect(wrapper).toContainReact(message)
})

it('says score', () => {
  const wrapper = shallow(<GameComplete score={7} mistakes={2} />)
  const score = <p>Total Correct: 7</p>
  expect(wrapper).toContainReact(score)
})

it('says mistakes',() => {
  const wrapper = shallow(<GameComplete score={7} mistakes={2} />)
  const mistakes = <p>Total Mistakes: 2</p>
  expect(wrapper).toContainReact(mistakes)
})