diff --git a/demo/src/MemoryModelsSample.tsx b/demo/src/MemoryModelsSample.tsx index 7d93e34f..c3d9b9bf 100644 --- a/demo/src/MemoryModelsSample.tsx +++ b/demo/src/MemoryModelsSample.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from "react"; +import React, { useEffect, useState } from "react"; import { Accordion, AccordionDetails, @@ -8,7 +8,6 @@ import { CardContent, Grid, } from "@mui/material"; -import { configDataPropTypes } from "./MemoryModelsUserInput"; import { ExpandMore } from "@mui/icons-material"; type MemoryModelsSamplePropTypes = { @@ -74,7 +73,7 @@ export default function MemoryModelsSample(props: MemoryModelsSamplePropTypes) { expandIcon={} data-testid="sample-inputs-accordion" > - Sample inputs + Sample Inputs diff --git a/demo/src/__tests__/MemoryModelsSample.spec.tsx b/demo/src/__tests__/MemoryModelsSample.spec.tsx index 7c9b0ddb..6d1516b5 100644 --- a/demo/src/__tests__/MemoryModelsSample.spec.tsx +++ b/demo/src/__tests__/MemoryModelsSample.spec.tsx @@ -1,3 +1,63 @@ +jest.mock( + "../sample/automation/automation.json", + () => ({ sample: "automation" }), + { virtual: true } +); +jest.mock("../sample/automation/config.json", () => ({ config: "config" }), { + virtual: true, +}); + import React from "react"; import { fireEvent, render, screen, waitFor } from "@testing-library/react"; import MemoryModelsSample from "../MemoryModelsSample"; +describe("MemoryModelsSample", () => { + // submit button by default resets the form https://stackoverflow.com/a/62404526 + const onSubmitMock = jest.fn(() => {}); + const setTextDataMock = jest.fn(); + let nextState; + let setConfigDataMock; + + beforeEach(() => { + setConfigDataMock = jest.fn().mockImplementation((callback) => { + nextState = callback({ config: "config" }); + }); + + render( + + ); + }); + + it("renders Accordion", () => { + expect( + screen.getByTestId("sample-inputs-accordion").textContent + ).toEqual("Sample Inputs"); + expect(screen.getByText("Sample Inputs")).toBeDefined(); + }); + + it("renders all sample buttons", () => { + // sx for MUI comps or non-inline CSS in general will not be loaded into Jest by default + // might be achievable with some libs but this test makes sure the base texts are present. + // Therefore, we can't test for capitalization (via sx) here + ["automation", "blankspace", "manual", "simple", "style"].map( + (sample) => expect(screen.getByText(sample)).toBeDefined() + ); + }); + + it("handles sample button click", async () => { + const button = screen.getByText("automation"); + fireEvent.click(button); + + // Wait for state updates and side effects to complete + await waitFor(() => { + // expect(onSubmitMock).toHaveBeenCalledWith(); + expect(setTextDataMock).toHaveBeenCalledWith( + JSON.stringify({ sample: "automation" }, null, 2) + ); + expect(nextState).toEqual({ config: "config" }); + }); + }); +});