@startsimpli/ui 0.4.14 → 0.4.15

package/src/components/workflows/__tests__/NodeInspector.test.tsx

@@ -0,0 +1,74 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { NodeInspector } from '../NodeInspector';
+import type { WfNode, NodeTypeDef, NodeExecView } from '../types';
+
+const node: WfNode = {
+  id: 'n1',
+  name: 'Send email',
+  type: 'action.email',
+  parameters: { to: 'a@b.com', retries: 3, urgent: true },
+};
+
+const nodeType: NodeTypeDef & { parameterSchema?: Record<string, unknown> } = {
+  slug: 'action.email',
+  name: 'Send email',
+  category: 'action',
+  parameterSchema: {
+    type: 'object',
+    properties: {
+      to: { type: 'string', title: 'Recipient' },
+      retries: { type: 'number', title: 'Retries' },
+      urgent: { type: 'boolean', title: 'Urgent' },
+    },
+  },
+};
+
+describe('NodeInspector', () => {
+  it('renders a field per schema property with current values', () => {
+    render(<NodeInspector node={node} nodeType={nodeType} />);
+    expect(screen.getByLabelText('Recipient')).toHaveValue('a@b.com');
+    expect(screen.getByLabelText('Retries')).toHaveValue(3);
+    expect(screen.getByLabelText('Urgent')).toBeChecked();
+  });
+
+  it('emits parameter changes via onParametersChange', () => {
+    const onParametersChange = jest.fn();
+    render(
+      <NodeInspector
+        node={node}
+        nodeType={nodeType}
+        onParametersChange={onParametersChange}
+      />
+    );
+    fireEvent.change(screen.getByLabelText('Recipient'), {
+      target: { value: 'c@d.com' },
+    });
+    expect(onParametersChange).toHaveBeenCalledWith(
+      'n1',
+      expect.objectContaining({ to: 'c@d.com' })
+    );
+  });
+
+  it('renders an empty state when no node is selected', () => {
+    render(<NodeInspector node={null} />);
+    expect(screen.getByText(/select a node/i)).toBeInTheDocument();
+  });
+
+  it('shows read-only input/output tabs when given an execution view', async () => {
+    const exec: NodeExecView = {
+      nodeId: 'n1',
+      status: 'success',
+      inputData: { foo: 'in' },
+      outputData: { foo: 'out' },
+    };
+    const user = userEvent.setup();
+    render(<NodeInspector node={node} nodeType={nodeType} execution={exec} />);
+    // the exec tabs exist
+    expect(screen.getByRole('tab', { name: /input/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /output/i })).toBeInTheDocument();
+    // switch to the Output tab
+    await user.click(screen.getByRole('tab', { name: /output/i }));
+    expect(screen.getByText(/"foo": "out"/)).toBeInTheDocument();
+  });
+});

package/src/components/workflows/__tests__/NodePalette.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { NodePalette } from '../NodePalette';
+import type { NodeTypeDef } from '../types';
+
+const nodeTypes: NodeTypeDef[] = [
+  { slug: 'trigger.event', name: 'Event trigger', category: 'trigger' },
+  { slug: 'action.email', name: 'Send email', category: 'action' },
+  { slug: 'action.http', name: 'HTTP request', category: 'action' },
+  { slug: 'condition.if', name: 'If', category: 'condition' },
+];
+
+describe('NodePalette', () => {
+  it('lists all node types grouped by category', () => {
+    render(<NodePalette nodeTypes={nodeTypes} />);
+    expect(screen.getByText('Event trigger')).toBeInTheDocument();
+    expect(screen.getByText('Send email')).toBeInTheDocument();
+    expect(screen.getByText('HTTP request')).toBeInTheDocument();
+    expect(screen.getByText('If')).toBeInTheDocument();
+    // group headings (category labels)
+    expect(screen.getByText('Trigger')).toBeInTheDocument();
+    expect(screen.getByText('Action')).toBeInTheDocument();
+  });
+
+  it('filters node types by search query', () => {
+    render(<NodePalette nodeTypes={nodeTypes} />);
+    const search = screen.getByRole('searchbox');
+    fireEvent.change(search, { target: { value: 'email' } });
+    expect(screen.getByText('Send email')).toBeInTheDocument();
+    expect(screen.queryByText('HTTP request')).not.toBeInTheDocument();
+    expect(screen.queryByText('If')).not.toBeInTheDocument();
+  });
+
+  it('sets the node type slug on dataTransfer when dragging', () => {
+    render(<NodePalette nodeTypes={nodeTypes} />);
+    const item = screen.getByText('Send email').closest('[draggable="true"]');
+    expect(item).not.toBeNull();
+    const setData = jest.fn();
+    fireEvent.dragStart(item as Element, {
+      dataTransfer: { setData, effectAllowed: '' },
+    });
+    expect(setData).toHaveBeenCalledWith(
+      'application/x-workflow-node',
+      'action.email'
+    );
+  });
+});

