Add more tests to active cell

iddan · Sep 28, 2023 · 684345e · 684345e
1 parent 3238880
commit 684345e
Showing 1 changed file with 56 additions and 1 deletion.
diff --git a/src/ActiveCell.test.tsx b/src/ActiveCell.test.tsx
@@ -3,12 +3,14 @@
  */
 
 import * as React from "react";
-import { render } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 import * as Point from "./point";
 import * as Types from "./types";
+import * as Actions from "./actions";
 import context from "./context";
 import { INITIAL_STATE } from "./reducer";
 import ActiveCell from "./ActiveCell";
+import DataEditor from "./DataEditor";
 
 const MOCK_DATA_EDITOR = jest.fn(() => null);
 const DISPATCH_MOCK = jest.fn();
@@ -30,6 +32,9 @@ const STATE_WITH_ACTIVE: Types.StoreState = {
 };
 
 describe("<ActiveCell />", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
   test("renders hidden when active is not defined", () => {
     render(
       <context.Provider value={[INITIAL_STATE, DISPATCH_MOCK]}>
@@ -73,4 +78,54 @@ describe("<ActiveCell />", () => {
       {}
     );
   });
+  test("calls setCellData if value changed", () => {
+    const { rerender } = render(
+      <context.Provider
+        value={[{ ...STATE_WITH_ACTIVE, mode: "edit" }, DISPATCH_MOCK]}
+      >
+        <ActiveCell DataEditor={DataEditor} />
+      </context.Provider>
+    );
+    const activeCell = document.querySelector(".Spreadsheet__active-cell");
+    expect(activeCell).not.toBeNull();
+    expect(activeCell).toHaveClass("Spreadsheet__active-cell--edit");
+    const input = activeCell?.querySelector("input");
+    if (!input) throw new Error("input not found");
+    fireEvent.change(input, { target: { value: "test" } });
+    expect(DISPATCH_MOCK).toBeCalledTimes(1);
+    expect(DISPATCH_MOCK).toBeCalledWith(
+      Actions.setCellData(Point.ORIGIN, {
+        value: "test",
+      })
+    );
+    rerender(
+      <context.Provider
+        value={[{ ...STATE_WITH_ACTIVE, mode: "view" }, DISPATCH_MOCK]}
+      >
+        <ActiveCell DataEditor={DataEditor} />
+      </context.Provider>
+    );
+    expect(activeCell).not.toHaveClass("Spreadsheet__active-cell--edit");
+  });
+  test("doesn't call setCellData if value not changed", () => {
+    const { rerender } = render(
+      <context.Provider
+        value={[{ ...STATE_WITH_ACTIVE, mode: "edit" }, DISPATCH_MOCK]}
+      >
+        <ActiveCell DataEditor={MOCK_DATA_EDITOR} />
+      </context.Provider>
+    );
+    const activeCell = document.querySelector(".Spreadsheet__active-cell");
+    expect(activeCell).not.toBeNull();
+    expect(activeCell).toHaveClass("Spreadsheet__active-cell--edit");
+    rerender(
+      <context.Provider
+        value={[{ ...STATE_WITH_ACTIVE, mode: "view" }, DISPATCH_MOCK]}
+      >
+        <ActiveCell DataEditor={MOCK_DATA_EDITOR} />
+      </context.Provider>
+    );
+    expect(DISPATCH_MOCK).toBeCalledTimes(0);
+    expect(activeCell).not.toHaveClass("Spreadsheet__active-cell--edit");
+  });
 });