diff --git a/demo/src/App.tsx b/demo/src/App.tsx index 7d80a2e7..aedec23b 100644 --- a/demo/src/App.tsx +++ b/demo/src/App.tsx @@ -12,7 +12,7 @@ export default function App() { try { setJsonResult(JSON.parse(formData)); } catch (error) { - console.error("Error parsing inputted JSON: ", error); + console.error(`Error parsing inputted JSON: ${error.message}`); setJsonResult(null); } }; @@ -26,7 +26,13 @@ export default function App() { />

Output

- Something went wrong}> + + Something went wrong + + } + >
diff --git a/demo/src/MemoryModels.tsx b/demo/src/MemoryModels.tsx index 404369c2..70b647ac 100644 --- a/demo/src/MemoryModels.tsx +++ b/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) => void; + setFormData: React.Dispatch>; + formData: string; +}; + +export default function MemoryModelsUserInput( + props: MemoryModelsUserInputPropTypes +) { const handleTextFieldChange = (event) => { props.setFormData(event.target.value); }; diff --git a/demo/src/SvgDisplay.tsx b/demo/src/SvgDisplay.tsx index dd4d10d0..c993e54d 100644 --- a/demo/src/SvgDisplay.tsx +++ b/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(() => { diff --git a/demo/src/__tests__/App.spec.tsx b/demo/src/__tests__/App.spec.tsx new file mode 100644 index 00000000..769beb4f --- /dev/null +++ b/demo/src/__tests__/App.spec.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import { fireEvent, render, screen } from "@testing-library/react"; +import App from "../App"; + +describe("App", () => { + beforeEach(() => { + render(); + }); + + 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"); + }); + + it("calls console error when the input is not valid JSON", () => { + const consoleErrorSpy = jest + .spyOn(console, "error") + .mockImplementation(); + + const input = screen.getByLabelText("Enter memory model JSON here"); + fireEvent.change(input, { target: { value: "*&#*#(@(!(" } }); + const button = screen.getByTestId("input-submit-button"); + fireEvent.click(button); + + expect(consoleErrorSpy).toHaveBeenCalledWith( + expect.stringMatching(/^Error parsing inputted JSON: /) + ); + }); +}); diff --git a/demo/src/__tests__/MemoryModelsUserInput.spec.tsx b/demo/src/__tests__/MemoryModelsUserInput.spec.tsx index e4f59d1b..d4f799e9 100644 --- a/demo/src/__tests__/MemoryModelsUserInput.spec.tsx +++ b/demo/src/__tests__/MemoryModelsUserInput.spec.tsx @@ -30,6 +30,7 @@ describe("MemoryModelsUserInput", () => { render( diff --git a/demo/src/__tests__/SvgDisplay.spec.tsx b/demo/src/__tests__/SvgDisplay.spec.tsx index cfd649b9..7fb48f7d 100644 --- a/demo/src/__tests__/SvgDisplay.spec.tsx +++ b/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;