prop types, error boundary tests

demo/src/App.tsx

@@ -26,7 +26,13 @@ export default function App() {
             />
             <section>
                 <h2>Output</h2>
-                <ErrorBoundary fallback={<div>Something went wrong</div>}>
+                <ErrorBoundary
+                    fallback={
+                        <div data-testid="svg-display-error-boundary">
+                            Something went wrong
+                        </div>
+                    }
+                >
                     <SvgDisplay jsonResult={jsonResult} />
                 </ErrorBoundary>
             </section>

demo/src/MemoryModels.tsx

@@ -1,7 +1,15 @@
 import React from "react";
 import { Button, Card, CardContent, TextField, Grid } from "@mui/material";
 
-export default function MemoryModelsUserInput(props) {
+type MemoryModelsUserInputPropTypes = {
+    onSubmit: (event: React.MouseEvent<HTMLFormElement>) => void;
+    setFormData: React.Dispatch<React.SetStateAction<string>>;
+    formData: string;
+};
+
+export default function MemoryModelsUserInput(
+    props: MemoryModelsUserInputPropTypes
+) {
     const handleTextFieldChange = (event) => {
         props.setFormData(event.target.value);
     };

demo/src/SvgDisplay.tsx

@@ -1,7 +1,11 @@
 import React, { useRef, useEffect } from "react";
 import mem from "../../src/index"; // TODO: replace with import of the package after it's been published
 
-export default function SvgDisplay(props) {
+type SvgDisplayPropTypes = {
+    jsonResult: object;
+};
+
+export default function SvgDisplay(props: SvgDisplayPropTypes) {
     const canvasRef = useRef(null);
 
     useEffect(() => {

demo/src/__tests__/App.spec.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import App from "../App";
+
+describe("App", () => {
+    beforeEach(() => {
+        render(<App />);
+    });
+
+    it("renders Output heading", () => {
+        expect(screen.getByText("Output").nodeName).toEqual("H2");
+    });
+
+    it("renders ErrorBoundary fallback element when draw function throws error", () => {
+        jest.mock("../../../src/index", () => ({
+            draw: jest.fn(() => {
+                throw new Error();
+            }),
+        }));
+        const input = screen.getByLabelText("Enter memory model JSON here");
+        // In order to get to draw function, input has to be valid json otherwise JSON.parse fails
+        fireEvent.change(input, { target: { value: "[{}]" } });
+        const button = screen.getByTestId("input-submit-button");
+        fireEvent.click(button);
+
+        const errorBoundary = screen.getByTestId("svg-display-error-boundary");
+        expect(errorBoundary.textContent).toEqual("Something went wrong");
+    });
+});

demo/src/__tests__/MemoryModelsUserInput.spec.tsx

@@ -30,6 +30,7 @@ describe("MemoryModelsUserInput", () => {
 
         render(
             <MemoryModelsUserInput
+                onSubmit={onSubmitMock}
                 setFormData={setFormDataMock}
                 formData={formDataMock}
             />

demo/src/__tests__/SvgDisplay.spec.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cleanup, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import SvgDisplay from "../SvgDisplay";
 import mem from "../../../src/index";
 const { draw } = mem;