@rangka/client 0.0.1

package/src/widgets/__tests__/tracker-validator-edge-cases.test.ts

@@ -0,0 +1,242 @@
+import { describe, test, expect } from 'vitest';
+import { buildDependencyMap } from '../reactivity/tracker.js';
+import { validateWidgetTree } from '../validation/validator.js';
+import type { WidgetNode, WidgetDefinitionMeta } from '@rangka/shared';
+
+describe('Dependency Tracker Edge Cases', () => {
+  test('empty widget array produces empty maps', () => {
+    const map = buildDependencyMap([]);
+    expect(map.fields.size).toBe(0);
+    expect(map.state.size).toBe(0);
+  });
+
+  test('widget with no bind, no visible, no props has no deps', () => {
+    const nodes: WidgetNode[] = [{ id: 'w1', type: 'divider' }];
+    const map = buildDependencyMap(nodes);
+    expect(map.fields.size).toBe(0);
+    expect(map.state.size).toBe(0);
+  });
+
+  test('non-expression string props are not tracked', () => {
+    const nodes: WidgetNode[] = [
+      { id: 'w1', type: 'button', props: { label: 'Click me', variant: 'primary' } },
+    ];
+    const map = buildDependencyMap(nodes);
+    expect(map.fields.size).toBe(0);
+    expect(map.state.size).toBe(0);
+  });
+
+  test('deeply nested children are tracked', () => {
+    const nodes: WidgetNode[] = [
+      {
+        id: 'l1',
+        type: 'group',
+        children: [
+          {
+            id: 'l2',
+            type: 'group',
+            children: [
+              {
+                id: 'deep',
+                type: 'input',
+                bind: { field: 'deep_field' },
+              },
+            ],
+          },
+        ],
+      },
+    ];
+    const map = buildDependencyMap(nodes);
+    expect(map.fields.get('deep_field')).toEqual(new Set(['deep']));
+  });
+
+  test('same widget multiple deps from different sources', () => {
+    const nodes: WidgetNode[] = [
+      {
+        id: 'w1',
+        type: 'text',
+        bind: { expression: '{{qty * rate}}' },
+        visible: { field: '$state.showTotal', operator: 'eq', value: true },
+        props: { style: '{{if($state.bold, "bold", "body")}}' },
+      },
+    ];
+    const map = buildDependencyMap(nodes);
+    expect(map.fields.get('qty')).toContain('w1');
+    expect(map.fields.get('rate')).toContain('w1');
+    expect(map.state.get('showTotal')).toContain('w1');
+    expect(map.state.get('bold')).toContain('w1');
+  });
+
+  test('expression with function call tracks arguments', () => {
+    const nodes: WidgetNode[] = [
+      {
+        id: 'w1',
+        type: 'text',
+        bind: { expression: '{{format_currency(total, currency)}}' },
+      },
+    ];
+    const map = buildDependencyMap(nodes);
+    expect(map.fields.get('total')).toEqual(new Set(['w1']));
+    expect(map.fields.get('currency')).toEqual(new Set(['w1']));
+  });
+
+  test('condition value with expression adds deps', () => {
+    const nodes: WidgetNode[] = [
+      {
+        id: 'w1',
+        type: 'section',
+        visible: { field: 'total', operator: 'gt', value: '{{$state.threshold}}' },
+      },
+    ];
+    const map = buildDependencyMap(nodes);
+    expect(map.fields.get('total')).toContain('w1');
+    expect(map.state.get('threshold')).toContain('w1');
+  });
+
+  test('malformed expression in props does not crash', () => {
+    const nodes: WidgetNode[] = [
+      {
+        id: 'w1',
+        type: 'text',
+        props: { label: '{{@invalid syntax}}' },
+      },
+    ];
+    const map = buildDependencyMap(nodes);
+    expect(map.fields.size).toBe(0);
+  });
+});
+
+describe('Validator Edge Cases', () => {
+  const registry = new Map<string, WidgetDefinitionMeta>([
+    [
+      'input',
+      {
+        name: 'input',
+        label: 'Input',
+        category: 'input',
+        schema: { label: { type: 'string' } },
+        binding: 'field',
+        triggers: ['change'],
+        container: false,
+      },
+    ],
+    [
+      'group',
+      {
+        name: 'group',
+        label: 'Group',
+        category: 'layout',
+        schema: { direction: { type: 'enum', options: ['row', 'column'] } },
+        binding: 'none',
+        triggers: [],
+        container: true,
+      },
+    ],
+    [
+      'table',
+      {
+        name: 'table',
+        label: 'Table',
+        category: 'layout',
+        schema: {},
+        binding: 'model',
+        triggers: ['rowClick'],
+        container: true,
+        accepts: ['column'],
+      },
+    ],
+    [
+      'column',
+      {
+        name: 'column',
+        label: 'Column',
+        category: 'layout',
+        schema: { label: { type: 'string', required: true } },
+        binding: 'none',
+        triggers: [],
+        container: true,
+      },
+    ],
+  ]);
+
+  test('empty tree produces no errors', () => {
+    expect(validateWidgetTree([], registry)).toEqual([]);
+  });
+
+  test('multiple errors reported for same widget', () => {
+    const nodes: WidgetNode[] = [
+      {
+        type: 'input',
+        bind: { model: { name: 'test' } },
+        on: { invalid: { type: 'refreshSource' } },
+        children: [{ type: 'input' }],
+      },
+    ];
+    const errors = validateWidgetTree(nodes, registry);
+    expect(errors.length).toBeGreaterThanOrEqual(3);
+  });
+
+  test('deeply nested error has full path', () => {
+    const nodes: WidgetNode[] = [
+      {
+        type: 'group',
+        children: [
+          {
+            type: 'group',
+            children: [
+              {
+                type: 'group',
+                children: [{ type: 'nonexistent' }],
+              },
+            ],
+          },
+        ],
+      },
+    ];
+    const errors = validateWidgetTree(nodes, registry);
+    expect(errors[0].path).toBe('[0].children[0].children[0].children[0]');
+  });
+
+  test('container with empty children is valid', () => {
+    const nodes: WidgetNode[] = [{ type: 'group', children: [] }];
+    expect(validateWidgetTree(nodes, registry)).toEqual([]);
+  });
+
+  test('container without children field is valid', () => {
+    const nodes: WidgetNode[] = [{ type: 'group' }];
+    expect(validateWidgetTree(nodes, registry)).toEqual([]);
+  });
+
+  test('table accepts column children', () => {
+    const nodes: WidgetNode[] = [
+      {
+        type: 'table',
+        bind: { model: { name: 'test' } },
+        children: [
+          { type: 'column', props: { label: 'Name' } },
+          { type: 'column', props: { label: 'Email' } },
+        ],
+      },
+    ];
+    expect(validateWidgetTree(nodes, registry)).toEqual([]);
+  });
+
+  test('table rejects multiple invalid children', () => {
+    const nodes: WidgetNode[] = [
+      {
+        type: 'table',
+        bind: { model: { name: 'test' } },
+        children: [{ type: 'input', bind: { field: 'x' } }, { type: 'group' }],
+      },
+    ];
+    const errors = validateWidgetTree(nodes, registry);
+    expect(errors).toHaveLength(2);
+    expect(errors[0].path).toContain('children[0]');
+    expect(errors[1].path).toContain('children[1]');
+  });
+
+  test('prop with boolean default not required', () => {
+    const nodes: WidgetNode[] = [{ type: 'group', props: {} }];
+    expect(validateWidgetTree(nodes, registry)).toEqual([]);
+  });
+});

