refactor(chart-playground-web): dedupe prettifyJson, memoize handler, single key source

Author: yordan-st

packages/pluggableWidgets/chart-playground-web/src/helpers/__tests__/editorJson.spec.ts

@@ -0,0 +1,11 @@
+import { prettifyJson } from "../editorJson";
+
+describe("prettifyJson", () => {
+    it("formats valid JSON with two-space indentation", () => {
+        expect(prettifyJson('{"a":1}')).toBe('{\n  "a": 1\n}');
+    });
+
+    it("returns an error object string for invalid JSON", () => {
+        expect(prettifyJson("{ not json")).toBe('{ "error": "invalid JSON" }');
+    });
+});

packages/pluggableWidgets/chart-playground-web/src/helpers/__tests__/stubObjectURL.ts

@@ -0,0 +1,7 @@
+// shared-charts' main barrel imports plotly, which calls URL.createObjectURL at load time.
+// jsdom/happy-dom doesn't implement it. Import this module BEFORE the barrel to stub it.
+if (typeof window.URL.createObjectURL !== "function") {
+    window.URL.createObjectURL = () => "";
+}
+
+export {};

packages/pluggableWidgets/chart-playground-web/src/helpers/__tests__/useComposedEditorController.spec.ts

@@ -1,7 +1,4 @@
-jest.mock("plotly.js-dist-min", () => ({}));
-jest.mock("react-plotly.js", () => jest.fn(() => null));
-jest.mock("react-plotly.js/factory", () => jest.fn(() => jest.fn(() => null)));
-
+import "./stubObjectURL";
 import { act, renderHook } from "@testing-library/react";
 import { EditorStore, PlaygroundDataV1 } from "@mendix/shared-charts/main";
 import { useComposedEditorController } from "../useComposedEditorController";
@@ -33,4 +30,14 @@ describe("useComposedEditorController", () => {
         // not get replaced by the store's reformatted echo of that same edit.
         expect(result.current.value).toBe('{"a":1,"b":2}');
     });
+
+    it("keeps onViewSelectChange identity stable across re-renders", () => {
+        const data = setupData();
+        const { result, rerender } = renderHook(() => useComposedEditorController(data));
+        const first = result.current.onViewSelectChange;
+
+        rerender();
+
+        expect(result.current.onViewSelectChange).toBe(first);
+    });
 });

packages/pluggableWidgets/chart-playground-web/src/helpers/__tests__/useV2EditorController.spec.ts

@@ -1,28 +1,33 @@
-jest.mock("plotly.js-dist-min", () => ({}));
-jest.mock("react-plotly.js", () => jest.fn(() => null));
-jest.mock("react-plotly.js/factory", () => jest.fn(() => jest.fn(() => null)));
-
+import "./stubObjectURL";
 import { act, renderHook } from "@testing-library/react";
-import { EditableChartStore, PlaygroundDataV2 } from "@mendix/shared-charts/main";
+import { observable } from "mobx";
+import { EditableChartStore, EditableChartStoreProps, PlaygroundDataV2 } from "@mendix/shared-charts/main";
+import { SetupHost } from "@mendix/widget-plugin-mobx-kit/main";
 import { useV2EditorController } from "../useV2EditorController";
 
