TDD

package.json
{
  "scripts": {
    "test": "NODE_OPTIONS=--experimental-vm-modules npx jest",
    "build": "webpack"
  },
  "devDependencies": {
    "jest": "^27.4.7",
    "jsdom": "^11.12.0",
    "webpack": "^5.67.0",
    "webpack-cli": "^4.9.2"
  }
}

webpack.config.js
import webpack from 'webpack'
import path from 'path'

export default [{
  name: 'client',
  mode: 'production',
  context: path.resolve(),
  entry: {
    javascript: ['./src/index.js']
  },
  output: {
    filename: './js/bundle.js',
    path: path.resolve('dist'),
  },
}]

test/game.js
describe('Game', () => {
  test('Should return empty game board', () => {
    const game = new Game()

    const board = game.getState()

    expect(board).toEqual([
      ['', '', ''],
      ['', '', ''],
      ['', '', '']
    ])
  })
})

test/game.js
+ class Game {
+   getState() {
+     return null
+   }
+ }

test/game.js
  class Game {
    getState() {
-     return null
+     return [
+       ['', '', ''],
+       ['', '', ''],
+       ['', '', '']
+     ]
    }
  }

src/Game.js
export default class Game {
  getState() {
    return [
      ['', '', ''],
      ['', '', ''],
      ['', '', '']
    ]
  }
}

test/game.js
import Game from '../src/Game'

const initialGameBoard = [
  ['', '', ''],
  ['', '', ''],
  ['', '', '']
]

let game
beforeEach(() => { game = new Game() })

describe('Game', () => {
  test('Should return empty game board', () => {
    const board = game.getState()

    expect(board).toEqual(initialGameBoard)
  })
})

test/game.js
+ test('Writes user\'s symbol in top left cell', () => {
+   const x = 0, y = 0
+
+   game.acceptUserMove(x, y)
+   const board = game.getState()
+
+   expect(board[x][y]).toEqual('×')
+ })

src/Game.js
+ acceptUserMove(x, y) {
+
+ }

src/Game.js
  export default class Game {
+   constructor() {
+     this._board = [
+       ['', '', ''],
+       ['', '', ''],
+       ['', '', '']
+     ]
+   }
+
    getState() {
-     return [
-       ['', '', ''],
-       ['', '', ''],
-       ['', '', '']
-     ]
+     return this._board
    }
+
    acceptUserMove(x, y) {
+     this._board[0][0] = '×'
    }
  }

test/game.js
import Game from '../src/Game'

const userMoveSymbol = '×'
const initialGameBoard = [
  ['', '', ''],
  ['', '', ''],
  ['', '', '']
]

let game
beforeEach(() => { game = new Game() })

describe('Game', () => {
  // ...

  test('Writes user\'s symbol in top left cell', () => {
    const x = 0, y = 0

    game.acceptUserMove(x, y)
    const board = game.getState()

    expect(board[x][y]).toEqual(userMoveSymbol)
  })
})

src/Game.js
export default class Game {
  constructor() {
    this._userMoveSymbol = '×'
    // ...
  }

  // ...

  acceptUserMove(x, y) {
    this._updateBoard(0, 0)
  }

  _updateBoard(x, y) {
    this._board[x][y] = this._userMoveSymbol
  }
}

test/game.js
test('Writes user\'s symbol in cell with given coordinates', () => {
  const x = 1, y = 1

  game.acceptUserMove(x, y)
  const board = game.getState()

  expect(board[x][y]).toEqual(userMoveSymbol)
})

src/Game.js
- this._updateBoard(0, 0)
+ this._updateBoard(x, y)

test/game.js
- test('Writes user\'s symbol in top left cell', () => {
-   const x = 0, y = 0
-
-   game.acceptUserMove(x, y)
-   const board = game.getState()
-
-   expect(board[x][y]).toEqual(userMoveSymbol)
- })

  test('Writes user\'s symbol in cell with given coordinates', () => {
    const x = 1, y = 1

    game.acceptUserMove(x, y)
    const board = game.getState()

    expect(board[x][y]).toEequal(userMoveSymbol)
  })

