Add test cases game-with-hooks game module

jest.config.js

@@ -24,6 +24,7 @@ module.exports = {
     "@helpers/(.*)$": "<rootDir>/src/helpers/$1",
     "~hooks/(.*)$": "<rootDir>/src/hooks/$1",
     "@components/(.*)$": "<rootDir>/src/components/$1",
+    "@modules/(.*)$": "<rootDir>/src/modules/$1",
   },
   setupFilesAfterEnv: ["<rootDir>/test/setup.ts"],
   globalTeardown: "<rootDir>/test/teardown.ts",

src/index.tsx

@@ -1,7 +1,7 @@
 import "@styles/styles.scss";
 import "normalize.css/normalize.css";
 
-import { GameWithHooks } from "@src/modules/GameWithHooks";
+import { GameWithHooks } from "@modules/GameWithHooks";
 import React from "react";
 import { createRoot } from "react-dom/client";
 

src/modules/GameWithHooks/GameWithHooks.test.tsx

@@ -0,0 +1,28 @@
+import { GameWithHooks } from "@modules/GameWithHooks/GameWithHooks";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+
+describe("GameWithHooks test cases", function () {
+  describe("Render component behaviour", function () {
+    it("should render game field by default", function () {
+      const { asFragment } = render(<GameWithHooks />);
+
+      expect(screen.getAllByRole("cell")).toHaveLength(81);
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("should observe onChange handler on game level", async function () {
+      render(<GameWithHooks />);
+
+      expect(screen.getAllByRole("cell")).toHaveLength(81);
+      await userEvent.selectOptions(screen.getByRole("select-component"), "intermediate");
+      expect(screen.getByRole("option", { name: "intermediate" })).toBeEnabled();
+      expect(screen.getAllByRole("cell")).toHaveLength(256);
+
+      await userEvent.selectOptions(screen.getByRole("select-component"), "expert");
+      expect(screen.getAllByRole("cell")).toHaveLength(484);
+    });
+  });
+});

src/modules/GameWithHooks/GameWithHooks.tsx

@@ -4,7 +4,7 @@ import { GridComponent } from "@components/grid";
 import { ScoreBoard } from "@components/scoreboard";
 import { Top } from "@components/top-section";
 import { CellState, generateFieldWithDefaultState } from "@helpers/field";
-import { GameLevels, GameSettings, LevelNames } from "@src/modules/GameSettings";
+import { GameLevels, GameSettings, LevelNames } from "@modules/GameSettings";
 import React, { FunctionComponent, useState } from "react";
 
 export const GameWithHooks: FunctionComponent = () => {