From f3a82f3f0c56e0478483012387e0a5908441f3bb Mon Sep 17 00:00:00 2001
From: Muhammad Zourdy <zhafarmuhammad12@gmail.com>
Date: Sat, 30 Jul 2022 01:43:20 +0200
Subject: [PATCH] Repair the test failed on cell component - caused by get test
 instances

---
 .../cell/__snapshots__/cell.test.tsx.snap     | 277 ++++++++++++++++++
 src/components/grid/cell/cell.test.tsx        |  73 ++++-
 src/components/grid/cell/cell.tsx             |  36 ++-
 src/index.tsx                                 |   4 +-
 4 files changed, 359 insertions(+), 31 deletions(-)
 create mode 100644 src/components/grid/cell/__snapshots__/cell.test.tsx.snap

diff --git a/src/components/grid/cell/__snapshots__/cell.test.tsx.snap b/src/components/grid/cell/__snapshots__/cell.test.tsx.snap
new file mode 100644
index 00000000..ce1b45b7
--- /dev/null
+++ b/src/components/grid/cell/__snapshots__/cell.test.tsx.snap
@@ -0,0 +1,277 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Testing the CELL component Cell renders correct 1`] = `
+<DocumentFragment>
+  <div
+    class="closedFrame revealedFrame"
+    data-testid="1,1"
+    role="cell"
+    style="color: rgba(0, 0, 0, 0);"
+  >
+    0
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Testing the CELL component Cell renders correct 2`] = `
+<DocumentFragment>
+  <div
+    class="closedFrame revealedFrame"
+    data-testid="1,1"
+    role="cell"
+    style="color: rgb(42, 72, 236);"
+  >
+    1
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Testing the CELL component Cell renders correct 3`] = `
+<DocumentFragment>
+  <div
+    class="closedFrame revealedFrame"
+    data-testid="1,1"
+    role="cell"
+    style="color: rgb(43, 177, 61);"
+  >
+    2
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Testing the CELL component Cell renders correct 4`] = `
+<DocumentFragment>
+  <div
+    class="closedFrame revealedFrame"
+    data-testid="1,1"
+    role="cell"
+    style="color: rgb(236, 101, 97);"
+  >
+    3
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Testing the CELL component Cell renders correct 5`] = `
+<DocumentFragment>
+  <div
+    class="closedFrame revealedFrame"
+    data-testid="1,1"
+    role="cell"
+    style="color: rgb(35, 61, 183);"
+  >
+    4
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Testing the CELL component Cell renders correct 6`] = `
+<DocumentFragment>
+  <div
+    class="closedFrame revealedFrame"
+    data-testid="1,1"
+    role="cell"
+    style="color: rgb(166, 7, 15);"
+  >
+    5
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Testing the CELL component Cell renders correct 7`] = `
+<DocumentFragment>
+  <div
+    class="closedFrame revealedFrame"
+    data-testid="1,1"
+    role="cell"
+    style="color: rgb(228, 0, 175);"
+  >
+    6
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Testing the CELL component Cell renders correct 8`] = `
+<DocumentFragment>
+  <div
+    class="closedFrame revealedFrame"
+    data-testid="1,1"
+    role="cell"
+    style="color: rgb(144, 106, 2);"
+  >
+    7
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Testing the CELL component Cell renders correct 9`] = `
+<DocumentFragment>
+  <div
+    class="closedFrame revealedFrame"
+    data-testid="1,1"
+    role="cell"
+    style="color: rgb(250, 7, 7);"
+  >
+    8
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Testing the CELL component Cell renders correct 10`] = `
+<DocumentFragment>
+  <div
+    class="closedFrame revealedFrame bombFrame"
+    data-testid="1,1"
+    role="cell"
+  >
+    <div
+      class="bombEntity"
+      data-testid="bomb_1,1"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Testing the CELL component Cell renders correct 11`] = `
+<DocumentFragment>
+  <div
+    class="closedFrame changedBorderColor"
+    data-testid="1,1"
+    role="cell"
+  />
+</DocumentFragment>
+`;
+
+exports[`Testing the CELL component Cell renders correct 12`] = `
+<DocumentFragment>
+  <div
+    class="closedFrame changedBorderColor"
+    data-testid="1,1"
+    role="cell"
+  >
+    <div
+      class="flagComponent"
+      data-testid="flag_1,1"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Testing the CELL component Cell renders correct 13`] = `
+<DocumentFragment>
+  <div
+    class="closedFrame changedBorderColor"
+    data-testid="1,1"
+    role="cell"
+  >
+    <div
+      class="flagComponent flagTransparent"
+      data-testid="weakFlag_1,1"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Testing the CELL component Closed Frame renders correct 1`] = `
+<DocumentFragment>
+  <div
+    class="closedFrame transparentClosedFrame"
+  />
+</DocumentFragment>
+`;
+
+exports[`Testing the CELL component Closed Frame renders correct 2`] = `
+<DocumentFragment>
+  <div
+    class="closedFrame transparentClosedFrame"
+  />
+</DocumentFragment>
+`;
+
+exports[`Testing the CELL component Closed Frame renders correct 3`] = `
+<DocumentFragment>
+  <div
+    class="closedFrame transparentClosedFrame"
+  />
+</DocumentFragment>
+`;
+
+exports[`Testing the CELL component Closed Frame renders correct 4`] = `
+<DocumentFragment>
+  <div
+    class="closedFrame transparentClosedFrame"
+  />
+</DocumentFragment>
+`;
+
+exports[`Testing the CELL component Closed Frame renders correct 5`] = `
+<DocumentFragment>
+  <div
+    class="closedFrame transparentClosedFrame"
+  />
+</DocumentFragment>
+`;
+
+exports[`Testing the CELL component Closed Frame renders correct 6`] = `
+<DocumentFragment>
+  <div
+    class="closedFrame transparentClosedFrame"
+  />
+</DocumentFragment>
+`;
+
+exports[`Testing the CELL component Closed Frame renders correct 7`] = `
+<DocumentFragment>
+  <div
+    class="closedFrame transparentClosedFrame"
+  />
+</DocumentFragment>
+`;
+
+exports[`Testing the CELL component Closed Frame renders correct 8`] = `
+<DocumentFragment>
+  <div
+    class="closedFrame transparentClosedFrame"
+  />
+</DocumentFragment>
+`;
+
+exports[`Testing the CELL component Closed Frame renders correct 9`] = `
+<DocumentFragment>
+  <div
+    class="closedFrame transparentClosedFrame"
+  />
+</DocumentFragment>
+`;
+
+exports[`Testing the CELL component Closed Frame renders correct 10`] = `
+<DocumentFragment>
+  <div
+    class="closedFrame transparentClosedFrame"
+  />
+</DocumentFragment>
+`;
+
+exports[`Testing the CELL component Closed Frame renders correct 11`] = `
+<DocumentFragment>
+  <div
+    class="closedFrame transparentClosedFrame"
+  />
+</DocumentFragment>
+`;
+
+exports[`Testing the CELL component Closed Frame renders correct 12`] = `
+<DocumentFragment>
+  <div
+    class="closedFrame transparentClosedFrame"
+  />
+</DocumentFragment>
+`;
+
+exports[`Testing the CELL component Closed Frame renders correct 13`] = `
+<DocumentFragment>
+  <div
+    class="closedFrame transparentClosedFrame"
+  />
+</DocumentFragment>
+`;
diff --git a/src/components/grid/cell/cell.test.tsx b/src/components/grid/cell/cell.test.tsx
index 05acd663..1b28ef67 100644
--- a/src/components/grid/cell/cell.test.tsx
+++ b/src/components/grid/cell/cell.test.tsx
@@ -1,27 +1,74 @@
-import { CellState, Coordinates } from "@helpers/field";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { CellState, Cell as CellType, Coordinates } from "@helpers/field";
+import { createEvent, fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
 
-import { CellComponent } from "./cell";
+import { CellComponent, ClosedFrame, areEqual, isActiveCell } from "./cell";
 
 describe("Testing the CELL component", function () {
   const coords: Coordinates = [1, 1];
+  const props = {
+    coords,
+    flagCounter: 0,
+    bombs: 10,
+    onClick: jest.fn(),
+    onContextMenu: jest.fn(),
+  };
 
   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(),
-      };
+    it("Cell renders correct", () => {
+      const { asFragment } = render(<CellComponent children={cell} {...props} />);
 
-      render(<CellComponent children={cell} {...internalProps} />);
+      expect(asFragment()).toMatchSnapshot();
+    });
+    it("Closed Frame renders correct", () => {
+      const { asFragment } = render(<ClosedFrame mouseDown={true} />);
+      expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("Check prevent default contextMenu for every type of cell", () => {
+      render(<CellComponent children={cell} {...props} />);
 
-      expect(true).toBe(true);
+      const cellComp = screen.getByRole("cell");
+
+      const contextMenuEvent = createEvent.contextMenu(cellComp);
+      fireEvent(cellComp, contextMenuEvent);
+
+      expect(contextMenuEvent.defaultPrevented).toBe(true);
     });
 
-    it("onClick and onContextMenu handler should be called for active cells", function () {
-      expect(true).toBe(true);
+    it("onClick and onContextMenu handler should be called for active cells", () => {
+      render(<CellComponent children={cell} {...props} />);
+
+      const cellComp = screen.getByRole("cell");
+
+      fireEvent.click(cellComp);
+      fireEvent.contextMenu(cellComp);
+
+      if (isActiveCell(cell)) {
+        expect(props.onClick).toBeCalled();
+        expect(props.onContextMenu).toBeCalled();
+      } else {
+        expect(props.onClick).not.toBeCalled();
+        expect(props.onContextMenu).not.toBeCalled();
+      }
     });
   }
+
+  it("Check areEqual", () => {
+    const prevProps = {
+      ...props,
+      children: 0 as CellType,
+    };
+
+    expect(areEqual(prevProps, { ...prevProps })).toBe(true);
+
+    expect(areEqual(prevProps, { ...prevProps, coords: [2, 1] })).toBe(false);
+    expect(areEqual(prevProps, { ...prevProps, coords: [1, 2] })).toBe(false);
+    expect(areEqual(prevProps, { ...prevProps, coords: [2, 2] })).toBe(false);
+    expect(areEqual(prevProps, { ...prevProps, coords: [1, 0] })).toBe(false);
+
+    expect(areEqual(prevProps, { ...prevProps, children: 1 as CellType })).toBe(false);
+    expect(areEqual(prevProps, { ...prevProps, onClick: jest.fn() })).toBe(false);
+    expect(areEqual(prevProps, { ...prevProps, onContextMenu: jest.fn() })).toBe(false);
+  });
 });
diff --git a/src/components/grid/cell/cell.tsx b/src/components/grid/cell/cell.tsx
index 174cb723..fa37b771 100644
--- a/src/components/grid/cell/cell.tsx
+++ b/src/components/grid/cell/cell.tsx
@@ -36,10 +36,9 @@ export interface ComponentsMapProps {
   role?: string;
 }
 
-/**
- * change the Partial util type
- */
-type RevealedProps = Partial<Pick<ComponentsMapProps, "onContextMenu" | "data-testid" | "role">>;
+type RevealedProps = Pick<ComponentsMapProps, "onContextMenu" | "data-testid" | "role">;
+
+type ExcludeMouseDown = Omit<ComponentsMapProps, "mouseDown">;
 
 export const isActiveCell = (cell: CellType): boolean =>
   [CellState.hidden, CellState.mark, CellState.weakMark].includes(cell);
@@ -78,11 +77,11 @@ export const CellComponent: FunctionComponent<CellProps> = ({ coords, children,
     onMouseUp,
     onMouseLeave: onMouseUp,
     mouseDown,
-    "data-testid": `cells_${coords}`,
+    "data-testid": `${coords}`,
     role: "cell",
   };
 
-  return <ComponentsMap children={children} {...props} />;
+  return <ComponentsMap {...props}>{children}</ComponentsMap>;
 };
 
 export const ComponentsMap: FunctionComponent<ComponentsMapProps> = ({ children, ...rest }) => {
@@ -95,8 +94,8 @@ export const ComponentsMap: FunctionComponent<ComponentsMapProps> = ({ children,
   switch (children) {
     case CellState.bomb:
       return (
-        <BombFrame {...rest}>
-          <span className={styles.bombEntity} data-testid={`bomb_${rest["data-testid"]}`} />
+        <BombFrame {...nonActiveCellProps}>
+          <div className={styles.bombEntity} data-testid={`bomb_${rest["data-testid"]}`} />
         </BombFrame>
       );
     case CellState.mark:
@@ -119,14 +118,14 @@ export const ComponentsMap: FunctionComponent<ComponentsMapProps> = ({ children,
   }
 };
 
-const ClosedFrame: FunctionComponent<PropsWithChildren<{ mouseDown?: boolean }>> = ({
+export const ClosedFrame: FunctionComponent<PropsWithChildren<{ mouseDown?: boolean }>> = ({
   mouseDown,
   children,
   ...restProps
 }) => {
   return (
     <div
-      {...restProps}
+      {...(restProps as ExcludeMouseDown)}
       className={classNames(styles.closedFrame, {
         [styles.changedBorderColor]: !mouseDown,
         [styles.transparentClosedFrame]: mouseDown,
@@ -137,10 +136,10 @@ const ClosedFrame: FunctionComponent<PropsWithChildren<{ mouseDown?: boolean }>>
   );
 };
 
-const RevealedFrame: FunctionComponent<PropsWithChildren<RevealedProps>> = ({ children, ...restProps }) => {
+export const RevealedFrame: FunctionComponent<PropsWithChildren<RevealedProps>> = ({ children, ...restProps }) => {
   return (
     <div
-      {...restProps}
+      {...(restProps as ExcludeMouseDown)}
       className={classNames(styles.closedFrame, styles.revealedFrame)}
       style={{
         color: colors[children as CellType] ?? transparent,
@@ -151,20 +150,25 @@ const RevealedFrame: FunctionComponent<PropsWithChildren<RevealedProps>> = ({ ch
   );
 };
 
-const BombFrame: FunctionComponent<{ children: ReactNode }> = ({ children, ...restProps }) => {
+export const BombFrame: FunctionComponent<{ children: ReactNode }> = ({ children, ...restProps }) => {
   return (
-    <div {...restProps} className={classNames(styles.closedFrame, styles.revealedFrame, styles.bombFrame)}>
+    <div
+      {...(restProps as ExcludeMouseDown)}
+      className={classNames(styles.closedFrame, styles.revealedFrame, styles.bombFrame)}
+    >
       {children}
     </div>
   );
 };
 
 const FlagComponent: FunctionComponent = ({ ...restProps }) => {
-  return <div {...restProps} className={styles.flagComponent} />;
+  return <div {...(restProps as ExcludeMouseDown)} className={styles.flagComponent} />;
 };
 
 const WeakFlagComponent: FunctionComponent = ({ ...restProps }) => {
-  return <div {...restProps} className={classNames(styles.flagComponent, styles.flagTransparent)} />;
+  return (
+    <div {...(restProps as ExcludeMouseDown)} className={classNames(styles.flagComponent, styles.flagTransparent)} />
+  );
 };
 
 const transparent = "rgba(0,0,0,0)";
diff --git a/src/index.tsx b/src/index.tsx
index 48122e97..9ae7a611 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,7 @@
 import "@styles/styles.scss";
 import "normalize.css/normalize.css";
 
-// import { CellComponent } from "@components/grid/cell/cell";
+import { CellComponent } from "@components/grid/cell/cell";
 import { ScoreBoard } from "@components/scoreboard";
 // import { App } from "@components/app";
 import { Top } from "@components/top-section";
@@ -23,7 +23,7 @@ root.render(
       {/*  Minesweeper*/}
       {/*</Top>*/}
       {/*<ScoreBoard time="000" onReset={() => null} levels={["beginner", "intermediate", "expert"]} mines="010" />*/}
-      {/*<CellComponent mouseDown={false} children={0} />*/}
+      <CellComponent coords={[1, 1]} children={10} onContextMenu={() => null} onClick={() => null} />
     </>
     {/*</Segment>*/}
   </React.StrictMode>