From 80af0f2134b28322d84a268e8b1c80111fe24642 Mon Sep 17 00:00:00 2001
From: Muhammad Zourdy <zhafarmuhammad12@gmail.com>
Date: Fri, 5 Aug 2022 08:16:31 +0200
Subject: [PATCH] Add test cases for scoreboard components

---
 .../level/__snapshots__/level.test.tsx.snap   | 26 +++++++++++++++++++
 .../components/level/level.test.tsx           | 23 ++++++++++++++++
 .../scoreboard/components/level/level.tsx     |  9 ++++---
 .../components/reset/reset.module.scss        |  3 ++-
 .../scoreboard/scoreboard.module.scss         |  3 +--
 src/components/scoreboard/scoreboard.tsx      | 14 +++++++---
 src/index.tsx                                 |  6 -----
 7 files changed, 68 insertions(+), 16 deletions(-)
 create mode 100644 src/components/scoreboard/components/level/__snapshots__/level.test.tsx.snap
 create mode 100644 src/components/scoreboard/components/level/level.test.tsx

diff --git a/src/components/scoreboard/components/level/__snapshots__/level.test.tsx.snap b/src/components/scoreboard/components/level/__snapshots__/level.test.tsx.snap
new file mode 100644
index 00000000..7b72fcde
--- /dev/null
+++ b/src/components/scoreboard/components/level/__snapshots__/level.test.tsx.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Level component test case should render level correctly 1`] = `
+<DocumentFragment>
+  <select
+    class="selectLevel"
+    role="select-component"
+  >
+    <option
+      class="optionLevel"
+    >
+      beginner
+    </option>
+    <option
+      class="optionLevel"
+    >
+      intermediate
+    </option>
+    <option
+      class="optionLevel"
+    >
+      expert
+    </option>
+  </select>
+</DocumentFragment>
+`;
diff --git a/src/components/scoreboard/components/level/level.test.tsx b/src/components/scoreboard/components/level/level.test.tsx
new file mode 100644
index 00000000..50432856
--- /dev/null
+++ b/src/components/scoreboard/components/level/level.test.tsx
@@ -0,0 +1,23 @@
+import { Level } from "@components/scoreboard/components";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+
+describe("Level component test case", function () {
+  it("should render level correctly", function () {
+    const onChange = jest.fn();
+    const levelData = ["beginner", "intermediate", "expert"];
+    const { asFragment } = render(<Level levelData={levelData} onChange={onChange} />);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it("should Select level behaviour", function () {
+    const onChange = jest.fn();
+    const levelData = ["beginner", "intermediate", "expert"];
+    render(<Level levelData={levelData} onChange={onChange} />);
+
+    userEvent.selectOptions(screen.getByRole("select-component"), "intermediate");
+    expect(screen.getByRole("option", { name: "intermediate" })).toBeEnabled();
+  });
+});
diff --git a/src/components/scoreboard/components/level/level.tsx b/src/components/scoreboard/components/level/level.tsx
index d76f9dfc..fd1f8427 100644
--- a/src/components/scoreboard/components/level/level.tsx
+++ b/src/components/scoreboard/components/level/level.tsx
@@ -1,9 +1,12 @@
-import React, { FunctionComponent } from "react";
+import React, { ChangeEvent, FunctionComponent } from "react";
 
 import styles from "./level.module.scss";
 
-export const Level: FunctionComponent<{ levelData: string[] }> = ({ levelData }) => (
-  <select className={styles.selectLevel}>
+export const Level: FunctionComponent<{
+  levelData: string[];
+  onChange: (event: ChangeEvent<HTMLSelectElement>) => void;
+}> = ({ levelData, onChange }) => (
+  <select onChange={onChange} className={styles.selectLevel} role="select-component">
     {levelData.map((item: string) => {
       return (
         <option className={styles.optionLevel} key={item}>
diff --git a/src/components/scoreboard/components/reset/reset.module.scss b/src/components/scoreboard/components/reset/reset.module.scss
index f2317bb4..7b2928ff 100644
--- a/src/components/scoreboard/components/reset/reset.module.scss
+++ b/src/components/scoreboard/components/reset/reset.module.scss
@@ -1,5 +1,6 @@
 .resetButton {
-  font-size: 1.5vw;
+  font-size: 1.1vw;
+  height: 100%;
   cursor: pointer;
   font-weight: 700;
   border-width: 0.15vw;
diff --git a/src/components/scoreboard/scoreboard.module.scss b/src/components/scoreboard/scoreboard.module.scss
index 484e6a70..5a4ab741 100644
--- a/src/components/scoreboard/scoreboard.module.scss
+++ b/src/components/scoreboard/scoreboard.module.scss
@@ -1,6 +1,5 @@
 .wrapperScoreboard {
   display: flex;
-  width: max-content;
-  padding-bottom: 2vw;
+  width: 100%;
   justify-content: space-between;
 }
diff --git a/src/components/scoreboard/scoreboard.tsx b/src/components/scoreboard/scoreboard.tsx
index 06f90c7a..24162c85 100644
--- a/src/components/scoreboard/scoreboard.tsx
+++ b/src/components/scoreboard/scoreboard.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from "react";
+import React, { ChangeEvent, FunctionComponent } from "react";
 
 import { Counter, Level, ResetButton } from "./components";
 import styles from "./scoreboard.module.scss";
@@ -20,14 +20,20 @@ export interface ScoreboardProps {
    * Bombs in the field
    */
   mines: string;
+  /**
+   * Action handler when select new lvl
+   */
+  onChange: (event: ChangeEvent<HTMLSelectElement>) => void;
 }
 
-export const ScoreBoard: FunctionComponent<ScoreboardProps> = ({ time, mines, onReset, levels }) => {
+export const ScoreBoard: FunctionComponent<ScoreboardProps> = ({ time, mines, onReset, levels, onChange }) => {
   return (
     <div className={styles.wrapperScoreboard}>
       <Counter itemNumber={time} />
-      <Level levelData={levels} />
-      <ResetButton onReset={onReset} />
+      <div>
+        <Level onChange={onChange} levelData={levels} />
+        <ResetButton onReset={onReset} />
+      </div>
       <Counter itemNumber={mines} />
     </div>
   );
diff --git a/src/index.tsx b/src/index.tsx
index fc3c5606..f13a84c3 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -6,26 +6,20 @@ import { MockFieldData } from "@helpers/mockData";
 import React from "react";
 import { createRoot } from "react-dom/client";
 
-// import { CellComponent } from "@components/grid/cell/cell";
 // import { ScoreBoard } from "@components/scoreboard";
-// import { App } from "@components/app";
 // import { Top } from "@components/top-section";
 
-// import Segment from "react-segment-analytics";
-
 const container = document.getElementById("root") as HTMLElement;
 const root = createRoot(container);
 
 root.render(
   <React.StrictMode>
     {/*<Segment writeKey={process.env.SEGMENT_WRITE_KEY as string}>*/}
-    {/*<App />*/}
     <>
       {/*<Top feature="Flag" firstAction="ctrl" secondAction="click">*/}
       {/*  Minesweeper*/}
       {/*</Top>*/}
       {/*<ScoreBoard time="000" onReset={() => null} levels={["beginner", "intermediate", "expert"]} mines="010" />*/}
-      {/*<CellComponent coords={[1, 1]} children={10} onContextMenu={() => null} onClick={() => null} />*/}
       <GridComponent children={MockFieldData} onContextMenu={() => null} onClick={() => null} />
     </>
     {/*</Segment>*/}