test/game.js
test('Throws an exception if user moves in taken cell', () => {
  const x = 2, y = 2

  game.acceptUserMove(x, y)
  const func = game.acceptUserMove.bind(game, x, y)

  expect(func).toThrow('cell is already taken')
})

src/Game.js
  acceptUserMove(x, y) {
+   if (this._board[x][y]) {
+     throw new Error('cell is already taken')
+     return
+   }
+
    this._updateBoard(x, y)
  }

src/Game.js
  acceptUserMove(x, y) {
-   if (this._board[x][y]) {
-     throw new Error('cell is already taken')
-     return
-   }
+   if (!this._isCellFree(x, y)) {
+     return this._throwException('cell is already taken')
+   }

    this._updateBoard(x, y)
  }

  _updateBoard(x, y) {
    this._board[x][y] = this._userMoveSymbol
  }

+ _isCellFree(x, y) {
+   return !this._board[x][y]
+ }
+
+ _throwException(msg) {
+   throw new Error(msg)
+ }

test/game.js
test('Computer moves in top left cell', () => {
  game.createComputerMove()
  const board = game.getState()

  expect(board[0][0]).toEqual('o')
})

src/Game.js
+ createComputerMove() {
+
+ }

  createComputerMove() {
+   this._board[0][0] = 'o'
  }

  constructor() {
    this._userMoveSymbol = '×'
+   this._computerMoveSymbol = 'o'
    //...
  }

  // ...

  createComputerMove() {
-   this._board[0][0] = 'o'
+   this._updateBoard(0, 0, {
+     symbol: this._computerMoveSymbol
+   })
  }

- _updateBoard(x, y) {
-   this._board[x][y] = this._userMoveSymbol
- }
+ _updateBoard(x, y, config={}) {
+   const {symbol=this._userMoveSymbol} = config
+   this._board[x][y] = symbol
+ }

test/game.js
test('Game saves user\'s move in history', () => {
  const x = 1, y = 1

  game.acceptUserMove(x, y)
  const history = game.getMoveHistory()

  expect(history).toEqual([{turn: 'user', x, y}])
})

src/Game.js
+ getMoveHistory() {
+
+ }

src/Game.js
  getMoveHistory() {
+   return [{turn: 'user', x: 1, y: 1}]
  }

test/game.js
+ const userName = 'user'
  const userMoveSymbol = '×'

  // ...

-   expect(history).to.deep.equal([{turn: 'user', x, y}])
+   expect(history).to.deep.equal([{turn: userName, x, y}])

