wip, all tests

david-yz-liu · Mar 1, 2024 · 7d7d5ab · 7d7d5ab
1 parent 7c4f7b5
commit 7d7d5ab
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 57 deletions.
diff --git a/demo/package.json b/demo/package.json
@@ -25,6 +25,7 @@
         "@babel/preset-react": "^7.23.3",
         "@babel/preset-typescript": "^7.23.3",
         "@testing-library/react": "^14.2.1",
+        "@testing-library/user-event": "^14.5.2",
         "@types/react": "^18.2.45",
         "@types/react-dom": "^18.2.18",
         "babel-jest": "^29.7.0",

diff --git a/demo/src/MemoryModels.tsx b/demo/src/MemoryModels.tsx
@@ -24,7 +24,7 @@ function MemoryModelsFileInput(props: MemoryModelsInputPropTypes) {
     const onChange = (event) => {
         try {
             const uploadedFile = event.target.files[0];
-            const fileReader = new FileReader();
+            const fileReader = new global.FileReader();
             fileReader.readAsText(uploadedFile, "UTF-8");
             fileReader.onload = (event) => {
                 const fileString = event.target.result as string;
@@ -40,16 +40,19 @@ function MemoryModelsFileInput(props: MemoryModelsInputPropTypes) {
     };
 
     const onReapplyBtnClick = () => {
+        console.log("reached");
         props.setTextData(uploadedFileString);
     };
 
     return (
         <CardContent>
             <Input
                 type="file"
-                data-testid="file-input"
                 onChange={onChange}
-                inputProps={{ accept: "application/JSON" }}
+                inputProps={{
+                    accept: "application/JSON",
+                    "data-testid": "file-input",
+                }}
                 sx={{ width: "100%", input: { color: "primary" } }}
                 disableUnderline={true}
             />
@@ -75,7 +78,8 @@ function MemoryModelsTextInput(props: MemoryModelsInputPropTypes) {
     return (
         <CardContent>
             <TextField
-                id="multiline-textfield"
+                id="multiline-memory-models-textfield"
+                data-testid="textfield-input"
                 label="Enter memory model JSON here"
                 multiline
                 fullWidth

diff --git a/demo/src/__tests__/MemoryModels.spec.tsx b/demo/src/__tests__/MemoryModels.spec.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import MemoryModelsUserInput from "../MemoryModels";
 
 describe("MemoryModelsUserInput", () => {
@@ -79,65 +79,100 @@ describe("MemoryModelsUserInput", () => {
                 />
             );
         });
-        it("works", () => {
-            const fileInput = screen.getByTestId("file-input");
-            expect(fileInput).toBeDefined();
-        });
-    });
-});
-
-import React from "react";
-import { render, fireEvent, screen } from "@testing-library/react";
-import MemoryModelsFileInput from "./MemoryModelsFileInput";
 
-describe("MemoryModelsFileInput component", () => {
-    test("uploads a file and updates text data", () => {
-        const mockSetTextData = jest.fn();
-        render(<MemoryModelsFileInput setTextData={mockSetTextData} />);
-
-        const file = new File(["test content"], "test.json", {
-            type: "application/json",
+        afterEach(() => {
+            // spies / mocks need to be manually restored to not fail subsequent tests
+            jest.restoreAllMocks();
         });
-        const input = screen.getByTestId("file-input");
-        fireEvent.change(input, { target: { files: [file] } });
-
-        expect(mockSetTextData).toHaveBeenCalledWith("test content");
-    });
 
-    test("reapplies uploaded file content to text box", () => {
-        const mockSetTextData = jest.fn();
-        render(<MemoryModelsFileInput setTextData={mockSetTextData} />);
+        it("renders an enabled input and disabled reapply button", () => {
+            const input: HTMLInputElement = screen.getByTestId("file-input");
+            expect(input).toHaveProperty("disabled", false);
 
-        const fileContent = "test content";
-        const file = new File([fileContent], "test.json", {
-            type: "application/json",
+            const reapplyBtn = screen.getByTestId("file-input-reapply-button");
+            expect(reapplyBtn).toHaveProperty("disabled", true);
         });
-        const input = screen.getByTestId("file-input");
-        fireEvent.change(input, { target: { files: [file] } });
-
-        const reapplyButton = screen.getByTestId("file-input-reapply-button");
-        fireEvent.click(reapplyButton);
 
-        expect(mockSetTextData).toHaveBeenCalledWith(fileContent);
-    });
-
-    test("reapply button is disabled when no file is uploaded", () => {
-        render(<MemoryModelsFileInput setTextData={() => {}} />);
-
-        const reapplyButton = screen.getByTestId("file-input-reapply-button");
-        expect(reapplyButton).toBeDisabled();
-    });
-
-    test("reapply button is enabled when a file is uploaded", () => {
-        render(<MemoryModelsFileInput setTextData={() => {}} />);
-
-        const file = new File(["test content"], "test.json", {
-            type: "application/json",
+        it("calls console error and setTextData when file upload fails", async () => {
+            const mockErrorMessage = "Mock error message";
+            const fileReaderSpy = jest
+                .spyOn(global, "FileReader")
+                .mockImplementationOnce(() => {
+                    throw new Error(mockErrorMessage);
+                });
+            const consoleErrorSpy = jest.spyOn(console, "error");
+
+            const file = new File(
+                [JSON.stringify({ id: 1, uuid: 2 })],
+                "test.json",
+                {
+                    type: "application/json",
+                }
+            );
+            const input: HTMLInputElement = screen.getByTestId("file-input");
+            fireEvent.change(input, { target: { files: [file] } });
+            await waitFor(() => {
+                expect(consoleErrorSpy).toHaveBeenNthCalledWith(
+                    1,
+                    `Error parsing uploaded File as JSON: ${mockErrorMessage}`
+                );
+                expect(setTextDataMock).toHaveBeenNthCalledWith(1, null);
+            });
         });
-        const input = screen.getByTestId("file-input");
-        fireEvent.change(input, { target: { files: [file] } });
 
-        const reapplyButton = screen.getByTestId("file-input-reapply-button");
-        expect(reapplyButton).toBeEnabled();
+        describe("when a file is uploaded", () => {
+            const fileString = JSON.stringify({ id: 1, uuid: 2 });
+            let input: HTMLInputElement;
+
+            beforeEach(() => {
+                const file = new File([fileString], "test.json", {
+                    type: "application/json",
+                });
+                input = screen.getByTestId("file-input");
+                fireEvent.change(input, { target: { files: [file] } });
+            });
+
+            it("calls setTextData", async () => {
+                await waitFor(() => {
+                    expect(setTextDataMock).toHaveBeenNthCalledWith(
+                        1,
+                        fileString
+                    );
+                });
+            });
+
+            it("enabled reapply Button", () => {
+                const reapplyBtn = screen.getByTestId(
+                    "file-input-reapply-button"
+                );
+                expect(reapplyBtn).toHaveProperty("disabled", true);
+            });
+
+            it("clicking reapply button calls setTextData", async () => {
+                const reapplyBtn = screen.getByTestId(
+                    "file-input-reapply-button"
+                );
+                fireEvent.click(reapplyBtn);
+
+                await waitFor(() => {
+                    // reapply original fileString
+                    expect(setTextDataMock).toHaveBeenNthCalledWith(
+                        1,
+                        fileString
+                    );
+                });
+            });
+
+            it("clicking reapply button doesn't call setTextData if there hasn't been a text change", async () => {
+                const reapplyBtn = screen.getByTestId(
+                    "file-input-reapply-button"
+                );
+                fireEvent.click(reapplyBtn);
+
+                await waitFor(() => {
+                    expect(setTextDataMock).not.toHaveBeenCalled();
+                });
+            });
+        });
     });
 });
diff --git a/package-lock.json b/package-lock.json