package/src/widgets/__tests__/tracker.test.ts

@@ -0,0 +1,133 @@
+import { describe, test, expect } from 'vitest';
+import { buildDependencyMap, getAffectedWidgets } from '../reactivity/tracker.js';
+import type { WidgetNode } from '@rangka/shared';
+
+describe('Dependency Tracker', () => {
+  test('tracks field binding dependency', () => {
+    const nodes: WidgetNode[] = [{ id: 'w1', type: 'input', bind: { field: 'name' } }];
+    const map = buildDependencyMap(nodes);
+    expect(map.fields.get('name')).toEqual(new Set(['w1']));
+  });
+
+  test('tracks expression binding dependencies', () => {
+    const nodes: WidgetNode[] = [
+      { id: 'w1', type: 'text', bind: { expression: '{{qty * rate}}' } },
+    ];
+    const map = buildDependencyMap(nodes);
+    expect(map.fields.get('qty')).toEqual(new Set(['w1']));
+    expect(map.fields.get('rate')).toEqual(new Set(['w1']));
+  });
+
+  test('tracks $state dependency in expression', () => {
+    const nodes: WidgetNode[] = [
+      { id: 'w1', type: 'text', bind: { expression: '{{$state.step}}' } },
+    ];
+    const map = buildDependencyMap(nodes);
+    expect(map.state.get('step')).toEqual(new Set(['w1']));
+  });
+
+  test('tracks visible condition field dependency', () => {
+    const nodes: WidgetNode[] = [
+      { id: 'w1', type: 'section', visible: { field: 'status', operator: 'eq', value: 'draft' } },
+    ];
+    const map = buildDependencyMap(nodes);
+    expect(map.fields.get('status')).toEqual(new Set(['w1']));
+  });
+
+  test('tracks $state dependency in visible condition', () => {
+    const nodes: WidgetNode[] = [
+      { id: 'w1', type: 'section', visible: { field: '$state.step', operator: 'eq', value: 2 } },
+    ];
+    const map = buildDependencyMap(nodes);
+    expect(map.state.get('step')).toEqual(new Set(['w1']));
+  });
+
+  test('tracks multiple visible conditions', () => {
+    const nodes: WidgetNode[] = [
+      {
+        id: 'w1',
+        type: 'section',
+        visible: [
+          { field: 'status', operator: 'eq', value: 'draft' },
+          { field: '$state.editing', operator: 'eq', value: true },
+        ],
+      },
+    ];
+    const map = buildDependencyMap(nodes);
+    expect(map.fields.get('status')).toEqual(new Set(['w1']));
+    expect(map.state.get('editing')).toEqual(new Set(['w1']));
+  });
+
+  test('tracks props expression dependencies', () => {
+    const nodes: WidgetNode[] = [
+      {
+        id: 'w1',
+        type: 'button',
+        props: {
+          disabled: '{{$state.loading}}',
+          label: '{{if($state.step == 3, "Submit", "Next")}}',
+        },
+      },
+    ];
+    const map = buildDependencyMap(nodes);
+    expect(map.state.get('loading')).toEqual(new Set(['w1']));
+    expect(map.state.get('step')).toEqual(new Set(['w1']));
+  });
+
+  test('tracks children recursively', () => {
+    const nodes: WidgetNode[] = [
+      {
+        id: 'parent',
+        type: 'group',
+        children: [
+          { id: 'child1', type: 'input', bind: { field: 'name' } },
+          { id: 'child2', type: 'text', bind: { expression: '{{total}}' } },
+        ],
+      },
+    ];
+    const map = buildDependencyMap(nodes);
+    expect(map.fields.get('name')).toEqual(new Set(['child1']));
+    expect(map.fields.get('total')).toEqual(new Set(['child2']));
+  });
+
+  test('multiple widgets depending on same field', () => {
+    const nodes: WidgetNode[] = [
+      { id: 'w1', type: 'input', bind: { field: 'qty' } },
+      { id: 'w2', type: 'text', bind: { expression: '{{qty * rate}}' } },
+    ];
+    const map = buildDependencyMap(nodes);
+    expect(map.fields.get('qty')).toEqual(new Set(['w1', 'w2']));
+  });
+
+  test('getAffectedWidgets returns correct set for field', () => {
+    const nodes: WidgetNode[] = [
+      { id: 'w1', type: 'input', bind: { field: 'qty' } },
+      { id: 'w2', type: 'text', bind: { expression: '{{qty * rate}}' } },
+      { id: 'w3', type: 'text', bind: { field: 'name' } },
+    ];
+    const map = buildDependencyMap(nodes);
+    expect(getAffectedWidgets(map, 'qty', false)).toEqual(new Set(['w1', 'w2']));
+    expect(getAffectedWidgets(map, 'name', false)).toEqual(new Set(['w3']));
+  });
+
+  test('getAffectedWidgets returns correct set for state key', () => {
+    const nodes: WidgetNode[] = [
+      { id: 'w1', type: 'button', props: { disabled: '{{$state.loading}}' } },
+      { id: 'w2', type: 'section', visible: { field: '$state.step', operator: 'eq', value: 2 } },
+    ];
+    const map = buildDependencyMap(nodes);
+    expect(getAffectedWidgets(map, 'loading', true)).toEqual(new Set(['w1']));
+    expect(getAffectedWidgets(map, 'step', true)).toEqual(new Set(['w2']));
+  });
+
+  test('getAffectedWidgets returns empty set for unknown key', () => {
+    const map = buildDependencyMap([]);
+    expect(getAffectedWidgets(map, 'unknown', false)).toEqual(new Set());
+  });
+
+  test('generates path-based id when node has no id', () => {
+    const nodes: WidgetNode[] = [{ type: 'input', bind: { field: 'name' } }];
+    const map = buildDependencyMap(nodes);
+    expect(map.fields.get('name')).toEqual(new Set(['[0]']));
+  });
+});

