chore: applied feedback from merge request
Removed all the DOM manipulations and created a utils file so npx eslint is happy. Also changed the tests to test the new version of the code. ref: N25B-189
This commit is contained in:
Pim Hutting
@@ -1,153 +1,15 @@
|
||||
import { mockReactFlow } from '../../../../setupFlowTests.ts';
|
||||
import { act, render, screen, fireEvent } from '@testing-library/react';
|
||||
// SaveLoadPanel.all.test.tsx
|
||||
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||||
import useFlowStore from '../../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx';
|
||||
import { addNode } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx';
|
||||
import { makeProjectBlob } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/components/SaveLoadPanel.tsx';
|
||||
import SaveLoadPanel from '../../../../../src/pages/VisProgPage/visualProgrammingUI/components/SaveLoadPanel.tsx';
|
||||
import { makeProjectBlob } from '../../../../../src/utils/SaveLoad.ts';
|
||||
import { mockReactFlow } from "../../../../setupFlowTests.ts"; // optional helper if present
|
||||
|
||||
beforeAll(() => {
|
||||
mockReactFlow();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
const { setNodes, setEdges } = useFlowStore.getState();
|
||||
act(() => {
|
||||
setNodes([]);
|
||||
setEdges([]);
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.restoreAllMocks();
|
||||
});
|
||||
|
||||
describe('Load and save panel', () => {
|
||||
test('save and load functions work correctly', async () => {
|
||||
// create two nodes via your sidebar API
|
||||
act(() => {
|
||||
addNode('phase', { x: 100, y: 100 });
|
||||
addNode('norm', { x: 200, y: 200 });
|
||||
});
|
||||
|
||||
const initialState = useFlowStore.getState();
|
||||
expect(initialState.nodes.length).toBe(2);
|
||||
|
||||
// make blob from current nodes/edges
|
||||
const blob = makeProjectBlob('test-project', initialState.nodes, initialState.edges);
|
||||
|
||||
// simulate loading from that blob
|
||||
const parsed = JSON.parse(await blobToText(blob));
|
||||
|
||||
act(() => {
|
||||
const { setNodes, setEdges } = useFlowStore.getState();
|
||||
setEdges([]); // clear edges first (mirrors app behavior)
|
||||
setNodes(parsed.nodes);
|
||||
setEdges(parsed.edges);
|
||||
});
|
||||
|
||||
const loadedState = useFlowStore.getState();
|
||||
expect(loadedState.nodes.length).toBe(2);
|
||||
expect(loadedState.nodes).toEqual(initialState.nodes);
|
||||
expect(loadedState.edges).toEqual(initialState.edges);
|
||||
});
|
||||
|
||||
test('Save uses showSaveFilePicker and writes JSON', async () => {
|
||||
// Seed a simple graph so Save has something to write
|
||||
act(() => {
|
||||
useFlowStore.getState().setNodes([
|
||||
{ id: 'start', type: 'start', position: { x: 0, y: 0 }, data: { label: 'start' } } as any,
|
||||
{ id: 'phase-1', type: 'phase', position: { x: 100, y: 120 }, data: { label: 'P1', number: 1 } } as any,
|
||||
{ id: 'end', type: 'end', position: { x: 0, y: 300 }, data: { label: 'End' } } as any,
|
||||
]);
|
||||
useFlowStore.getState().setEdges([
|
||||
{ id: 'start-phase-1', source: 'start', target: 'phase-1' } as any,
|
||||
]);
|
||||
});
|
||||
|
||||
// capture what the app writes; don't decode inside the spy
|
||||
let writtenChunk: any = null;
|
||||
const write = jest.fn(async (chunk: any) => { writtenChunk = chunk; });
|
||||
const close = jest.fn().mockResolvedValue(undefined);
|
||||
const createWritable = jest.fn().mockResolvedValue({ write, close });
|
||||
|
||||
// Mock the picker
|
||||
(window as any).showSaveFilePicker = jest.fn().mockResolvedValue({ createWritable });
|
||||
|
||||
render(<SaveLoadPanel />);
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(screen.getByText(/Save Graph/i));
|
||||
});
|
||||
// @ts-expect-error
|
||||
expect(window.showSaveFilePicker).toHaveBeenCalledTimes(1);
|
||||
expect(createWritable).toHaveBeenCalledTimes(1);
|
||||
expect(write).toHaveBeenCalledTimes(1);
|
||||
expect(close).toHaveBeenCalledTimes(1);
|
||||
|
||||
const writtenText = await chunkToString(writtenChunk);
|
||||
const json = JSON.parse(writtenText);
|
||||
expect(json.version).toBe(1);
|
||||
expect(json.name).toBeDefined();
|
||||
expect(Array.isArray(json.nodes)).toBe(true);
|
||||
expect(Array.isArray(json.edges)).toBe(true);
|
||||
expect(json.behaviorProgram).toBeUndefined();
|
||||
});
|
||||
|
||||
test('Save falls back to anchor download when picker unavailable', async () => {
|
||||
// Remove picker so we hit the fallback
|
||||
delete (window as any).showSaveFilePicker;
|
||||
|
||||
// Keep a reference to the REAL createElement to avoid recursion
|
||||
const realCreateElement = document.createElement.bind(document);
|
||||
|
||||
// Spy on URL + anchor click
|
||||
const origCreateObjectURL = URL.createObjectURL;
|
||||
const origRevokeObjectURL = URL.revokeObjectURL;
|
||||
(URL as any).createObjectURL = jest.fn(() => 'blob:fake-url');
|
||||
(URL as any).revokeObjectURL = jest.fn();
|
||||
|
||||
const clickSpy = jest.fn();
|
||||
const createElementSpy = jest
|
||||
.spyOn(document, 'createElement')
|
||||
.mockImplementation((tag: any, opts?: any) => {
|
||||
if (tag === 'a') {
|
||||
// return a minimal anchor with a click spy
|
||||
return {
|
||||
set href(_v: string) {},
|
||||
set download(_v: string) {},
|
||||
click: clickSpy,
|
||||
} as unknown as HTMLAnchorElement;
|
||||
}
|
||||
// call the REAL createElement for everything else
|
||||
return realCreateElement(tag, opts as any);
|
||||
});
|
||||
|
||||
render(<SaveLoadPanel />);
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(screen.getByText(/Save Graph/i));
|
||||
});
|
||||
|
||||
expect(URL.createObjectURL).toHaveBeenCalledTimes(1);
|
||||
expect(clickSpy).toHaveBeenCalledTimes(1);
|
||||
|
||||
// cleanup
|
||||
createElementSpy.mockRestore();
|
||||
(URL as any).createObjectURL = origCreateObjectURL;
|
||||
(URL as any).revokeObjectURL = origRevokeObjectURL;
|
||||
});
|
||||
});
|
||||
|
||||
//
|
||||
// helpers
|
||||
//
|
||||
|
||||
// portable blob reader (no Response needed)
|
||||
// helper to read Blob contents in tests (works in Node/Jest env)
|
||||
async function blobToText(blob: Blob): Promise<string> {
|
||||
const anyBlob = blob as any;
|
||||
if (typeof anyBlob.text === 'function') return anyBlob.text();
|
||||
if (typeof anyBlob.arrayBuffer === 'function') {
|
||||
const buf = await anyBlob.arrayBuffer();
|
||||
if (typeof (blob as any).text === "function") return await (blob as any).text();
|
||||
if (typeof (blob as any).arrayBuffer === "function") {
|
||||
const buf = await (blob as any).arrayBuffer();
|
||||
return new TextDecoder().decode(buf);
|
||||
}
|
||||
return await new Promise<string>((resolve, reject) => {
|
||||
@@ -158,15 +20,135 @@ async function blobToText(blob: Blob): Promise<string> {
|
||||
});
|
||||
}
|
||||
|
||||
// normalize whatever chunk createWritable.write receives to a string
|
||||
async function chunkToString(chunk: any): Promise<string> {
|
||||
if (typeof chunk === 'string') return chunk;
|
||||
if (chunk instanceof Blob) return blobToText(chunk);
|
||||
if (chunk?.buffer instanceof ArrayBuffer) {
|
||||
return new TextDecoder().decode(chunk as Uint8Array);
|
||||
}
|
||||
if (chunk instanceof ArrayBuffer) {
|
||||
return new TextDecoder().decode(new Uint8Array(chunk));
|
||||
}
|
||||
return String(chunk);
|
||||
}
|
||||
beforeAll(() => {
|
||||
// if you have a mockReactFlow helper used in other tests, call it
|
||||
if (typeof mockReactFlow === "function") mockReactFlow();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
// clear and seed the zustand store to a known empty state
|
||||
act(() => {
|
||||
const { setNodes, setEdges } = useFlowStore.getState();
|
||||
setNodes([]);
|
||||
setEdges([]);
|
||||
});
|
||||
|
||||
// Ensure URL.createObjectURL exists so jest.spyOn works
|
||||
if (!URL.createObjectURL) URL.createObjectURL = jest.fn();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.restoreAllMocks();
|
||||
});
|
||||
|
||||
describe("SaveLoadPanel - combined tests", () => {
|
||||
test("makeProjectBlob creates a valid JSON blob", async () => {
|
||||
const nodes = [
|
||||
{
|
||||
id: "n1",
|
||||
type: "start",
|
||||
position: { x: 0, y: 0 },
|
||||
data: { label: "Start" },
|
||||
} as any,
|
||||
];
|
||||
const edges: any[] = [];
|
||||
|
||||
const blob = makeProjectBlob("my-project", nodes, edges);
|
||||
expect(blob).toBeInstanceOf(Blob);
|
||||
|
||||
const text = await blobToText(blob);
|
||||
const parsed = JSON.parse(text);
|
||||
|
||||
expect(parsed.name).toBe("my-project");
|
||||
expect(typeof parsed.savedAt).toBe("string");
|
||||
expect(Array.isArray(parsed.nodes)).toBe(true);
|
||||
expect(Array.isArray(parsed.edges)).toBe(true);
|
||||
expect(parsed.nodes).toEqual(nodes);
|
||||
expect(parsed.edges).toEqual(edges);
|
||||
});
|
||||
|
||||
test("onSave creates a blob URL and sets anchor href", async () => {
|
||||
// Seed the store so onSave has nodes to save
|
||||
act(() => {
|
||||
useFlowStore.getState().setNodes([
|
||||
{ id: "start", type: "start", position: { x: 0, y: 0 }, data: { label: "start" } } as any,
|
||||
]);
|
||||
useFlowStore.getState().setEdges([]);
|
||||
});
|
||||
|
||||
// Ensure createObjectURL exists and spy it
|
||||
if (!URL.createObjectURL) URL.createObjectURL = jest.fn();
|
||||
const createObjectURLSpy = jest.spyOn(URL, "createObjectURL").mockReturnValue("blob:fake-url");
|
||||
|
||||
render(<SaveLoadPanel />);
|
||||
|
||||
const saveAnchor = screen.getByText(/Save Graph/i) as HTMLAnchorElement;
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(saveAnchor);
|
||||
});
|
||||
|
||||
expect(createObjectURLSpy).toHaveBeenCalledTimes(1);
|
||||
const blobArg = createObjectURLSpy.mock.calls[0][0];
|
||||
expect(blobArg).toBeInstanceOf(Blob);
|
||||
|
||||
expect(saveAnchor.getAttribute("href")).toBe("blob:fake-url");
|
||||
|
||||
const text = await blobToText(blobArg as Blob);
|
||||
const parsed = JSON.parse(text);
|
||||
|
||||
expect(parsed.name).toBeDefined();
|
||||
expect(parsed.nodes).toBeDefined();
|
||||
expect(parsed.edges).toBeDefined();
|
||||
|
||||
createObjectURLSpy.mockRestore();
|
||||
});
|
||||
|
||||
test("onLoad with invalid JSON does not update store", async () => {
|
||||
const file = new File(["not json"], "bad.json", { type: "application/json" });
|
||||
|
||||
render(<SaveLoadPanel />);
|
||||
const input = document.querySelector('input[type="file"]') as HTMLInputElement;
|
||||
expect(input).toBeTruthy();
|
||||
|
||||
// Click Load to install the resolver
|
||||
const loadButton = screen.getByRole("button", { name: /load graph/i });
|
||||
|
||||
// Do click and change inside same act to ensure resolver is set
|
||||
await act(async () => {
|
||||
fireEvent.click(loadButton);
|
||||
fireEvent.change(input, { target: { files: [file] } });
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
const nodesAfter = useFlowStore.getState().nodes;
|
||||
expect(nodesAfter).toHaveLength(0);
|
||||
expect(input.value).toBe("");
|
||||
});
|
||||
});
|
||||
|
||||
test("onLoad resolves to null when no file is chosen (user cancels) and does not update store", async () => {
|
||||
render(<SaveLoadPanel />);
|
||||
const input = document.querySelector('input[type="file"]') as HTMLInputElement;
|
||||
expect(input).toBeTruthy();
|
||||
|
||||
// Click Load to set resolver
|
||||
const loadButton = screen.getByRole("button", { name: /load graph/i });
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(loadButton);
|
||||
// simulate user cancelling: change with empty files
|
||||
fireEvent.change(input, { target: { files: [] } });
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
const nodesAfter = useFlowStore.getState().nodes;
|
||||
const edgesAfter = useFlowStore.getState().edges;
|
||||
expect(nodesAfter).toHaveLength(0);
|
||||
expect(edgesAfter).toHaveLength(0);
|
||||
expect(input.value).toBe("");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user