Preparing the test cases for cell components

jest.config.js

@@ -21,6 +21,8 @@ module.exports = {
     "\\.(css|less|scss|sass)$": "identity-obj-proxy",
     "test/(.*)$": "<rootDir>/test/$1",
     "~/(.*)$": "<rootDir>/src/$1",
+    "@helpers/(.*)$": "<rootDir>/src/helpers/$1",
+    "~hooks/(.*)$": "<rootDir>/src/hooks/$1",
   },
   setupFilesAfterEnv: ["<rootDir>/test/setup.ts"],
   globalTeardown: "<rootDir>/test/teardown.ts",

src/components/grid/cell/cell.test.tsx

@@ -0,0 +1,27 @@
+import { CellState, Coordinates } from "@helpers/field";
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+
+import { CellComponent } from "./cell";
+
+describe("Testing the CELL component", function () {
+  const coords: Coordinates = [1, 1];
+
+  for (let cell = CellState.empty; cell <= CellState.weakMark; cell++) {
+    it("should check preventDefault contextMenu for every type of cell", function () {
+      const internalProps = {
+        coords,
+        onClick: jest.fn(),
+        onContextMenu: jest.fn(),
+      };
+
+      render(<CellComponent children={cell} {...internalProps} />);
+
+      expect(true).toBe(true);
+    });
+
+    it("onClick and onContextMenu handler should be called for active cells", function () {
+      expect(true).toBe(true);
+    });
+  }
+});

src/components/grid/cell/cell.tsx

@@ -78,7 +78,7 @@ export const CellComponent: FunctionComponent<CellProps> = ({ coords, children,
     onMouseUp,
     onMouseLeave: onMouseUp,
     mouseDown,
-    "data-testid": `${coords}`,
+    "data-testid": `cells_${coords}`,
     role: "cell",
   };
 
@@ -96,20 +96,20 @@ export const ComponentsMap: FunctionComponent<ComponentsMapProps> = ({ children,
     case CellState.bomb:
       return (
         <BombFrame {...rest}>
-          <span className={styles.bombEntity} />
+          <span className={styles.bombEntity} data-testid={`bomb_${rest["data-testid"]}`} />
         </BombFrame>
       );
     case CellState.mark:
       return (
         <ClosedFrame {...rest}>
-          <FlagComponent />
+          <FlagComponent data-testid={`flag_${rest["data-testid"]}`} />
         </ClosedFrame>
       );
 
     case CellState.weakMark:
       return (
         <ClosedFrame {...rest}>
-          <WeakFlagComponent />
+          <WeakFlagComponent data-testid={`weakFlag_${rest["data-testid"]}`} />
         </ClosedFrame>
       );
     case CellState.hidden:
@@ -119,9 +119,14 @@ export const ComponentsMap: FunctionComponent<ComponentsMapProps> = ({ children,
   }
 };
 
-const ClosedFrame: FunctionComponent<PropsWithChildren<{ mouseDown?: boolean }>> = ({ mouseDown, children }) => {
+const ClosedFrame: FunctionComponent<PropsWithChildren<{ mouseDown?: boolean }>> = ({
+  mouseDown,
+  children,
+  ...restProps
+}) => {
   return (
     <div
+      {...restProps}
       className={classNames(styles.closedFrame, {
         [styles.changedBorderColor]: !mouseDown,
         [styles.transparentClosedFrame]: mouseDown,
@@ -146,16 +151,20 @@ const RevealedFrame: FunctionComponent<PropsWithChildren<RevealedProps>> = ({ ch
   );
 };
 
-const BombFrame: FunctionComponent<{ children: ReactNode }> = ({ children }) => {
-  return <div className={classNames(styles.closedFrame, styles.revealedFrame, styles.bombFrame)}>{children}</div>;
+const BombFrame: FunctionComponent<{ children: ReactNode }> = ({ children, ...restProps }) => {
+  return (
+    <div {...restProps} className={classNames(styles.closedFrame, styles.revealedFrame, styles.bombFrame)}>
+      {children}
+    </div>
+  );
 };
 
-const FlagComponent: FunctionComponent = () => {
-  return <div className={styles.flagComponent} />;
+const FlagComponent: FunctionComponent = ({ ...restProps }) => {
+  return <div {...restProps} className={styles.flagComponent} />;
 };
 
-const WeakFlagComponent: FunctionComponent = () => {
-  return <div className={classNames(styles.flagComponent, styles.flagTransparent)} />;
+const WeakFlagComponent: FunctionComponent = ({ ...restProps }) => {
+  return <div {...restProps} className={classNames(styles.flagComponent, styles.flagTransparent)} />;
 };
 
 const transparent = "rgba(0,0,0,0)";