From 6c4125363b2f9c61e03c8f3e261f73f8ea15edad Mon Sep 17 00:00:00 2001
From: "Ziyuan (Jerry) Zhang" <ziyuanzhang2019@gmail.com>
Date: Fri, 23 Feb 2024 10:51:41 -0500
Subject: [PATCH] tests for demo

---
 demo/src/MemoryModels.tsx                     |  4 +-
 .../__tests__/MemoryModelsUserInput.spec.tsx  | 60 +++++++++++++++----
 demo/src/__tests__/SvgDisplay.spec.tsx        |  6 +-
 3 files changed, 55 insertions(+), 15 deletions(-)

diff --git a/demo/src/MemoryModels.tsx b/demo/src/MemoryModels.tsx
index 32120338..404369c2 100644
--- a/demo/src/MemoryModels.tsx
+++ b/demo/src/MemoryModels.tsx
@@ -7,7 +7,7 @@ export default function MemoryModelsUserInput(props) {
     };
 
     return (
-        <form onSubmit={props.onSubmit}>
+        <form data-testid="input-form" onSubmit={props.onSubmit}>
             <Card>
                 <CardContent>
                     <Grid container spacing={2}>
@@ -30,8 +30,10 @@ export default function MemoryModelsUserInput(props) {
                         <Grid item xs={12}>
                             <Button
                                 type="submit"
+                                data-testid="input-submit-button"
                                 variant="contained"
                                 color="primary"
+                                disabled={!props.formData}
                                 style={{ textTransform: "none" }}
                             >
                                 Draw Diagram
diff --git a/demo/src/__tests__/MemoryModelsUserInput.spec.tsx b/demo/src/__tests__/MemoryModelsUserInput.spec.tsx
index 36969e9d..e4f59d1b 100644
--- a/demo/src/__tests__/MemoryModelsUserInput.spec.tsx
+++ b/demo/src/__tests__/MemoryModelsUserInput.spec.tsx
@@ -1,13 +1,15 @@
 import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import MemoryModelsUserInput from "../MemoryModels";
+import { before } from "node:test";
 
 describe("MemoryModelsUserInput", () => {
-    it("calls onSubmit prop function when form is submitted", () => {
-        const onSubmitMock = jest.fn((e) => e.preventDefault());
-        const setFormDataMock = jest.fn();
-        const formDataMock = "Mock form data";
+    // submit button by default resets the form https://stackoverflow.com/a/62404526
+    const onSubmitMock = jest.fn((e) => e.preventDefault());
+    const setFormDataMock = jest.fn();
 
+    it("does not submit the form or enable the submit button with empty formData", () => {
+        const formDataMock = "";
         render(
             <MemoryModelsUserInput
                 onSubmit={onSubmitMock}
@@ -16,14 +18,52 @@ describe("MemoryModelsUserInput", () => {
             />
         );
 
-        const input = screen.getByLabelText("Enter memory model JSON here");
-        fireEvent.change(input, { target: { value: "Updated form data" } });
+        const button = screen.getByTestId("input-submit-button");
+        expect(button).toHaveProperty("disabled", true);
 
-        const button = screen.getByText("Draw Diagram");
         fireEvent.click(button);
+        expect(onSubmitMock).not.toHaveBeenCalled();
+    });
+
+    it("accepts changes to formData", () => {
+        const formDataMock = "";
+
+        render(
+            <MemoryModelsUserInput
+                setFormData={setFormDataMock}
+                formData={formDataMock}
+            />
+        );
+
+        const updateFormData = "Updated form data";
+        const input = screen.getByLabelText("Enter memory model JSON here");
+        fireEvent.change(input, { target: { value: updateFormData } });
+
+        expect(setFormDataMock).toHaveBeenCalledWith(updateFormData);
+    });
+
+    describe("with non-empty formData", () => {
+        const formDataMock = "Form data";
+        beforeEach(() => {
+            render(
+                <MemoryModelsUserInput
+                    onSubmit={onSubmitMock}
+                    setFormData={setFormDataMock}
+                    formData={formDataMock}
+                />
+            );
+        });
 
-        expect(onSubmitMock).toHaveBeenCalled();
+        it("renders an enabled submit button with correct text", async () => {
+            const button = screen.getByTestId("input-submit-button");
+            expect(button).toHaveProperty("disabled", false);
+            expect(button.textContent).toEqual("Draw Diagram");
+        });
 
-        expect(setFormDataMock).toHaveBeenCalledWith("Updated form data");
+        it("can submit the form", () => {
+            const form = screen.getByTestId("input-form");
+            fireEvent.submit(form);
+            expect(onSubmitMock).toHaveBeenCalled();
+        });
     });
 });
diff --git a/demo/src/__tests__/SvgDisplay.spec.tsx b/demo/src/__tests__/SvgDisplay.spec.tsx
index c656f161..0e0779e8 100644
--- a/demo/src/__tests__/SvgDisplay.spec.tsx
+++ b/demo/src/__tests__/SvgDisplay.spec.tsx
@@ -13,8 +13,7 @@ jest.mock("../../../src/index", () => ({
 
 describe("SvgDisplay", () => {
     describe("when jsonResult is not null", () => {
-        let jsonResult;
-
+        let jsonResult: Object;
         beforeEach(() => {
             jsonResult = [
                 {
@@ -35,7 +34,6 @@ describe("SvgDisplay", () => {
             ];
             render(<SvgDisplay jsonResult={jsonResult} />);
         });
-
         afterEach(cleanup);
 
         it("renders canvas element with specified dimensions", () => {
@@ -51,7 +49,7 @@ describe("SvgDisplay", () => {
         });
     });
 
-    it("does not render anything when jsonResult is null", () => {
+    it("does not render any diagrams when jsonResult is null", () => {
         render(<SvgDisplay jsonResult={null} />);
         const canvasElement = screen.getByTestId("memory-models-canvas");
         expect(canvasElement.getAttribute("ref")).toBeNull();