-function setupData(): PlaygroundDataV2 {
-    const host = { add: () => {} };
-    const props = { get: () => ({ layout: {}, config: {}, data: [] }) };
-    const store = new EditableChartStore(host as any, props as any);
+class TestHost extends SetupHost {}
+
+function makeContext(initial: EditableChartStoreProps): { context: PlaygroundDataV2; dispose: () => void } {
+    const props = observable.box<EditableChartStoreProps>(initial, { deep: false });
+    const host = new TestHost();
+    const store = new EditableChartStore(host, { get: () => props.get() });
+    const dispose = host.setup();
     return {
-        type: "editor.data.v2",
-        store,
-        plotData: [],
-        configOptions: {},
-        layoutOptions: {}
+        context: {
+            type: "editor.data.v2",
+            store,
+            plotData: initial.data,
+            layoutOptions: {},
+            configOptions: {}
+        },
+        dispose
     };
 }
 
 describe("useV2EditorController", () => {
     it("does not clobber the user's in-progress edit with the store's reformatted echo", () => {
-        const data = setupData();
-        const { result } = renderHook(() => useV2EditorController(data));
+        const { context, dispose } = makeContext({ layout: { a: 1 }, config: {}, data: [] });
+        const { result } = renderHook(() => useV2EditorController(context));
 
         act(() => {
             // Compact, single-line input — the store round-trips this through
@@ -34,5 +39,43 @@ describe("useV2EditorController", () => {
         // The value shown to the user must remain exactly what they typed,
         // not get replaced by the store's reformatted echo of that same edit.
         expect(result.current.value).toBe('{"a":1,"b":2}');
+
+        dispose();
+    });
+
+    it("keeps onViewSelectChange identity stable across re-renders", () => {
+        const { context, dispose } = makeContext({ layout: { a: 1 }, config: {}, data: [] });
+
+        const { result, rerender } = renderHook(() => useV2EditorController(context));
+        const first = result.current.onViewSelectChange;
+
+        rerender();
+
+        expect(result.current.onViewSelectChange).toBe(first);
+
+        dispose();
+    });
+
+    it("tracks the selected view without desyncing value and editor code", () => {
+        const { context, dispose } = makeContext({
+            layout: { a: 1 },
+            config: { b: 2 },
+            data: [{ name: "t0", x: [1] }]
+        });
+
+        const { result } = renderHook(() => useV2EditorController(context));
+
+        expect(result.current.viewSelectValue).toBe("layout");
+        expect(JSON.parse(result.current.value)).toEqual({ a: 1 });
+
+        act(() => result.current.onViewSelectChange("config"));
+        expect(result.current.viewSelectValue).toBe("config");
+        expect(JSON.parse(result.current.value)).toEqual({ b: 2 });
+
+        act(() => result.current.onViewSelectChange("0"));
+        expect(result.current.viewSelectValue).toBe("0");
+        expect(JSON.parse(result.current.value)).toEqual({ name: "t0", x: [1] });
+
+        dispose();
     });
 });

packages/pluggableWidgets/chart-playground-web/src/helpers/useComposedEditorController.ts

@@ -35,14 +35,14 @@ function getModelerCode(data: PlaygroundDataV1, key: ConfigKey): Partial<Data> |
 export function useComposedEditorController(data: PlaygroundDataV1): ComposedEditorProps {
     const [key, setKey] = useState<ConfigKey>("layout");
 
-    const onViewSelectChange = (value: string): void => {
+    const onViewSelectChange = useCallback((value: string): void => {
         if (value === "layout" || value === "config") {
             setKey(value);
         } else {
             const n = parseInt(value, 10);
             setKey(isNaN(n) ? "layout" : n);
         }
-    };
+    }, []);
 
     const options: SelectOption[] = useMemo(() => {
         return [

packages/pluggableWidgets/chart-playground-web/src/helpers/useV2EditorController.ts

@@ -34,17 +34,20 @@ export function useV2EditorController(context: PlaygroundDataV2): ComposedEditor
     const [key, setKey] = useState<ConfigKey>("layout");
     const keyBox = useState(() => observable.box<ConfigKey>(key))[0];
 
-    const onViewSelectChange = (value: string): void => {
-        let newKey: ConfigKey;
-        if (value === "layout" || value === "config") {
-            newKey = value;
-        } else {
-            const n = parseInt(value, 10);
-            newKey = isNaN(n) ? "layout" : n;
-        }
-        setKey(newKey);
-        runInAction(() => keyBox.set(newKey));
-    };
+    const onViewSelectChange = useCallback(
+        (value: string): void => {
+            let newKey: ConfigKey;
+            if (value === "layout" || value === "config") {
+                newKey = value;
+            } else {
+                const n = parseInt(value, 10);
+                newKey = isNaN(n) ? "layout" : n;
+            }
+            setKey(newKey);
+            runInAction(() => keyBox.set(newKey));
+        },
+        [keyBox]
+    );
 
     const store = context.store;