package/src/widgets/__tests__/tree-widget.test.tsx

@@ -0,0 +1,97 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import React from 'react';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { TreeWidget } from '../components/TreeWidget.js';
+
+const defaultProps = {
+  props: {},
+  bind: {
+    value: null,
+    meta: {
+      type: 'tree',
+      label: 'Parent',
+      required: false,
+      readOnly: false,
+      options: [
+        { label: 'Root', value: 'cat-1', path: 'Root' },
+        { label: 'Electronics', value: 'cat-2', path: 'Root / Electronics' },
+        { label: 'Phones', value: 'cat-3', path: 'Root / Electronics / Phones' },
+      ],
+    },
+  },
+  on: {},
+  context: { record: {}, model: '', mode: 'view' as const },
+};
+
+afterEach(() => cleanup());
+
+describe('TreeWidget', () => {
+  it('renders a combobox button', () => {
+    render(<TreeWidget {...defaultProps} />);
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+  });
+
+  it('displays label', () => {
+    render(<TreeWidget {...defaultProps} />);
+    expect(screen.getByText('Parent')).toBeInTheDocument();
+  });
+
+  it('shows placeholder when no value', () => {
+    render(<TreeWidget {...defaultProps} />);
+    expect(screen.getByText('Select parent...')).toBeInTheDocument();
+  });
+
+  it('shows selected option path', () => {
+    render(<TreeWidget {...defaultProps} bind={{ ...defaultProps.bind, value: 'cat-3' }} />);
+    expect(screen.getByText('Root / Electronics / Phones')).toBeInTheDocument();
+  });
+
+  it('handles disabled state', () => {
+    render(<TreeWidget {...defaultProps} props={{ disabled: true }} />);
+    expect(screen.getByRole('combobox')).toBeDisabled();
+  });
+
+  it.skip('fires on.change when selecting', async () => {
+    const onChange = vi.fn();
+    render(<TreeWidget {...defaultProps} on={{ change: onChange }} />);
+    await userEvent.click(screen.getByRole('combobox'));
+    await userEvent.click(screen.getByText('Root / Electronics'));
+    expect(onChange).toHaveBeenCalledWith('cat-2');
+  });
+
+  it.skip('fires on.search when typing', async () => {
+    const onSearch = vi.fn();
+    render(<TreeWidget {...defaultProps} on={{ search: onSearch }} />);
+    await userEvent.click(screen.getByRole('combobox'));
+    fireEvent.change(screen.getByPlaceholderText('Search...'), { target: { value: 'phone' } });
+    expect(onSearch).toHaveBeenCalledWith('phone');
+  });
+
+  it('handles null bind.value gracefully', () => {
+    render(<TreeWidget {...defaultProps} />);
+    expect(screen.getByText('Select parent...')).toBeInTheDocument();
+  });
+
+  it.skip('shows clear option when value selected', async () => {
+    render(<TreeWidget {...defaultProps} bind={{ ...defaultProps.bind, value: 'cat-1' }} />);
+    await userEvent.click(screen.getByRole('combobox'));
+    expect(screen.getByText('Clear selection')).toBeInTheDocument();
+  });
+
+  it.skip('clears value when clear option clicked', async () => {
+    const onChange = vi.fn();
+    const setValue = vi.fn();
+    render(
+      <TreeWidget
+        {...defaultProps}
+        bind={{ ...defaultProps.bind, value: 'cat-1', setValue }}
+        on={{ change: onChange }}
+      />,
+    );
+    await userEvent.click(screen.getByRole('combobox'));
+    await userEvent.click(screen.getByText('Clear selection'));
+    expect(setValue).toHaveBeenCalledWith(null);
+    expect(onChange).toHaveBeenCalledWith(null);
+  });
+});