package/src/components/workflows/__tests__/WorkflowCanvas.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen } from '@testing-library/react';
+import { WorkflowCanvas } from '../WorkflowCanvas';
+import type { WorkflowGraph, WfExecutionView } from '../types';
+
+// xyflow + DualPaneWorkspace consumers rely on browser APIs jsdom omits.
+beforeAll(() => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: (query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      addListener: () => {},
+      removeListener: () => {},
+      dispatchEvent: () => false,
+    }),
+  });
+  // xyflow measures nodes via ResizeObserver.
+  global.ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  } as never;
+});
+
+const graph: WorkflowGraph = {
+  id: 'wf1',
+  name: 'Sample',
+  nodes: [
+    { id: 'a', name: 'Start run', type: 'trigger.event', position: { x: 0, y: 0 } },
+    { id: 'b', name: 'Email user', type: 'action.email', position: { x: 0, y: 120 } },
+  ],
+  edges: [{ source: 'a', target: 'b' }],
+};
+
+describe('WorkflowCanvas', () => {
+  it('renders a node per graph node', () => {
+    render(<WorkflowCanvas graph={graph} />);
+    expect(screen.getByText('Start run')).toBeInTheDocument();
+    expect(screen.getByText('Email user')).toBeInTheDocument();
+  });
+
+  it('applies a status overlay from a WfExecutionView', () => {
+    const execution: WfExecutionView = {
+      executionId: 'e1',
+      status: 'running',
+      nodes: {
+        a: { nodeId: 'a', status: 'success' },
+        b: { nodeId: 'b', status: 'running' },
+      },
+    };
+    render(<WorkflowCanvas graph={graph} execution={execution} />);
+    // node b shows the running badge, node a shows success
+    expect(screen.getByText('Running')).toBeInTheDocument();
+    expect(screen.getByText('Success')).toBeInTheDocument();
+  });
+});

package/src/components/workflows/__tests__/WorkflowNode.test.tsx

