Added test for close button

jest.config.js → jest.config.ts

@@ -25,6 +25,9 @@ module.exports = {
         "src",
         "node_modules"
     ],
+    "moduleNameMapper": {
+        '^@/(.*)': '<rootDir>/src/$1',
+    },
     "setupFiles": ["./setup-jest.js"],
-    "setupFilesAfterEnv": ["jest-chain"],
+    "setupFilesAfterEnv": ["jest-chain", "@testing-library/jest-dom"],
 }

package.json

@@ -149,6 +149,7 @@
         "sanitize-html": "^2.12.1",
         "sweetalert2": "^11.4.17",
         "ts-md5": "^1.3.1",
+        "ts-node": "^10.9.2",
         "valid-url": "^1.0.9",
         "whatwg-fetch": "^3.0.0"
     },

src/components/ChallengeModal/ChallengeModal.test.tsx

@@ -19,9 +19,9 @@
 import * as React from "react";
 
 import * as ChallengeModal from "./ChallengeModal";
-import * as Modal from "./../Modal";
-import { render } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { ModalConsumer, ModalProvider, ModalTypes } from "../Modal/ModalProvider";
+import * as DynamicHelp from "react-dynamic-help";
 
 jest.mock("./../Modal", () => {
     return {
@@ -40,25 +40,49 @@ describe("ChallengeModal", () => {
                 <ModalConsumer>
                     {({ showModal }) => {
                         showModal(ModalTypes.Challenge);
-                        return <div />;
+                        return null;
                     }}
                 </ModalConsumer>
             </ModalProvider>,
         );
-        expect(challengeModalSpy).toHaveBeenCalledWith(
-            expect.objectContaining({
-                game_record_mode: true,
-                mode: "open",
-            }),
-            {},
-        );
+
+        expect(challengeModalSpy.mock.calls[0][0]).toStrictEqual({
+            mode: "computer",
+            initialState: null,
+            playerId: undefined,
+        });
+
+        challengeModalSpy.mockRestore();
     });
 
-    it("should do a computer challenge via modal", () => {
-        const modalSpy = jest.spyOn(Modal, "openModal").mockReturnValue(true);
-        ChallengeModal.challengeComputer();
-        expect(modalSpy).toHaveBeenCalledWith(
-            <ChallengeModal.ChallengeModal initialState={null} mode="computer" />,
+    it("should close", () => {
+        const DynamicHelpProviderValue = {
+            registerTargetItem: jest.fn().mockReturnValue({ ref: jest.fn() }),
+            triggerFlow: jest.fn(),
+            enableHelp: jest.fn(),
+            getFlowInfo: jest.fn(),
+            enableFlow: jest.fn(),
+            reloadUserState: jest.fn(),
+            signalUsed: jest.fn(),
+            getSystemStatus: jest.fn(),
+            resetHelp: jest.fn(),
+        };
+
+        render(
+            <DynamicHelp.Api.Provider value={DynamicHelpProviderValue}>
+                <ModalProvider>
+                    <ModalConsumer>
+                        {({ showModal }) => {
+                            showModal(ModalTypes.Challenge);
+                            return null;
+                        }}
+                    </ModalConsumer>
+                </ModalProvider>
+            </DynamicHelp.Api.Provider>,
         );
+        const closeButton = screen.getByText("Close");
+        expect(closeButton).toBeInTheDocument();
+        fireEvent.click(closeButton);
+        expect(closeButton).not.toBeInTheDocument();
     });
 });

src/components/ChallengeModal/ChallengeModal.tsx

@@ -62,6 +62,7 @@ import {
     saveTimeControlSettings,
     updateSystem,
 } from "@/components/TimeControl/TimeControlUpdates";
+import { ModalConsumer } from "../Modal/ModalProvider";
 
 export type ChallengeDetails = rest_api.ChallengeDetails;
 
@@ -1791,7 +1792,18 @@ export class ChallengeModal extends Modal<Events, ChallengeModalProperties, any>
                     </div>
                 )} */}
                 <div className="buttons">
-                    <button onClick={this.close}>{_("Close")}</button>
+                    <ModalConsumer>
+                        {(value) => (
+                            <button
+                                onClick={() => {
+                                    this.close();
+                                    value.hideModal();
+                                }}
+                            >
+                                {_("Close")}
+                            </button>
+                        )}
+                    </ModalConsumer>
                     {mode === "demo" && (
                         <button onClick={this.createDemo} className="primary">
                             {this.props.game_record_mode

src/components/Modal/ModalProvider.tsx

@@ -20,9 +20,11 @@ import * as React from "react";
 
 import { ChallengeModal, ChallengeModes } from "../ChallengeModal";
 import { createPortal } from "react-dom";
+import { deepEqual } from "@/lib/misc";
 
 type ModalProviderType = {
     showModal: (types: ModalTypes) => void;
+    hideModal: () => void;
 };
 
 export enum ModalTypes {
@@ -39,7 +41,8 @@ interface Modals {
 
 type Property<T, K extends keyof T> = T[K];
 
-const { Provider, Consumer } = React.createContext({} as ModalProviderType);
+export const ModalContext = React.createContext({} as ModalProviderType);
+const { Provider, Consumer } = ModalContext;
 
 export const ModalConsumer = Consumer;
 
@@ -49,22 +52,27 @@ export const ModalProvider = ({ children }: React.PropsWithChildren): JSX.Elemen
 
     function showModal() {
         setModal(true);
-        setProps({
-            mode: "computer",
+
+        const payload = {
+            mode: "computer" as ChallengeModes,
             initialState: null,
             playerId: undefined,
-        });
+        };
+
+        if (!deepEqual(props, payload)) {
+            setProps(payload);
+        }
     }
 
-    const hideModal = () => {
+    function hideModal() {
         setModal(false);
-    };
+    }
     return (
-        <Provider value={{ showModal }}>
+        <Provider value={{ showModal, hideModal }}>
             {modal &&
                 createPortal(
                     <div className="Modal-container">
-                        <ChallengeModal {...props} onClose={hideModal} />
+                        <ChallengeModal {...props} />
                     </div>,
                     document.body,
                 )}