Add useGame hook with test cases

README.md

@@ -179,3 +179,11 @@
 ### Reset game by TDD
 
 [Pull request](https://github.com/nickovchinnikov/minesweeper/pull/28/files)
+
+### Create game over behavior by TDD
+
+[Pull request](https://github.com/nickovchinnikov/minesweeper/pull/29)
+
+### Game custom hook
+
+[Pull request](https://github.com/nickovchinnikov/minesweeper/pull/30)

src/modules/GameWithHooks/GameWithHooks.tsx

@@ -1,69 +1,27 @@
-import React, { FC, useState, useMemo } from 'react';
+import React, { FC } from 'react';
 
-import {
-  Field,
-  CellState,
-  generateFieldWithDefaultState,
-  fieldGenerator,
-  Coords,
-} from '@/helpers/Field';
-import { openCell } from '@/helpers/CellsManipulator';
-
-import { GameLevels, LevelNames, GameSettings } from '@/modules/GameSettings';
+import { GameLevels, LevelNames } from '@/modules/GameSettings';
 
 import { Top } from '@/components/Top';
 import { Scoreboard } from '@/components/Scoreboard';
 import { Grid } from '@/components/Grid';
 import { GameArea, Wrapper, GameOver } from '@/components/Game';
 
-export const GameWithHooks: FC = () => {
-  const [level, setLevel] = useState<LevelNames>('beginner');
-
-  const [isGameOver, setIsGameOver] = useState(false);
-  const [isWin, setIsWin] = useState(false);
-
-  const [size, bombs] = GameSettings[level];
+import { useGame } from './useGame';
 
-  const [playerField, setPlayerField] = useState<Field>(
-    generateFieldWithDefaultState(size, CellState.hidden)
-  );
-
-  const [gameField, setGameField] = useState<Field>(
-    fieldGenerator(size, bombs / (size * size))
-  );
-
-  const onClick = (coords: Coords) => {
-    try {
-      const newPlayerField = openCell(coords, playerField, gameField);
-      setPlayerField([...newPlayerField]);
-    } catch (e) {
-      setPlayerField([...gameField]);
-      setIsGameOver(true);
-    }
-  };
-
-  const resetHandler = ([size, bombs]: [number, number]) => {
-    const newGameField = fieldGenerator(size, bombs / (size * size));
-    const newPlayerField = generateFieldWithDefaultState(
-      size,
-      CellState.hidden
-    );
-
-    setGameField([...newGameField]);
-    setPlayerField([...newPlayerField]);
-    setIsGameOver(false);
-    setIsWin(false);
-  };
-
-  const onChangeLevel = ({
-    target: { value: level },
-  }: React.ChangeEvent<HTMLSelectElement>) => {
-    setLevel(level as LevelNames);
-    const newSettings = GameSettings[level as LevelNames];
-    resetHandler(newSettings);
-  };
-
-  const onReset = () => resetHandler([size, bombs]);
+export const GameWithHooks: FC = () => {
+  const {
+    level,
+    isGameOver,
+    isWin,
+    settings,
+    playerField,
+    onClick,
+    onChangeLevel,
+    onReset,
+  } = useGame();
+
+  const [, bombs] = settings;
 
   return (
     <Wrapper>
@@ -76,7 +34,11 @@ export const GameWithHooks: FC = () => {
           bombs={String(bombs)}
           levels={GameLevels as unknown as string[]}
           defaultLevel={level}
-          onChangeLevel={onChangeLevel}
+          onChangeLevel={({
+            target: { value: level },
+          }: React.ChangeEvent<HTMLSelectElement>) =>
+            onChangeLevel(level as LevelNames)
+          }
           onReset={onReset}
         />
         {isGameOver && <GameOver onClick={onReset} isWin={isWin} />}

src/modules/GameWithHooks/useGame.test.ts

@@ -0,0 +1,170 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+
+import { CellState, Field } from '@/helpers/Field';
+import { GameLevels, GameSettings } from '@/modules/GameSettings';
+
+import { useGame } from './useGame';
+
+jest.mock('@/helpers/Field');
+
+const { empty: e, hidden: h, bomb: b, flag: f } = CellState;
+
+const [beginner, intermediate, expert] = GameLevels;
+
+const flatWithFilter = (field: Field, cond: number) =>
+  field.flat().filter((v) => v === cond);
+
+describe('useGame test cases', () => {
+  describe('Render behaviour', () => {
+    it('Render hook by default', () => {
+      const { result } = renderHook(useGame);
+      const { level, isGameOver, isWin, settings, playerField } =
+        result.current;
+
+      expect({ level, isGameOver, isWin, settings }).toStrictEqual({
+        level: beginner,
+        isGameOver: false,
+        isWin: false,
+        settings: GameSettings.beginner,
+      });
+      expect(playerField).toHaveLength(9);
+    });
+    it('onChange game level handler', () => {
+      const { result } = renderHook(useGame);
+      const { playerField: beginnerPlayerField, onChangeLevel } =
+        result.current;
+
+      expect(beginnerPlayerField).toHaveLength(9);
+
+      act(() => onChangeLevel(intermediate));
+
+      const { playerField: intermediatePlayerField } = result.current;
+
+      expect(intermediatePlayerField).toHaveLength(16);
+
+      act(() => onChangeLevel(expert));
+
+      const { playerField: expertPlayerField } = result.current;
+
+      expect(expertPlayerField).toHaveLength(22);
+    });
+  });
+  describe('Open cell test cases', () => {
+    it('Open empty cell on the beginner level', () => {
+      const { result } = renderHook(useGame);
+
+      const { playerField, onClick } = result.current;
+
+      expect(playerField).toHaveLength(9);
+      expect(flatWithFilter(playerField, e)).toHaveLength(0);
+
+      act(() => onClick([0, 0]));
+
+      const { playerField: newPlayerField } = result.current;
+
+      expect(flatWithFilter(newPlayerField, e)).toHaveLength(18);
+    });
+    it('Click to the non-empty cells area', () => {
+      const { result } = renderHook(useGame);
+
+      const { playerField, onClick } = result.current;
+
+      expect(flatWithFilter(playerField, 1)).toHaveLength(0);
+
+      act(() => onClick([0, 8]));
+
+      const { playerField: newPlayerField } = result.current;
+
+      expect(flatWithFilter(newPlayerField, 1)).toHaveLength(1);
+    });
+  });
+  describe('OnClick with OnChangeGameLevel and OnReset', () => {
+    it('Check click to the cell when the level is changed', () => {
+      const { result } = renderHook(useGame);
+      const { playerField, onChangeLevel } = result.current;
+
+      expect(playerField).toHaveLength(9);
+
+      act(() => onChangeLevel(intermediate));
+
+      const {
+        playerField: intermediatePlayerField,
+        onClick: onClickIntermediate,
+      } = result.current;
+
+      act(() => onClickIntermediate([15, 15]));
+
+      expect(intermediatePlayerField).toHaveLength(16);
+      expect(flatWithFilter(intermediatePlayerField, e)).toHaveLength(2);
+
+      act(() => onChangeLevel(expert));
+
+      const { playerField: expertPlayerField, onClick: onClickExpert } =
+        result.current;
+
+      act(() => onClickExpert([21, 21]));
+
+      expect(expertPlayerField).toHaveLength(22);
+      expect(flatWithFilter(expertPlayerField, e)).toHaveLength(1);
+      expect(flatWithFilter(expertPlayerField, 1)).toHaveLength(2);
+      expect(flatWithFilter(expertPlayerField, 2)).toHaveLength(1);
+    });
+    it('onReset game handler', () => {
+      const { result } = renderHook(useGame);
+      const { playerField, onClick, onReset } = result.current;
+
+      expect(playerField).toHaveLength(9);
+
+      act(() => onClick([0, 8]));
+
+      expect(flatWithFilter(playerField, 1)).toHaveLength(1);
+
+      act(() => onClick([0, 0]));
+      const { playerField: newPlayerField } = result.current;
+
+      expect(flatWithFilter(newPlayerField, e)).toHaveLength(18);
+
+      act(onReset);
+      const { playerField: finalPlayerField } = result.current;
+
+      expect(flatWithFilter(finalPlayerField, h)).toHaveLength(81);
+    });
+  });
+  describe('Game over behavior', () => {
+    it('Player loose the game', () => {
+      const { result } = renderHook(useGame);
+
+      const { playerField, onClick } = result.current;
+
+      act(() => onClick([0, 8]));
+
+      expect(flatWithFilter(playerField, 1)).toHaveLength(1);
+
+      act(() => onClick([0, 0]));
+
+      expect(flatWithFilter(playerField, e)).toHaveLength(18);
+
+      act(() => onClick([0, 7]));
+
+      const {
+        isWin,
+        isGameOver,
+        playerField: newPlayerField,
+        onReset,
+      } = result.current;
+
+      expect(isGameOver).toBe(true);
+      expect(isWin).toBe(false);
+      expect(flatWithFilter(newPlayerField, h)).toHaveLength(0);
+      expect(flatWithFilter(newPlayerField, e)).toHaveLength(27);
+      expect(flatWithFilter(newPlayerField, 1)).toHaveLength(30);
+      expect(flatWithFilter(newPlayerField, 2)).toHaveLength(12);
+      expect(flatWithFilter(newPlayerField, 3)).toHaveLength(2);
+
+      act(onReset);
+      const { playerField: latestPlayerField } = result.current;
+
+      expect(flatWithFilter(latestPlayerField, h)).toHaveLength(81);
+    });
+  });
+});

src/modules/GameWithHooks/useGame.ts

@@ -0,0 +1,82 @@
+import { useState } from 'react';
+
+import {
+  Field,
+  CellState,
+  generateFieldWithDefaultState,
+  fieldGenerator,
+  Coords,
+} from '@/helpers/Field';
+import { openCell } from '@/helpers/CellsManipulator';
+
+import { LevelNames, GameSettings } from '@/modules/GameSettings';
+
+interface ReturnType {
+  level: LevelNames;
+  isGameOver: boolean;
+  isWin: boolean;
+  settings: [number, number];
+  playerField: Field;
+  onClick: (coords: Coords) => void;
+  onChangeLevel: (level: LevelNames) => void;
+  onReset: () => void;
+}
+
+export const useGame = (): ReturnType => {
+  const [level, setLevel] = useState<LevelNames>('beginner');
+
+  const [isGameOver, setIsGameOver] = useState(false);
+  const [isWin, setIsWin] = useState(false);
+
+  const [size, bombs] = GameSettings[level];
+
+  const [playerField, setPlayerField] = useState<Field>(
+    generateFieldWithDefaultState(size, CellState.hidden)
+  );
+
+  const [gameField, setGameField] = useState<Field>(
+    fieldGenerator(size, bombs / (size * size))
+  );
+
+  const onClick = (coords: Coords) => {
+    try {
+      const newPlayerField = openCell(coords, playerField, gameField);
+      setPlayerField([...newPlayerField]);
+    } catch (e) {
+      setPlayerField([...gameField]);
+      setIsGameOver(true);
+    }
+  };
+
+  const resetHandler = ([size, bombs]: [number, number]) => {
+    const newGameField = fieldGenerator(size, bombs / (size * size));
+    const newPlayerField = generateFieldWithDefaultState(
+      size,
+      CellState.hidden
+    );
+
+    setGameField([...newGameField]);
+    setPlayerField([...newPlayerField]);
+    setIsGameOver(false);
+    setIsWin(false);
+  };
+
+  const onChangeLevel = (level: LevelNames) => {
+    setLevel(level);
+    const newSettings = GameSettings[level];
+    resetHandler(newSettings);
+  };
+
+  const onReset = () => resetHandler([size, bombs]);
+
+  return {
+    level,
+    isGameOver,
+    isWin,
+    settings: [size, bombs],
+    playerField,
+    onClick,
+    onChangeLevel,
+    onReset,
+  };
+};