@@ -0,0 +1,92 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ReactFlowProvider } from '@xyflow/react';
+import { WorkflowNode } from '../WorkflowNode';
+import type { WfNode } from '../types';
+
+// xyflow handles need a provider + measured store; render inside one.
+function renderNode(props: Parameters<typeof WorkflowNode>[0]) {
+  return render(
+    <ReactFlowProvider>
+      <WorkflowNode {...props} />
+    </ReactFlowProvider>
+  );
+}
+
+function baseData(overrides: Partial<WfNode> = {}) {
+  const node: WfNode = {
+    id: 'n1',
+    name: 'Send email',
+    type: 'action.email',
+    ...overrides,
+  };
+  return {
+    node,
+    category: 'action',
+    status: 'idle' as const,
+  };
+}
+
+describe('WorkflowNode', () => {
+  it('renders the node title', () => {
+    renderNode({ id: 'n1', data: baseData(), selected: false } as never);
+    expect(screen.getByText('Send email')).toBeInTheDocument();
+  });
+
+  it('renders a status badge reflecting the node status', () => {
+    renderNode({
+      id: 'n1',
+      data: { ...baseData(), status: 'running' },
+      selected: false,
+    } as never);
+    expect(screen.getByText('Running')).toBeInTheDocument();
+  });
+
+  it('renders the category label from the theme', () => {
+    renderNode({ id: 'n1', data: baseData(), selected: false } as never);
+    // action category resolves to label "Action"
+    expect(screen.getByText('Action')).toBeInTheDocument();
+  });
+
+  it('renders one output handle per output (multi-output: if/else)', () => {
+    const { container } = renderNode({
+      id: 'n1',
+      data: {
+        ...baseData({ type: 'condition.if' }),
+        category: 'condition',
+        outputLabels: ['true', 'false'],
+        outputCount: 2,
+      },
+      selected: false,
+    } as never);
+    const outputs = container.querySelectorAll('[data-handle-kind="output"]');
+    expect(outputs).toHaveLength(2);
+    expect(screen.getByText('true')).toBeInTheDocument();
+    expect(screen.getByText('false')).toBeInTheDocument();
+  });
+
+  it('applies disabled styling when disabled', () => {
+    const { container } = renderNode({
+      id: 'n1',
+      data: { ...baseData({ disabled: true }) },
+      selected: false,
+    } as never);
+    expect(
+      container.querySelector('[data-disabled="true"]')
+    ).toBeInTheDocument();
+  });
+
+  it('invokes onRename when the title is edited', () => {
+    const onRename = jest.fn();
+    renderNode({
+      id: 'n1',
+      data: { ...baseData(), onRename },
+      selected: true,
+    } as never);
+    // double-click the title to enter edit mode
+    fireEvent.doubleClick(screen.getByText('Send email'));
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, { target: { value: 'Send welcome email' } });
+    fireEvent.blur(input);
+    expect(onRename).toHaveBeenCalledWith('n1', 'Send welcome email');
+  });
+});

package/src/components/workflows/__tests__/WorkflowRunViewer.test.tsx

