From 1fcc51b65152189cd33559c67cc42edd7683cf47 Mon Sep 17 00:00:00 2001 From: Sarah Wang Date: Mon, 12 Aug 2024 17:57:33 -0400 Subject: [PATCH] updated styling on input, slight modification to tests --- demo/src/MemoryModelsSample.tsx | 82 +++---- demo/src/MemoryModelsUserInput.tsx | 229 ++++++++++-------- demo/src/SampleInputMenu.tsx | 77 ------ .../src/__tests__/MemoryModelsSample.spec.tsx | 12 +- .../__tests__/MemoryModelsUserInput.spec.tsx | 3 + 5 files changed, 176 insertions(+), 227 deletions(-) delete mode 100644 demo/src/SampleInputMenu.tsx diff --git a/demo/src/MemoryModelsSample.tsx b/demo/src/MemoryModelsSample.tsx index fe528583..cead1b4d 100644 --- a/demo/src/MemoryModelsSample.tsx +++ b/demo/src/MemoryModelsSample.tsx @@ -1,14 +1,6 @@ import React, { useEffect, useState } from "react"; -import { - Accordion, - AccordionDetails, - AccordionSummary, - Button, - Card, - CardContent, - Grid, -} from "@mui/material"; -import { ExpandMore } from "@mui/icons-material"; +import { Button, Menu, MenuItem } from "@mui/material"; +import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded"; import { SAMPLES } from "./sample"; @@ -20,6 +12,14 @@ type MemoryModelsSamplePropTypes = { export default function MemoryModelsSample(props: MemoryModelsSamplePropTypes) { const [clickedBtnIndex, setClickedBtnIndex] = useState(null); + const [anchorEl, setAnchorEl] = useState(null); + const open = Boolean(anchorEl); + const handleClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + const handleClose = () => { + setAnchorEl(null); + }; useEffect(() => { if (clickedBtnIndex !== null) { @@ -40,39 +40,39 @@ export default function MemoryModelsSample(props: MemoryModelsSamplePropTypes) { }; return ( - - } + <> + - - ))} - - - - - + + + + {SAMPLES.map((sample, index) => ( + handleButtonClick(index, sample)} + > + {sample["name"]} + + ))} + + ); } diff --git a/demo/src/MemoryModelsUserInput.tsx b/demo/src/MemoryModelsUserInput.tsx index fa1d4613..5b7980bc 100644 --- a/demo/src/MemoryModelsUserInput.tsx +++ b/demo/src/MemoryModelsUserInput.tsx @@ -1,22 +1,17 @@ import React, { useState } from "react"; import { - Accordion, - AccordionDetails, - AccordionSummary, - Button, Box, - Card, - CardContent, + Button, Checkbox, FormControlLabel, - Grid, Input, - Stack, TextField, Tooltip, + Menu, + MenuItem, } from "@mui/material"; import DownloadJSONButton from "./DownloadJSONButton"; -import { ExpandMore } from "@mui/icons-material"; +import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded"; interface configDataPropTypes { useAutomation: boolean; @@ -74,32 +69,27 @@ function MemoryModelsFileInput(props: MemoryModelsFileInputPropTypes) { }; return ( - - + + - - + Load file data + + ); } @@ -109,29 +99,35 @@ function MemoryModelsTextInput(props: MemoryModelsTextInputPropTypes) { }; return ( - - - + ); } //TODO: Retrieve min and max seeds from memory-viz function MemoryModelsConfigInput(props: MemoryModelsConfigInputPropTypes) { + const [anchorEl, setAnchorEl] = useState(null); + const open = Boolean(anchorEl); + const handleClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + const handleClose = () => { + setAnchorEl(null); + }; const handleSeedChange = (event) => { event.preventDefault(); props.setConfigData({ @@ -154,36 +150,62 @@ function MemoryModelsConfigInput(props: MemoryModelsConfigInputPropTypes) { }; return ( - - - - - } - label="Use automatic layout" - sx={{ width: "50%" }} - /> - - + <> + + + + + + + + } + label="Use automatic layout" + sx={{ width: "50%" }} + /> + + + ); } @@ -206,29 +228,26 @@ export default function MemoryModelsUserInput( textData={props.textData} setTextData={props.setTextData} /> - - - - - - + + + + + + + + ); } diff --git a/demo/src/SampleInputMenu.tsx b/demo/src/SampleInputMenu.tsx deleted file mode 100644 index 727813f1..00000000 --- a/demo/src/SampleInputMenu.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import React, { useState, useEffect } from "react"; -import { Button, Menu, MenuItem } from "@mui/material"; -import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded"; -import { SAMPLES } from "./sample"; - -type MemoryModelsSamplePropTypes = { - setTextData: React.Dispatch>; - setConfigData: React.Dispatch>; - onTextDataSubmit: () => void; -}; - -export default function SampleInputMenu(props: MemoryModelsSamplePropTypes) { - const [anchorEl, setAnchorEl] = useState(null); - const open = Boolean(anchorEl); - const handleClick = (event: React.MouseEvent) => { - setAnchorEl(event.currentTarget); - }; - const handleClose = () => { - setAnchorEl(null); - }; - const [clickedBtnIndex, setClickedBtnIndex] = useState(null); - - useEffect(() => { - if (clickedBtnIndex !== null) { - props.onTextDataSubmit(); - } - }, [clickedBtnIndex]); - - const classes = { - button: { - textTransform: "none", - "& .MuiSvgIcon-root": { - transition: "transform 0.2s ease-in-out", - transform: open ? "rotate(180deg)" : "rotate(0deg)", - }, - }, - }; - - const handleButtonClick = (index: Number, sample: Object) => { - // Note: the following conversion to a string is inefficient, as the data is later parsed - // back into JSON for rendering. - // TODO: fix this. - props.setTextData(JSON.stringify(sample["data"], null, 4)); - props.setConfigData((prevConfigData) => ({ - ...prevConfigData, - ...sample["config"], - })); - setClickedBtnIndex(index); - }; - - return ( -
- - - {SAMPLES.map((sample, index) => ( - handleButtonClick(index, sample)} - > - {sample["name"]} - - ))} - -
- ); -} diff --git a/demo/src/__tests__/MemoryModelsSample.spec.tsx b/demo/src/__tests__/MemoryModelsSample.spec.tsx index 933207c7..6f9b0028 100644 --- a/demo/src/__tests__/MemoryModelsSample.spec.tsx +++ b/demo/src/__tests__/MemoryModelsSample.spec.tsx @@ -44,16 +44,20 @@ describe("MemoryModelsSample", () => { expect(screen.getByText("Sample Inputs")).toBeDefined(); }); - it("renders all sample buttons", () => { + it("renders all sample buttons", async () => { // 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 - SAMPLES.map((sample) => - expect(screen.getByText(sample["name"])).toBeDefined() - ); + fireEvent.click(screen.getByText("Sample Inputs")); + await waitFor(() => { + SAMPLES.map((sample) => + expect(screen.getByText(sample["name"])).toBeDefined() + ); + }); }); it("handles sample button click", async () => { + fireEvent.click(screen.getByText("Sample Inputs")); const button = screen.getByText("Automated Layout"); fireEvent.click(button); diff --git a/demo/src/__tests__/MemoryModelsUserInput.spec.tsx b/demo/src/__tests__/MemoryModelsUserInput.spec.tsx index 9f580016..245b7327 100644 --- a/demo/src/__tests__/MemoryModelsUserInput.spec.tsx +++ b/demo/src/__tests__/MemoryModelsUserInput.spec.tsx @@ -223,6 +223,7 @@ describe("MemoryModelsUserInput", () => { }); it("renders a number input with correct props and checkbox that is checked by default", () => { + fireEvent.click(screen.getByText("Rendering Options")); const seedInput: HTMLInputElement = screen.getByTestId("config-seed"); [ @@ -242,6 +243,7 @@ describe("MemoryModelsUserInput", () => { }); it("handles seed change", () => { + fireEvent.click(screen.getByText("Rendering Options")); const seedInput: HTMLInputElement = screen.getByTestId("config-seed"); const mockSeed = "123"; @@ -256,6 +258,7 @@ describe("MemoryModelsUserInput", () => { }); it("handles automation change", () => { + fireEvent.click(screen.getByText("Rendering Options")); const automationCheckbox: HTMLInputElement = screen.getByLabelText( "Use automatic layout" );