@rangka/client 0.0.1

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

@@ -0,0 +1,158 @@
+import { describe, it, expect, vi } from 'vitest';
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { CheckboxWidget } from '../components/CheckboxWidget.js';
+
+describe('CheckboxWidget', () => {
+  it('renders label text from props', () => {
+    render(
+      <CheckboxWidget
+        props={{ label: 'Accept terms' }}
+        bind={{ value: false }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      />,
+    );
+
+    expect(screen.getByText('Accept terms')).toBeInTheDocument();
+  });
+
+  it('renders label from bind.meta.label as fallback', () => {
+    render(
+      <CheckboxWidget
+        props={{}}
+        bind={{
+          value: false,
+          meta: { type: 'boolean', label: 'Meta Label', required: false, readOnly: false },
+        }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      />,
+    );
+
+    expect(screen.getByText('Meta Label')).toBeInTheDocument();
+  });
+
+  it('does not render label when label is empty', () => {
+    const { container } = render(
+      <CheckboxWidget
+        props={{ label: '' }}
+        bind={{ value: false }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      />,
+    );
+
+    expect(container.querySelector('span')).toBeNull();
+  });
+
+  it('renders checked state when bind.value is true', () => {
+    render(
+      <CheckboxWidget
+        props={{}}
+        bind={{ value: true }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      />,
+    );
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toHaveAttribute('aria-checked', 'true');
+  });
+
+  it('renders unchecked state when bind.value is false', () => {
+    render(
+      <CheckboxWidget
+        props={{}}
+        bind={{ value: false }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      />,
+    );
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('defaults to unchecked when bind.value is undefined', () => {
+    render(
+      <CheckboxWidget
+        props={{}}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      />,
+    );
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('disables checkbox when props.disabled is true', () => {
+    render(
+      <CheckboxWidget
+        props={{ disabled: true }}
+        bind={{ value: false }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      />,
+    );
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toBeDisabled();
+    expect(checkbox).toHaveAttribute('data-disabled', '');
+  });
+
+  it('disables checkbox from bind.meta.readOnly as fallback', () => {
+    render(
+      <CheckboxWidget
+        props={{}}
+        bind={{
+          value: false,
+          meta: { type: 'boolean', label: 'Read Only', required: false, readOnly: true },
+        }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      />,
+    );
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toBeDisabled();
+    expect(checkbox).toHaveAttribute('data-disabled', '');
+  });
+
+  it('calls bind.setValue and on.change when clicked', () => {
+    const setValue = vi.fn();
+    const onChange = vi.fn();
+
+    render(
+      <CheckboxWidget
+        props={{}}
+        bind={{ value: false, setValue }}
+        on={{ change: onChange }}
+        context={{ record: {}, model: '', mode: 'edit' }}
+      />,
+    );
+
+    const checkbox = screen.getByRole('checkbox');
+    fireEvent.click(checkbox);
+
+    expect(setValue).toHaveBeenCalledWith(true);
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it('has correct widgetMeta', () => {
+    expect(CheckboxWidget.widgetMeta).toEqual({
+      name: 'checkbox',
+      label: 'Checkbox',
+      category: 'input',
+      schema: {
+        label: { type: 'string' },
+        disabled: { type: 'boolean', default: false },
+      },
+      binding: 'field',
+      triggers: ['change'],
+      container: false,
+    });
+  });
+});

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

@@ -0,0 +1,64 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import React from 'react';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { CodeWidget } from '../components/CodeWidget.js';
+
+const defaultProps = {
+  props: {},
+  bind: { value: '' },
+  on: {},
+  context: { record: {}, model: '', mode: 'view' as const },
+};
+
+afterEach(() => cleanup());
+
+describe('CodeWidget', () => {
+  it('renders a textarea', () => {
+    const { container } = render(<CodeWidget {...defaultProps} />);
+    expect(container.querySelector('textarea')).toBeInTheDocument();
+  });
+
+  it('has monospace font', () => {
+    const { container } = render(<CodeWidget {...defaultProps} />);
+    expect(container.querySelector('textarea')?.className).toContain('font-mono');
+  });
+
+  it('displays label from props', () => {
+    render(<CodeWidget {...defaultProps} props={{ label: 'Expression' }} />);
+    expect(screen.getByText('Expression')).toBeInTheDocument();
+  });
+
+  it('renders current value', () => {
+    const { container } = render(
+      <CodeWidget {...defaultProps} bind={{ value: 'return x + 1;' }} />,
+    );
+    expect(container.querySelector('textarea')?.value).toBe('return x + 1;');
+  });
+
+  it('fires on.change when typing', () => {
+    const onChange = vi.fn();
+    const { container } = render(<CodeWidget {...defaultProps} on={{ change: onChange }} />);
+    fireEvent.change(container.querySelector('textarea')!, { target: { value: 'new code' } });
+    expect(onChange).toHaveBeenCalledWith('new code');
+  });
+
+  it('sets rows from props', () => {
+    const { container } = render(<CodeWidget {...defaultProps} props={{ rows: 10 }} />);
+    expect(container.querySelector('textarea')?.rows).toBe(10);
+  });
+
+  it('handles disabled state', () => {
+    const { container } = render(<CodeWidget {...defaultProps} props={{ disabled: true }} />);
+    expect(container.querySelector('textarea')?.disabled).toBe(true);
+  });
+
+  it('handles null bind.value gracefully', () => {
+    const { container } = render(<CodeWidget {...defaultProps} bind={{ value: null }} />);
+    expect(container.querySelector('textarea')?.value).toBe('');
+  });
+
+  it('has spellCheck disabled', () => {
+    const { container } = render(<CodeWidget {...defaultProps} />);
+    expect(container.querySelector('textarea')?.getAttribute('spellcheck')).toBe('false');
+  });
+});

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

@@ -0,0 +1,62 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import React from 'react';
+import { render, screen, cleanup } from '@testing-library/react';
+import { ComputedWidget } from '../components/ComputedWidget.js';
+
+const defaultProps = {
+  props: {},
+  bind: { value: null },
+  on: {},
+  context: { record: {}, model: '', mode: 'view' as const },
+};
+
+afterEach(() => cleanup());
+
+describe('ComputedWidget', () => {
+  it('renders dash for null value', () => {
+    render(<ComputedWidget {...defaultProps} />);
+    expect(screen.getByTestId('computed-value').textContent).toBe('—');
+  });
+
+  it('renders string value', () => {
+    render(<ComputedWidget {...defaultProps} bind={{ value: 'hello' }} />);
+    expect(screen.getByTestId('computed-value').textContent).toBe('hello');
+  });
+
+  it('renders number with locale formatting', () => {
+    render(
+      <ComputedWidget {...defaultProps} props={{ format: 'number' }} bind={{ value: 1234567 }} />,
+    );
+    expect(screen.getByTestId('computed-value').textContent).toContain('1,234,567');
+  });
+
+  it('renders currency with 2 decimals', () => {
+    render(
+      <ComputedWidget {...defaultProps} props={{ format: 'currency' }} bind={{ value: 99.5 }} />,
+    );
+    expect(screen.getByTestId('computed-value').textContent).toBe('99.50');
+  });
+
+  it('displays label from props', () => {
+    render(<ComputedWidget {...defaultProps} props={{ label: 'Total' }} />);
+    expect(screen.getByText('Total')).toBeInTheDocument();
+  });
+
+  it('falls back to bind.meta.label', () => {
+    render(
+      <ComputedWidget
+        {...defaultProps}
+        bind={{
+          value: 0,
+          meta: { type: 'computed', label: 'Outstanding', required: false, readOnly: true },
+        }}
+      />,
+    );
+    expect(screen.getByText('Outstanding')).toBeInTheDocument();
+  });
+
+  it('handles undefined value gracefully', () => {
+    render(<ComputedWidget {...defaultProps} bind={{ value: undefined }} />);
+    expect(screen.getByTestId('computed-value').textContent).toBe('—');
+  });
+});

package/src/widgets/__tests__/condition-edge-cases.test.ts

@@ -0,0 +1,120 @@
+import { describe, test, expect } from 'vitest';
+import { evaluateCondition, evaluateConditions } from '../condition/evaluator.js';
+
+describe('Condition Edge Cases', () => {
+  test('eq with null value matches null field', () => {
+    expect(evaluateCondition({ field: 'x', operator: 'eq', value: null }, { x: null })).toBe(true);
+  });
+
+  test('eq with undefined field matches null (loose)', () => {
+    expect(evaluateCondition({ field: 'x', operator: 'eq', value: null }, {})).toBe(true);
+  });
+
+  test('neq null vs undefined is false (loose equality)', () => {
+    expect(evaluateCondition({ field: 'x', operator: 'neq', value: null }, {})).toBe(false);
+  });
+
+  test('gt with string numbers coerces', () => {
+    expect(evaluateCondition({ field: 'x', operator: 'gt', value: '5' }, { x: '10' })).toBe(true);
+  });
+
+  test('lt with null field (NaN comparison)', () => {
+    expect(evaluateCondition({ field: 'x', operator: 'lt', value: 5 }, { x: null })).toBe(true);
+  });
+
+  test('in with empty array always false', () => {
+    expect(evaluateCondition({ field: 'x', operator: 'in', value: [] }, { x: 'anything' })).toBe(
+      false,
+    );
+  });
+
+  test('notIn with empty array always true', () => {
+    expect(evaluateCondition({ field: 'x', operator: 'notIn', value: [] }, { x: 'anything' })).toBe(
+      true,
+    );
+  });
+
+  test('empty with 0 is not empty', () => {
+    expect(evaluateCondition({ field: 'x', operator: 'empty' }, { x: 0 })).toBe(false);
+  });
+
+  test('empty with false is not empty', () => {
+    expect(evaluateCondition({ field: 'x', operator: 'empty' }, { x: false })).toBe(false);
+  });
+
+  test('notEmpty with 0 is true', () => {
+    expect(evaluateCondition({ field: 'x', operator: 'notEmpty' }, { x: 0 })).toBe(true);
+  });
+
+  test('deeply nested field resolution', () => {
+    expect(
+      evaluateCondition(
+        { field: '$state.wizard.currentStep', operator: 'eq', value: 3 },
+        { $state: { wizard: { currentStep: 3 } } },
+      ),
+    ).toBe(true);
+  });
+
+  test('multiple conditions with all passing', () => {
+    expect(
+      evaluateConditions(
+        [
+          { field: 'a', operator: 'gt', value: 0 },
+          { field: 'b', operator: 'notEmpty' },
+          { field: 'c', operator: 'in', value: ['x', 'y'] },
+        ],
+        { a: 5, b: 'hello', c: 'x' },
+      ),
+    ).toBe(true);
+  });
+
+  test('multiple conditions short-circuits on first false', () => {
+    expect(
+      evaluateConditions(
+        [
+          { field: 'a', operator: 'eq', value: 'wrong' },
+          { field: 'b', operator: 'notEmpty' },
+        ],
+        { a: 'right', b: 'hello' },
+      ),
+    ).toBe(false);
+  });
+
+  test('gte with equal values', () => {
+    expect(evaluateCondition({ field: 'x', operator: 'gte', value: 10 }, { x: 10 })).toBe(true);
+  });
+
+  test('lte with equal values', () => {
+    expect(evaluateCondition({ field: 'x', operator: 'lte', value: 10 }, { x: 10 })).toBe(true);
+  });
+
+  test('in operator with numeric values', () => {
+    expect(evaluateCondition({ field: 'x', operator: 'in', value: [1, 2, 3] }, { x: 2 })).toBe(
+      true,
+    );
+  });
+
+  test('notIn operator with numeric values', () => {
+    expect(evaluateCondition({ field: 'x', operator: 'notIn', value: [1, 2, 3] }, { x: 5 })).toBe(
+      true,
+    );
+  });
+
+  test('expression value resolves against context', () => {
+    expect(
+      evaluateCondition(
+        { field: 'total', operator: 'gte', value: '{{min_total}}' },
+        { total: 100, min_total: 50 },
+      ),
+    ).toBe(true);
+  });
+
+  test('expression value with function call', () => {
+    expect(
+      evaluateCondition(
+        { field: 'count', operator: 'gt', value: '{{count(items)}}' },
+        { count: 5, items: [1, 2, 3] },
+      ),
+    ).toBe(true);
+  });
+});

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

@@ -0,0 +1,221 @@
+import { describe, test, expect } from 'vitest';
+import { evaluateCondition, evaluateConditions } from '../condition/evaluator.js';
+
+describe('Condition Evaluator', () => {
+  describe('eq operator', () => {
+    test('matches equal values', () => {
+      expect(
+        evaluateCondition({ field: 'status', operator: 'eq', value: 'draft' }, { status: 'draft' }),
+      ).toBe(true);
+    });
+
+    test('fails on unequal values', () => {
+      expect(
+        evaluateCondition(
+          { field: 'status', operator: 'eq', value: 'draft' },
+          { status: 'submitted' },
+        ),
+      ).toBe(false);
+    });
+
+    test('loose equality (number vs string)', () => {
+      expect(evaluateCondition({ field: 'count', operator: 'eq', value: '5' }, { count: 5 })).toBe(
+        true,
+      );
+    });
+  });
+
+  describe('neq operator', () => {
+    test('passes when not equal', () => {
+      expect(
+        evaluateCondition(
+          { field: 'status', operator: 'neq', value: 'draft' },
+          { status: 'submitted' },
+        ),
+      ).toBe(true);
+    });
+
+    test('fails when equal', () => {
+      expect(
+        evaluateCondition(
+          { field: 'status', operator: 'neq', value: 'draft' },
+          { status: 'draft' },
+        ),
+      ).toBe(false);
+    });
+  });
+
+  describe('in operator', () => {
+    test('passes when value in array', () => {
+      expect(
+        evaluateCondition(
+          { field: 'status', operator: 'in', value: ['draft', 'pending'] },
+          { status: 'draft' },
+        ),
+      ).toBe(true);
+    });
+
+    test('fails when value not in array', () => {
+      expect(
+        evaluateCondition(
+          { field: 'status', operator: 'in', value: ['draft', 'pending'] },
+          { status: 'submitted' },
+        ),
+      ).toBe(false);
+    });
+  });
+
+  describe('notIn operator', () => {
+    test('passes when value not in array', () => {
+      expect(
+        evaluateCondition(
+          { field: 'status', operator: 'notIn', value: ['draft', 'pending'] },
+          { status: 'submitted' },
+        ),
+      ).toBe(true);
+    });
+
+    test('fails when value in array', () => {
+      expect(
+        evaluateCondition(
+          { field: 'status', operator: 'notIn', value: ['draft', 'pending'] },
+          { status: 'draft' },
+        ),
+      ).toBe(false);
+    });
+  });
+
+  describe('empty operator', () => {
+    test('passes for null', () => {
+      expect(evaluateCondition({ field: 'name', operator: 'empty' }, { name: null })).toBe(true);
+    });
+
+    test('passes for undefined', () => {
+      expect(evaluateCondition({ field: 'name', operator: 'empty' }, {})).toBe(true);
+    });
+
+    test('passes for empty string', () => {
+      expect(evaluateCondition({ field: 'name', operator: 'empty' }, { name: '' })).toBe(true);
+    });
+
+    test('fails for non-empty value', () => {
+      expect(evaluateCondition({ field: 'name', operator: 'empty' }, { name: 'test' })).toBe(false);
+    });
+  });
+
+  describe('notEmpty operator', () => {
+    test('passes for non-empty value', () => {
+      expect(evaluateCondition({ field: 'name', operator: 'notEmpty' }, { name: 'test' })).toBe(
+        true,
+      );
+    });
+
+    test('fails for null', () => {
+      expect(evaluateCondition({ field: 'name', operator: 'notEmpty' }, { name: null })).toBe(
+        false,
+      );
+    });
+
+    test('fails for empty string', () => {
+      expect(evaluateCondition({ field: 'name', operator: 'notEmpty' }, { name: '' })).toBe(false);
+    });
+  });
+
+  describe('gt/lt/gte/lte operators', () => {
+    test('gt passes', () => {
+      expect(
+        evaluateCondition({ field: 'total', operator: 'gt', value: 100 }, { total: 150 }),
+      ).toBe(true);
+    });
+
+    test('gt fails', () => {
+      expect(evaluateCondition({ field: 'total', operator: 'gt', value: 100 }, { total: 50 })).toBe(
+        false,
+      );
+    });
+
+    test('lt passes', () => {
+      expect(evaluateCondition({ field: 'total', operator: 'lt', value: 100 }, { total: 50 })).toBe(
+        true,
+      );
+    });
+
+    test('gte passes on equal', () => {
+      expect(
+        evaluateCondition({ field: 'total', operator: 'gte', value: 100 }, { total: 100 }),
+      ).toBe(true);
+    });
+
+    test('lte passes on equal', () => {
+      expect(
+        evaluateCondition({ field: 'total', operator: 'lte', value: 100 }, { total: 100 }),
+      ).toBe(true);
+    });
+  });
+
+  describe('scope references', () => {
+    test('resolves $state field', () => {
+      expect(
+        evaluateCondition(
+          { field: '$state.step', operator: 'eq', value: 2 },
+          { $state: { step: 2 } },
+        ),
+      ).toBe(true);
+    });
+
+    test('resolves $parent field', () => {
+      expect(
+        evaluateCondition(
+          { field: '$parent.status', operator: 'eq', value: 'active' },
+          { $parent: { status: 'active' } },
+        ),
+      ).toBe(true);
+    });
+  });
+
+  describe('expression values', () => {
+    test('resolves expression in value field', () => {
+      expect(
+        evaluateCondition(
+          { field: 'total', operator: 'gt', value: '{{$state.threshold}}' },
+          { total: 150, $state: { threshold: 100 } },
+        ),
+      ).toBe(true);
+    });
+  });
+
+  describe('evaluateConditions (AND logic)', () => {
+    test('all conditions pass', () => {
+      expect(
+        evaluateConditions(
+          [
+            { field: 'status', operator: 'eq', value: 'draft' },
+            { field: 'total', operator: 'gt', value: 0 },
+          ],
+          { status: 'draft', total: 100 },
+        ),
+      ).toBe(true);
+    });
+
+    test('one condition fails', () => {
+      expect(
+        evaluateConditions(
+          [
+            { field: 'status', operator: 'eq', value: 'draft' },
+            { field: 'total', operator: 'gt', value: 0 },
+          ],
+          { status: 'draft', total: 0 },
+        ),
+      ).toBe(false);
+    });
+
+    test('single condition (not array)', () => {
+      expect(
+        evaluateConditions(
+          { field: 'status', operator: 'eq', value: 'draft' },
+          { status: 'draft' },
+        ),
+      ).toBe(true);
+    });
+  });
+});