@@ -0,0 +1,138 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { WorkflowRunViewer } from '../WorkflowRunViewer';
+import { ExecNodeDetails } from '../ExecNodeDetails';
+import type { WfExecutionView, NodeExecView } from '../types';
+
+// jsdom lacks matchMedia, which DualPaneWorkspace uses for its `auto` layout.
+beforeAll(() => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: (query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      addListener: () => {},
+      removeListener: () => {},
+      dispatchEvent: () => false,
+    }),
+  });
+});
+
+function makeExecution(overrides: Partial<WfExecutionView> = {}): WfExecutionView {
+  const nodeA: NodeExecView = {
+    nodeId: 'a',
+    name: 'Fetch data',
+    type: 'trigger.event',
+    status: 'success',
+    executionOrder: 0,
+    executionTimeMs: 1000,
+    inputData: { foo: 'in' },
+    outputData: { foo: 'out' },
+  };
+  const nodeB: NodeExecView = {
+    nodeId: 'b',
+    name: 'Transform',
+    type: 'transform.set',
+    status: 'running',
+    executionOrder: 1,
+  };
+  return {
+    executionId: 'exec-1',
+    status: 'running',
+    nodes: { a: nodeA, b: nodeB },
+    ...overrides,
+  };
+}
+
+describe('WorkflowRunViewer', () => {
+  it('renders the run status header badge', () => {
+    render(<WorkflowRunViewer execution={makeExecution({ status: 'completed' })} />);
+    expect(screen.getByText('Completed')).toBeInTheDocument();
+  });
+
+  it('renders the timeline with a row per node, ordered by executionOrder', () => {
+    render(<WorkflowRunViewer execution={makeExecution()} />);
+    const rows = screen.getAllByRole('listitem');
+    expect(rows).toHaveLength(2);
+    expect(rows[0]).toHaveTextContent('Fetch data');
+    expect(rows[1]).toHaveTextContent('Transform');
+  });
+
+  it('shows selected-node details when a timeline row is selected', () => {
+    render(<WorkflowRunViewer execution={makeExecution()} />);
+    fireEvent.click(screen.getByText('Fetch data'));
+    // detail panel shows the selected node name as a heading + pretty JSON
+    expect(
+      screen.getByRole('heading', { name: 'Fetch data' })
+    ).toBeInTheDocument();
+    expect(screen.getByText(/"foo": "out"/)).toBeInTheDocument();
+  });
+
+  it('updates the selected-node details when a new snapshot is passed', () => {
+    const { rerender } = render(<WorkflowRunViewer execution={makeExecution()} />);
+    fireEvent.click(screen.getByText('Transform'));
+    // node b selected; detail panel headed by its name
+    expect(
+      screen.getByRole('heading', { name: 'Transform' })
+    ).toBeInTheDocument();
+
+    const next = makeExecution({ status: 'completed' });
+    next.nodes.b = {
+      ...next.nodes.b,
+      status: 'success',
+      executionTimeMs: 250,
+      outputData: { done: true },
+    };
+    rerender(<WorkflowRunViewer execution={next} />);
+    // detail panel reflects the new snapshot for the still-selected node b
+    expect(screen.getByText(/"done": true/)).toBeInTheDocument();
+  });
+
+  it('renders an empty state when there are no node executions', () => {
+    render(
+      <WorkflowRunViewer
+        execution={{ executionId: 'x', status: 'pending', nodes: {} }}
+      />
+    );
+    expect(screen.queryAllByRole('listitem')).toHaveLength(0);
+    expect(screen.getByText('Pending')).toBeInTheDocument();
+  });
+});
+
+describe('ExecNodeDetails', () => {
+  const node: NodeExecView = {
+    nodeId: 'a',
+    name: 'Fetch data',
+    type: 'trigger.event',
+    status: 'error',
+    executionOrder: 0,
+    error: 'boom',
+    inputData: { a: 1 },
+    outputData: { b: 2 },
+  };
+
+  it('renders node name, type and status', () => {
+    render(<ExecNodeDetails node={node} />);
+    expect(screen.getByText('Fetch data')).toBeInTheDocument();
+    expect(screen.getByText('trigger.event')).toBeInTheDocument();
+    expect(screen.getByText('Error')).toBeInTheDocument();
+  });
+
+  it('pretty-prints input and output JSON', () => {
+    render(<ExecNodeDetails node={node} />);
+    expect(screen.getByText(/"a": 1/)).toBeInTheDocument();
+    expect(screen.getByText(/"b": 2/)).toBeInTheDocument();
+  });
+
+  it('renders error message when present', () => {
+    render(<ExecNodeDetails node={node} />);
+    expect(screen.getByText('boom')).toBeInTheDocument();
+  });
+
+  it('renders an empty state when no node is selected', () => {
+    render(<ExecNodeDetails node={null} />);
+    expect(screen.getByText(/select a node/i)).toBeInTheDocument();
+  });
+});

package/src/components/workflows/__tests__/auto-layout.test.ts

