tests for demo

david-yz-liu · Feb 23, 2024 · 6c41253 · 6c41253
1 parent 058b893
commit 6c41253
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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();