Update tests for modal

david-yz-liu · Oct 2, 2024 · 5ea62b0 · 5ea62b0
1 parent aae6520
commit 5ea62b0
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/demo/src/MemoryModelsUserInput.tsx b/demo/src/MemoryModelsUserInput.tsx
@@ -81,7 +81,11 @@ function MemoryModelsFileInput(props: MemoryModelsFileInputPropTypes) {
             <Button onClick={handleOpen} sx={{ textTransform: "none" }}>
                 File Input
             </Button>
-            <Modal open={open} onClose={handleClose}>
+            <Modal
+                open={open}
+                onClose={handleClose}
+                data-testid="file-input-modal"
+            >
                 <Paper
                     sx={{
                         position: "absolute",

diff --git a/demo/src/__tests__/MemoryModelsUserInput.spec.tsx b/demo/src/__tests__/MemoryModelsUserInput.spec.tsx
@@ -1,5 +1,11 @@
 import React from "react";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import {
+    fireEvent,
+    getByText,
+    render,
+    screen,
+    waitFor,
+} from "@testing-library/react";
 import MemoryModelsUserInput from "../MemoryModelsUserInput";
 
 describe("MemoryModelsUserInput", () => {
@@ -127,7 +133,16 @@ describe("MemoryModelsUserInput", () => {
             jest.restoreAllMocks();
         });
 
+        it("does not render the modal when the page first loads", () => {
+            const modal = screen.queryByTestId("file-input-modal");
+            expect(modal).toBeNull();
+
+            const input: HTMLInputElement = screen.queryByTestId("file-input");
+            expect(input).toBeNull();
+        });
+
         it("renders an enabled input and disabled reapply button", () => {
+            fireEvent.click(screen.getByText("File Input"));
             const input: HTMLInputElement = screen.getByTestId("file-input");
             expect(input).toHaveProperty("disabled", false);
 
@@ -149,6 +164,7 @@ describe("MemoryModelsUserInput", () => {
                     type: "application/json",
                 }
             );
+            fireEvent.click(screen.getByText("File Input"));
             const input: HTMLInputElement = screen.getByTestId("file-input");
             await waitFor(() => {
                 // this needs to be awaited because of fileReader.onload being async
@@ -167,6 +183,7 @@ describe("MemoryModelsUserInput", () => {
             let input: HTMLInputElement;
 
             beforeEach(async () => {
+                fireEvent.click(screen.getByText("File Input"));
                 const file = new File([fileString], "test.json", {
                     type: "application/json",
                 });
@@ -198,10 +215,7 @@ describe("MemoryModelsUserInput", () => {
                     // once from reapplyBtn onChange, once from MemoryModelsTextInput handleTextFieldChange
                     // if put within the same waitFor block as fireEvent.click(reapplyBtn), this test always passes
                     // even with the wrong expect
-                    expect(setTextDataMock).toHaveBeenNthCalledWith(
-                        2,
-                        fileString
-                    );
+                    expect(setTextDataMock).toHaveBeenCalledWith(fileString);
                 });
             });
         });