Project-Battleship

Test Driven Development practice.

Live demo

https://hikyn.github.io/Project-Battleship/

ToC

• Demo gif
• Features
• Problems Encountered
  • Jest and webpack
  • Jest and weird way to catch errors
  • Grid and minimum cell content

Demo gif

Placement screen

Battle

Features:

• Interactive browser-based game
• Tests for all backend logic
• Mobile friendly
• Separated DOM and backend as much as possible

Problems encountered:

Jest and webpack

I wanted to implement testing via Jest. I split my project into several modules

example: Separate shipFactory.js for creating ships

This caused a conflict when I wanted to use modules with Jest

Jest refused to work with import statements.

Webpack refused to work with require statements.

I tried a lot to solve this. Eventual solution after a lof of trial and error:

npm install --save-dev @babel/plugin-transform-modules-commonjs

Then installing babel and configuring babel.config.json:

{
    "env": {
      "test": {
        "plugins": ["@babel/plugin-transform-modules-commonjs"]
      }
    }
 }

All thanks to stackoverflow answer: https://stackoverflow.com/questions/35756479/does-jest-support-es6-import-export

Jest and weird way to catch errors

I wanted to throw an error if ship is placed Out of Bounds

There is a syntax that I used:

throw new Error('Out of bounds')

And that's how I tried to catch error:

expect(gameboard.placeShip(x, y, shipLength, orientation)).toThrow("Out of bounds");

It didn't work, so I tried to read documentation on this function.

Official notes on ".toThrow":

You must wrap the code in a function, otherwise the error will not be caught and the assertion will fail.

After changing code to this Jest started to correctly analyze thrown error:

expect(() => { gameboard.placeShip(x, y, shipLength, orientation); }).toThrow("Out of bounds");

The issue here is that before Jest even knows anything about throwing an exception, we've already thrown it. An exception in that context will stop execution and fail. When we wrap it in an arrow function, we're not actually executing it yet and Jest can prepare for the exception

--- scorgn on this thread

Grid and minimum cell content

In the ideal case, the two cells will have the same size.

But every cell has a minimum size! It is defined as the minimum content width. For example: the larger word, the larger button, or the larger image that it contains.

To avoid this, we should use minmax(0, 1fr) for each column definition. It allows us to say that 1fr, one fraction, is the maximum width of the column. --- tzi on this thread