@@ -0,0 +1,107 @@
+import { autoLayout } from '../layout/auto-layout';
+import { graphToFlow } from '../serialization';
+import type { WorkflowGraph } from '../types';
+
+function noOverlap(
+  nodes: { id: string; position: { x: number; y: number }; width?: number; height?: number }[]
+): boolean {
+  for (let i = 0; i < nodes.length; i++) {
+    for (let j = i + 1; j < nodes.length; j++) {
+      const a = nodes[i];
+      const b = nodes[j];
+      const aw = a.width ?? 180;
+      const ah = a.height ?? 60;
+      const bw = b.width ?? 180;
+      const bh = b.height ?? 60;
+      const overlapX = a.position.x < b.position.x + bw && a.position.x + aw > b.position.x;
+      const overlapY = a.position.y < b.position.y + bh && a.position.y + ah > b.position.y;
+      if (overlapX && overlapY) return false;
+    }
+  }
+  return true;
+}
+
+const chainGraph: WorkflowGraph = {
+  nodes: [
+    { id: 'a', name: 'A', type: 't' },
+    { id: 'b', name: 'B', type: 't' },
+    { id: 'c', name: 'C', type: 't' },
+  ],
+  edges: [
+    { source: 'a', target: 'b' },
+    { source: 'b', target: 'c' },
+  ],
+};
+
+describe('auto-layout', () => {
+  it('assigns non-overlapping positions (LR)', () => {
+    const { nodes, edges } = graphToFlow(chainGraph);
+    const laid = autoLayout(nodes, edges, { direction: 'LR' });
+    expect(laid.nodes).toHaveLength(3);
+    expect(noOverlap(laid.nodes)).toBe(true);
+  });
+
+  it('LR lays out left-to-right (x increases along the chain)', () => {
+    const { nodes, edges } = graphToFlow(chainGraph);
+    const laid = autoLayout(nodes, edges, { direction: 'LR' });
+    const byId = Object.fromEntries(laid.nodes.map((n) => [n.id, n]));
+    expect(byId.b.position.x).toBeGreaterThan(byId.a.position.x);
+    expect(byId.c.position.x).toBeGreaterThan(byId.b.position.x);
+  });
+
+  it('TB lays out top-to-bottom (y increases along the chain)', () => {
+    const { nodes, edges } = graphToFlow(chainGraph);
+    const laid = autoLayout(nodes, edges, { direction: 'TB' });
+    const byId = Object.fromEntries(laid.nodes.map((n) => [n.id, n]));
+    expect(byId.b.position.y).toBeGreaterThan(byId.a.position.y);
+    expect(byId.c.position.y).toBeGreaterThan(byId.b.position.y);
+  });
+
+  it('preserves explicit positions when preservePositions is set', () => {
+    const graph: WorkflowGraph = {
+      nodes: [
+        { id: 'a', name: 'A', type: 't', position: { x: 500, y: 500 } },
+        { id: 'b', name: 'B', type: 't' },
+      ],
+      edges: [{ source: 'a', target: 'b' }],
+    };
+    const { nodes, edges } = graphToFlow(graph);
+    const laid = autoLayout(nodes, edges, { direction: 'LR', preservePositions: true });
+    const byId = Object.fromEntries(laid.nodes.map((n) => [n.id, n]));
+    expect(byId.a.position).toEqual({ x: 500, y: 500 });
+    // b still gets a computed position
+    expect(byId.b.position).toBeDefined();
+  });
+
+  it('places an edgeless / orphan node (still gets a position, no overlap)', () => {
+    const graph: WorkflowGraph = {
+      nodes: [
+        { id: 'a', name: 'A', type: 't' },
+        { id: 'b', name: 'B', type: 't' },
+        { id: 'orphan', name: 'O', type: 't' },
+      ],
+      edges: [{ source: 'a', target: 'b' }],
+    };
+    const { nodes, edges } = graphToFlow(graph);
+    const laid = autoLayout(nodes, edges, { direction: 'LR' });
+    const orphan = laid.nodes.find((n) => n.id === 'orphan');
+    expect(orphan).toBeDefined();
+    expect(orphan!.position).toBeDefined();
+    expect(Number.isFinite(orphan!.position.x)).toBe(true);
+    expect(Number.isFinite(orphan!.position.y)).toBe(true);
+    expect(noOverlap(laid.nodes)).toBe(true);
+  });
+
+  it('handles an empty node set', () => {
+    const laid = autoLayout([], [], { direction: 'TB' });
+    expect(laid.nodes).toEqual([]);
+    expect(laid.edges).toEqual([]);
+  });
+
+  it('defaults to TB when no direction is given', () => {
+    const { nodes, edges } = graphToFlow(chainGraph);
+    const laid = autoLayout(nodes, edges);
+    const byId = Object.fromEntries(laid.nodes.map((n) => [n.id, n]));
+    expect(byId.c.position.y).toBeGreaterThan(byId.a.position.y);
+  });
+});