diff --git a/demo/src/MemoryModelsSample.tsx b/demo/src/MemoryModelsSample.tsx index 76399cb..fe52858 100644 --- a/demo/src/MemoryModelsSample.tsx +++ b/demo/src/MemoryModelsSample.tsx @@ -10,6 +10,8 @@ import { } from "@mui/material"; import { ExpandMore } from "@mui/icons-material"; +import { SAMPLES } from "./sample"; + type MemoryModelsSamplePropTypes = { setTextData: React.Dispatch>; setConfigData: React.Dispatch>; @@ -17,9 +19,6 @@ type MemoryModelsSamplePropTypes = { }; export default function MemoryModelsSample(props: MemoryModelsSamplePropTypes) { - const [fileContents, setFileContents] = useState<{ - [key: string]: [string, Object]; - }>({}); const [clickedBtnIndex, setClickedBtnIndex] = useState(null); useEffect(() => { @@ -28,45 +27,14 @@ export default function MemoryModelsSample(props: MemoryModelsSamplePropTypes) { } }, [clickedBtnIndex]); - // useEffect with empty dependency array mimics componentDidMount - // https://stackoverflow.com/a/58579462 - useEffect(() => { - const samples = [ - "automation", - "blankspace", - "manual", - "simple", - "style", - ]; - const tempFileContents = {}; - for (const sample of samples) { - // client-side React doesn't have many options for reading local files - // fs doesn't work. Alternatively since the goal is storing string, - // we can just store the file as the product of JSON.stringify in .txt - // but that'd be a design choice - tempFileContents[sample] = [ - JSON.stringify( - require(`./sample/${sample}/${sample}.json`), - null, - 2 - ), - require(`./sample/${sample}/config.json`), - ]; - } - setFileContents({ - ...tempFileContents, - }); - }, []); - - const handleButtonClick = ( - index: Number, - content: string, - config: Object - ) => { - props.setTextData(content); + 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, - ...config, + ...sample["config"], })); setClickedBtnIndex(index); }; @@ -83,16 +51,12 @@ export default function MemoryModelsSample(props: MemoryModelsSamplePropTypes) { - {Object.entries(fileContents).map((file, index) => ( + {SAMPLES.map((sample, index) => ( ))} diff --git a/demo/src/__tests__/MemoryModelsSample.spec.tsx b/demo/src/__tests__/MemoryModelsSample.spec.tsx index ad773e7..933207c 100644 --- a/demo/src/__tests__/MemoryModelsSample.spec.tsx +++ b/demo/src/__tests__/MemoryModelsSample.spec.tsx @@ -1,15 +1,21 @@ jest.mock( - "../sample/automation/automation.json", + "../sample/automated-layout/data.json", () => ({ sample: "automation" }), { virtual: true } ); -jest.mock("../sample/automation/config.json", () => ({ config: "config" }), { - virtual: true, -}); +jest.mock( + "../sample/automated-layout/config.json", + () => ({ config: "config" }), + { + virtual: true, + } +); import React from "react"; import { fireEvent, render, screen, waitFor } from "@testing-library/react"; import MemoryModelsSample from "../MemoryModelsSample"; +import { SAMPLES } from "../sample"; + describe("MemoryModelsSample", () => { // submit button by default resets the form https://stackoverflow.com/a/62404526 const onSubmitMock = jest.fn(() => {}); @@ -42,19 +48,19 @@ describe("MemoryModelsSample", () => { // 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() + SAMPLES.map((sample) => + expect(screen.getByText(sample["name"])).toBeDefined() ); }); it("handles sample button click", async () => { - const button = screen.getByText("automation"); + const button = screen.getByText("Automated Layout"); fireEvent.click(button); // Wait for state updates and side effects to complete await waitFor(() => { expect(setTextDataMock).toHaveBeenCalledWith( - JSON.stringify({ sample: "automation" }, null, 2) + JSON.stringify({ sample: "automation" }, null, 4) ); expect(nextState).toEqual({ config: "config" }); expect(onSubmitMock).toHaveBeenCalled(); diff --git a/demo/src/sample/automation/config.json b/demo/src/sample/automated-layout/config.json similarity index 100% rename from demo/src/sample/automation/config.json rename to demo/src/sample/automated-layout/config.json diff --git a/demo/src/sample/automation/automation.json b/demo/src/sample/automated-layout/data.json similarity index 100% rename from demo/src/sample/automation/automation.json rename to demo/src/sample/automated-layout/data.json diff --git a/demo/src/sample/blankspace/config.json b/demo/src/sample/blanks/config.json similarity index 100% rename from demo/src/sample/blankspace/config.json rename to demo/src/sample/blanks/config.json diff --git a/demo/src/sample/blankspace/blankspace.json b/demo/src/sample/blanks/data.json similarity index 100% rename from demo/src/sample/blankspace/blankspace.json rename to demo/src/sample/blanks/data.json diff --git a/demo/src/sample/index.tsx b/demo/src/sample/index.tsx new file mode 100644 index 0000000..ca3c6fc --- /dev/null +++ b/demo/src/sample/index.tsx @@ -0,0 +1,38 @@ +import automated_layout_config from "./automated-layout/config"; +import automated_layout_data from "./automated-layout/data"; +import blanks_config from "./blanks/config"; +import blanks_data from "./blanks/data"; +import manual_layout_config from "./manual-layout/config"; +import manual_layout_data from "./manual-layout/data"; +import simple_config from "./simple/config"; +import simple_data from "./simple/data"; +import styling_config from "./styling/config"; +import styling_data from "./styling/data"; + +export const SAMPLES = [ + { + name: "Simple", + data: simple_data, + config: simple_config, + }, + { + name: "Manual Layout", + data: manual_layout_data, + config: manual_layout_config, + }, + { + name: "Automated Layout", + data: automated_layout_data, + config: automated_layout_config, + }, + { + name: "Blank spaces", + data: blanks_data, + config: blanks_config, + }, + { + name: "Custom styling", + data: styling_data, + config: styling_config, + }, +]; diff --git a/demo/src/sample/manual/config.json b/demo/src/sample/manual-layout/config.json similarity index 100% rename from demo/src/sample/manual/config.json rename to demo/src/sample/manual-layout/config.json diff --git a/demo/src/sample/manual/manual.json b/demo/src/sample/manual-layout/data.json similarity index 100% rename from demo/src/sample/manual/manual.json rename to demo/src/sample/manual-layout/data.json diff --git a/demo/src/sample/simple/simple.json b/demo/src/sample/simple/data.json similarity index 100% rename from demo/src/sample/simple/simple.json rename to demo/src/sample/simple/data.json diff --git a/demo/src/sample/style/config.json b/demo/src/sample/styling/config.json similarity index 100% rename from demo/src/sample/style/config.json rename to demo/src/sample/styling/config.json diff --git a/demo/src/sample/style/style.json b/demo/src/sample/styling/data.json similarity index 100% rename from demo/src/sample/style/style.json rename to demo/src/sample/styling/data.json diff --git a/demo/webpack.config.js b/demo/webpack.config.js index 6457dcb..149ae31 100644 --- a/demo/webpack.config.js +++ b/demo/webpack.config.js @@ -38,6 +38,7 @@ module.exports = [ test: /\.css$/i, use: ["style-loader", "css-loader"], }, + { test: /\.json$/, type: "json" }, ], }, mode: "development", @@ -53,7 +54,7 @@ module.exports = [ }), ], resolve: { - extensions: [".ts", ".tsx", ".js", ".jsx", ".css"], + extensions: [".ts", ".tsx", ".js", ".jsx", ".json", ".css"], }, }, ];