package/src/widgets/__tests__/use-model-source.test.ts

@@ -0,0 +1,67 @@
+import { describe, it, expect } from 'vitest';
+import { filtersToParams, sortToString } from '../data/useModelQuery.js';
+import type { ParsedFilter, SortEntry } from '../reactivity/variables.js';
+
+describe('useModelSource helpers', () => {
+  describe('filtersToParams', () => {
+    it('converts eq filter to simple key', () => {
+      const filters: ParsedFilter[] = [
+        { model: 'sales.order', field: 'status', operator: 'eq', value: 'draft' },
+      ];
+      expect(filtersToParams(filters)).toEqual({ 'filter[status]': 'draft' });
+    });
+
+    it('converts operator filter to nested key', () => {
+      const filters: ParsedFilter[] = [
+        { model: 'sales.order', field: 'total', operator: 'gt', value: 1000 },
+      ];
+      expect(filtersToParams(filters)).toEqual({ 'filter[total][gt]': '1000' });
+    });
+
+    it('converts multiple filters', () => {
+      const filters: ParsedFilter[] = [
+        { model: 'sales.order', field: 'status', operator: 'eq', value: 'paid' },
+        { model: 'sales.order', field: 'total', operator: 'gte', value: 500 },
+        { model: 'sales.order', field: 'name', operator: 'like', value: 'acme' },
+      ];
+      const result = filtersToParams(filters);
+      expect(result).toEqual({
+        'filter[status]': 'paid',
+        'filter[total][gte]': '500',
+        'filter[name][like]': 'acme',
+      });
+    });
+
+    it('returns empty object for empty filters', () => {
+      expect(filtersToParams([])).toEqual({});
+    });
+  });
+
+  describe('sortToString', () => {
+    it('converts single asc sort', () => {
+      const sort: SortEntry[] = [{ field: 'name', direction: 'asc' }];
+      expect(sortToString(sort)).toBe('name');
+    });
+
+    it('converts single desc sort', () => {
+      const sort: SortEntry[] = [{ field: 'date', direction: 'desc' }];
+      expect(sortToString(sort)).toBe('-date');
+    });
+
+    it('converts multi-field sort', () => {
+      const sort: SortEntry[] = [
+        { field: 'date', direction: 'desc' },
+        { field: 'name', direction: 'asc' },
+      ];
+      expect(sortToString(sort)).toBe('-date,name');
+    });
+
+    it('returns undefined for null sort', () => {
+      expect(sortToString(null)).toBeUndefined();
+    });
+
+    it('returns undefined for empty array', () => {
+      expect(sortToString([])).toBeUndefined();
+    });
+  });
+});