src/Game.js
+   this._history = [{turn: 'user', x: 1, y: 1}]
    this._board = [

  // ...

  getMoveHistory() {
-   return [{turn: 'user', x: 1, y: 1}]
+   return this._history
  }

test/game.js
test('Game saves computers\'s move in history', () => {
  game.createComputerMove()
  const history = game.getMoveHistory()

  expect(history).toEqual([{turn: 'computer', x: 0, y: 0}])
})

src/Game.js
-   this._history = [{turn: 'user', x: 1, y: 1}]
+   this._history = []

  //...

+   this._history.push({turn: 'user', x, y})
    this._updateBoard(x, y)
  }

  // ...

  createComputerMove() {
+   this._history.push({turn: 'computer', x: 0, y: 0})
    this._updateBoard(0, 0, {

test/game.js
+ const computerName = 'computer'

  // ...

-   expect(history).toEqual([{turn: 'computer', x: 0, y: 0}])
+   expect(history).toEqual([{turn: computerName, x: 0, y: 0}])

src/Game.js
  constructor() {
+   this._userName = 'user'
+   this._computerName = 'computer'
    this._userMoveSymbol = '×'

  // ...

-   this._history.push({turn: 'user', x, y})
+   this._updateHistory(this._userName, x, y)
  }

  createComputerMove() {
-   this._history.push({turn: 'computer', x: 0, y: 0})
+   this._updateHistory(this._computerName, 0, 0)
    this._updateBoard(0, 0, {

  // ...

+ _updateHistory(turn, x, y) {
+   this._history.push({turn, x, y})
+ }

test/game.js
test('Game saves 1 user\'s move and 1 computer\'s move in history', () => {
  const x = 1, y = 1

  game.acceptUserMove(x, y)
  game.createComputerMove()
  const history = game.getMoveHistory()

  expect(history.length).toBe(2)
  expect(history[0].turn).toEqual(userName)
  expect(history[1].turn).toEqual(computerName)
})

test/game.js
test('Computer moves in randomly chosen cell', () => {
  const userMoveSymbol = '×'
  const computerMoveSymbol = 'o'

  // ...
  const mock = jest.spyOn(global.Math, 'random').mockReturnValue(0.5)

  game.createComputerMove()
  const board = game.getState()

  expect(board[1][1]).toEqual(computerMoveSymbol)
  mock.mockRestore()
})

src/Game.js
  createComputerMove() {
+   const x = Math.floor(Math.random() * (3 - 0))
+   const y = Math.floor(Math.random() * (3 - 0))
+
-   this._updateHistory(this._computerName, 0, 0)
-   this._updateBoard(0, 0, {
+   this._updateHistory(this._computerName, x, y)
+   this._updateBoard(x, y, {
      symbol: this._computerMoveSymbol
    })
  }

test/game.js
- test('Computer moves in top left cell', () => {
-   game.createComputerMove()
-   const board = game.getState()
-
-   expect(board[0][0]).toEqual(computerMoveSymbol)
- })

  // ...

  test('Game saves computer\'s move in history', () => {
+   const mock = jest.spyOn(global.Math, 'random').mockReturnValue(0.5)

    game.createComputerMove()
    const history = game.getMoveHistory()

-   expect(history).toEqual([{turn: computerName, x: 0, y: 0}])
+   expect(history).toEqual([{turn: computerName, x: 1, y: 1}])
+   mock.mockRestore()
  })

src/Game.js
  this._computerMoveSymbol = 'o'
+   this._fieldSize = 3

  // ...

  createComputerMove() {
-   const x = Math.floor(Math.random() * (3 - 0))
-   const y = Math.floor(Math.random() * (3 - 0))
+   const x = this._getRandomCoordinate()
+   const y = this._getRandomCoordinate()
+
    this._updateHistory(this._computerName, x, y)

  // ...

+ _getRandomCoordinate() {
+   return Math.floor(Math.random() * (this._fieldSize - 0))
+ }

test/game.js
test('Computer moves in cell that is not taken', () => {
  // fill all the cells with user's symbol except last
  for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
      if (i !== 2 || j !== 2) game.acceptUserMove(i, j)
    }
  }

  game.createComputerMove()
  const board = game.getState()

  const userCount = board.reduce((result, row) => {
    return row.reduce((count, el) => {
      return el === userMoveSymbol ? ++count : count
    }, result)
  }, 0)

  const computerCount = board.reduce((result, row) => {
    return row.reduce((count, el) => {
      return el === computerMoveSymbol ? ++count : count
    }, result)
  }, 0)

  expect(userCount).toBe(8)
  expect(computerCount).toBe(1)
  expect(board[2][2]).toEqual(computerMoveSymbol)
})

src/Game.js
  createComputerMove() {
-   const x = this._getRandomCoordinate()
-   const y = this._getRandomCoordinate()
+   const freeCells = this._board.reduce((total, row) =>
+     row.reduce((count, el) =>
+       el === '' ? ++count : count, total), 0)
+
+   if (!freeCells) return
+
+   let x = this._getRandomCoordinate()
+   let y = this._getRandomCoordinate()
+
+   while (!!this._board[x][y]) {
+     x = this._getRandomCoordinate()
+     y = this._getRandomCoordinate()
+   }

test/game.js
const fillCells = game => {
  for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
      if (i !== 2 || j !== 2) game.acceptUserMove(i, j)
    }
  }
}

const count = (arr, symbol) =>
  arr.reduce((result, row) => {
    return row.reduce((count, el) => {
      return el === symbol ? ++count : count
    }, result)
  }, 0)

// ...

  test('Computer moves in cell that is not taken', () => {
    fillCells(game)

    game.createComputerMove()
    const board = game.getState()

    expect(count(board, userMoveSymbol)).toBe(8)
    expect(count(board, computerMoveSymbol)).toBe(1)
    expect(board[2][2]).toEqual(computerMoveSymbol)
  })

src/Game.js
  createComputerMove() {
    if (this._getFreeCellsCount() === 0) return false
    const [x, y] = this._getFreeRandomCoordinates()

    this._updateHistory(this._computerName, x, y)
    this._updateBoard(x, y, {
      symbol: this._computerMoveSymbol
    })
  }

// ...

  _getFreeRandomCoordinates() {
    let x = this._getRandomCoordinate()
    let y = this._getRandomCoordinate()

    while (!!this._board[x][y]) {
      x = this._getRandomCoordinate()
      y = this._getRandomCoordinate()
    }

    return [x, y]
  }

  _getFreeCellsCount() {
    return this._board.reduce((total, row) =>
      row.reduce((count, el) =>
        el === '' ? ++count : count, total), 0)
  }

test/game.js
test('If there are no free cells computer throws an exception', () => {
  // fill all the cells
  for (let i = 0; i < 3; ++i) {
    for (let j = 0; j < 3; ++j) {
      game.acceptUserMove(i, j)
    }
  }

  const func = game.createComputerMove.bind(game)
  expect(func).toThrow('no cells available')
})

src/Game.js
  createComputerMove() {
-   if (this._getFreeCellsCount() === 0) return false
+   if (this._getFreeCellsCount() === 0) {
+     return this._throwException('no cells available')
+   }

test/game.js
- const fillCells = game => {
+ const fillCells = (game, config={}) => {
+   const { x=-1, y=-1 } = config

  // ...

    for (let j = 0; j < 3; j++) {
-     if (i !== 2 || j !== 2) game.acceptUserMove(i, j)
+     if (i !== x || j !== y) game.acceptUserMove(i, j)
    }

  // ...

  test('Computer moves in cell that is not taken', () => {
-   fillCells(game)
+   fillCells(game, {x: 2, y: 2})

  // ...

  test('If there are no free cells computer throws an exception', () => {
-   // fill all the cells
-   for (let i = 0; i < 3; ++i) {
-     for (let j = 0; j < 3; ++j) {
-       game.acceptUserMove(i, j)
-     }
-   }
+   fillCells(game)

test/game.js
test('Checks if user won by horizontal', () => {
  game.acceptUserMove(0, 0)
  game.acceptUserMove(0, 1)
  game.acceptUserMove(0, 2)
  const userWon = game.isWinner(userName)

  expect(userWon).toEqual(true)
})

src/Game.js
+ isWinner(player) {
+   return false
+ }

src/Game.js
isWinner(player) {
  const symbol = player === this._userName
    ? this._userMoveSymbol
    : this._computerMoveSymbol

  const win = [...Array(this._fieldSize).keys()].reduce((res, i) => {
    return this._board[i][0] === symbol
      && this._board[i][1] === symbol
      && this._board[i][2] === symbol
      || res
  }, false)

  return win
}

src/Game.js
isWinner(player) {
  const symbol = this._getSymbolForPlayer(player)
  const range = [...Array(this._fieldSize).keys()]
  const isEqual = this._checkCellEqual(symbol)

  const horizontal = range.reduce((res, i) =>
    isEqual(i, 0) && isEqual(i, 1) && isEqual(i, 2) || res, false)

  return horizontal
}

_getSymbolForPlayer(player) {
  return player === this._userName
    ? this._userMoveSymbol
    : this._computerMoveSymbol
}

_checkCellEqual(symbol) {
  return (i, j) =>
    this._board[i][j] === symbol
}

// pseudocode
somegame.setBoardState(`
  x x x
  . . .
  . . .
`)

test/GameBuilder.js
import Game from '../src/Game'

class GameBuilder {
  constructor() {
    this.game = new Game()
  }

  withBoardState(state) {
    state = state
      .split('\n')
      .filter(item => !!item.trim())
      .map(item => item.trim().split(' '))

    state.forEach((item, i) => {
      item.forEach((symbol, j) => {
        if (symbol === 'x') this.game.acceptUserMove(i, j)
      })
    })

    // will allow us to chain methods
    return this
  }

  build() {
    return this.game
  }
}

export default GameBuilder

test/game.js
import GameBuilder from '../src/GameBuilder'

// ...

test('Checks if user won by horizontal', () => {
  const game = new GameBuilder()
    .withBoardState(`
      x x x
      . . .
      . . .`)
    .build()

  const userWon = game.isWinner(userName)
  expect(userWon).to.equal(true)
})

test/dom.js
import { describe, test, expect, beforeEach, afterEach, jest } from '@jest/globals';
import jsdom from 'jsdom'

import Game from '../src/Game'

const {JSDOM} = jsdom
const dom = new JSDOM('<html><body id="root"></body></html>')

global.window = dom.window
global.document = dom.window.document


describe('DOM controller', () => {
  test('Creates empty table', () => {
    const domController = new DomController('#root')

    domController.createTable()

    expect(document.querySelectorAll('table').length).toBe(1)
  })
})


class DomController {
  constructor(root) {}

  createTable() {}
}

test/dom.js
  class DomController {
    constructor(root) {
+     this.rootNode = document.querySelector(root)
    }

    createTable() {
+     const child = document.createElement('table')
+     this.rootNode.appendChild(child)
    }
  }

src/DomController.js
class DomController {
  constructor(root) {
    this.rootNode = document.querySelector(root)
  }

  createTable() {
    const child = document.createElement('table')
    this.rootNode.appendChild(child)
  }
}

export default DomController

test/dom.js
+ const createInstance = () => new DomController('#root')

  describe('DOM controller', () => {
    test('Creates empty table', () => {
-     const domController = new DomController('#root')
+     const domController = createInstance()

      domController.createTable()
      expect(document.querySelectorAll('table').length).toBe(1)
    })
  })

test/dom.js
afterEach(() => {
  document.body.innerHTML = ''
})

// ...

test('Creates table with 3 rows and 3 columns', () => {
  const domController = createInstance()

  domController.createTable(3, 3)

  expect(document.querySelectorAll('table').length).toBe(1)
  expect(document.querySelectorAll('tr').length).toBe(3)
  expect(document.querySelectorAll('td').length).toBe(9)
})

src/DomController.js
  createTable(rows=0, cols=0) {
    const child = document.createElement('table')
    this.rootNode.appendChild(child)

    const table = this.rootNode.querySelector('table')

    for (let i = 0; i < rows; i++) {
      const row = table.insertRow(i)

      for (let j = 0; j < cols; j++) {
        const cell = row.insertCell(j)
      }
    }
  }

test/dom.js
test('Remembers indices of last clicked cell', () => {
  const domController = createInstance()

  domController.createTable(3, 3)
  document.querySelector('table td').click()

  expect(domController.lastClickedIndices).toEqual([0, 0])
})

src/DomController.js
      for (let j = 0; j < cols; j++) {
        const cell = row.insertCell(j)
+       cell.addEventListener('click', () => {
+         this.lastClickedIndices = [i, j]
+       })
      }

src/DomController.js
      for (let j = 0; j < cols; j++) {
        const cell = row.insertCell(j)
-       cell.addEventListener('click', () => {
-         this.lastClickedIndices = [i, j]
-       })
+       cell.addEventListener('click', this._handleCellClick.bind(this, i, j))
      }
    }
  }
+
+ _handleCellClick(row, col) {
+   this.lastClickedIndices = [row, col]
+ }

test/dom.js
// ...

const createInstance = (game={}) => {
  return new DomController({
    game: game,
    root: '#root'
  })
}

// ...

  test('Makes user move in game on cell click', () => {
    const gameMock = { acceptUserMove: jest.fn() }
    const domController = createInstance(gameMock)

    domController.createTable(3, 3)
    document.querySelector('table td').click()

    expect(domController.game.acceptUserMove).toHaveBeenCalled()
  })

src/DomController.js
  class DomController {
-   constructor(root) {
+   constructor({root, game}) {
+     this.game = game
      this.rootNode = document.querySelector(root)
      this.lastClickedIndices = [-1, -1]
    }
  }

  // ...

  _handleCellClick(row, col) {
    this.lastClickedIndices = [row, col]
+   this.game.acceptUserMove(row, col)
  }

src/DomController.js
  _handleCellClick(row, col) {
    this.lastClickedIndices = [row, col]
-   this.game.acceptUserMove(row, col)

+   try {
+     this._makeUserMove(row, col)
+   }
+   catch(e) {
+     window.alert(e.message)
+   }
+ }
+
+ _makeUserMove(row, col) {
+   this.game.acceptUserMove(row, col)
+ }

test/dom.js
const createGame = (board) => new Game(board)

// ...

beforeEach(() => {
  window.alert = jest.fn()
})

afterEach(() => {
  // ...

  window.alert.mockReset()
})

afterAll(() => {
  window.alert.mockRestore()
})

// ...

  test('Gets an alert when user makes move in taken cell', () => {
    const game = createGame()
    const domController = createInstance(game)

    domController.init()
    document.querySelector('table td').click()
    document.querySelector('table td').click()

    expect(window.alert).toHaveBeenCalled()
  })

test/dom.js
 test('Redraws table on cell click', () => {
    const game = createGame()
    const domController = createInstance(game)

    domController.init()
    document.querySelector('table td').click()
    const text = document.querySelector('table td').textContent

    expect(text).toEqual('×')
  })

scr/DomController.js
  _makeUserMove(row, col) {
    this.game.acceptUserMove(row, col)

+   const board = this.game.getState()
+   const table = this.rootNode.querySelector('table')
+
+   board.forEach((row, i) => {
+     row.forEach((col, j) => {
+       table
+         .querySelector(`tr:nth-child(${i+1}) td:nth-child(${j+1})`)
+         .innerHTML = col
+     })
+   })
  }

scr/DomController.js
  _makeUserMove(row, col) {
    this.game.acceptUserMove(row, col)
+   this._redraw()
+ }
+
+ _redraw() {
    const board = this.game.getState()
    const table = this.rootNode.querySelector('table')

test/dom.js
  test('Makes computer move right after users move', () => {
    const game = createGame()
    const domController = createInstance(game)

    domController.init()
    document.querySelector('table td').click()
    const text = document.querySelector('table').textContent

    expect(text.indexOf('o') > -1).toBe(true)
  })

src/DomController.js
  try {
    this._makeUserMove(row, col)
+
+   this.game.createComputerMove()
+   this._redraw()
  }

src/DomController.js
  try {
    this._makeUserMove(row, col)
-
-   this.game.createComputerMove()
-   this._redraw()
+   this._makeComputerMove()
  }

+ _makeComputerMove() {
+   this.game.createComputerMove()
+   this._redraw()
+ }

test/dom.js
  test('Creates status text below table if someone wins', () => {
    const game = createGame([
      ['×', '×', ''],
      ['', '', ''],
      ['', '', '']
    ])

    const domController = createInstance(game)

    domController.init()
    document.querySelector('table tr:nth-child(1) td:nth-child(3)').click()

    const status = document.querySelector('#status')
    expect(status.textContent).toEqual('user won!')
  })

src/DomController.js
  this._makeUserMove(row, col)

+ const state = this.game.checkGame()
+ if (state !== 'continue') {
+   const node = document.createElement('div')
+   const txt = document.createTextNode(state)
+   node.id = 'status'
+   node.appendChild(txt)
+   this.rootNode.appendChild(node)
+ }

  this._makeComputerMove()

src/DomController.js
  _handleCellClick(row, col) {
    this.lastClickedIndices = [row, col]

    try {
      this._makeUserMove(row, col)
      const continues = this._checkContinue()
      if (!continues) return

      this._makeComputerMove()
      this._checkContinue()
    }
    catch(e) {
      window.alert(e.message)
    }
  }

  // ...

  _checkContinue() {
    const state = this.game.checkGame()

    if (state !== 'continue') {
      const status = this._createNode('div', {
        text: state,
        id: 'status'
      })

      this.rootNode.appendChild(status)
      return false
    }

    return true
  }

  _createNode(tag, config={}) {
    const {text, id} = config
    const node = document.createElement(tag)
    const txt = document.createTextNode(text)
    node.appendChild(txt)

    if (!!id) node.id = id
    return node
  }

src/index.js
import DomController from './DomController.js'
import Game from './Game.js'

const game = new Game()
const dom = new DomController({
  root: 'body',
  game
})

dom.init()