@rangka/client 0.0.1

package/src/widgets/__tests__/hooks.test.tsx

@@ -0,0 +1,249 @@
+import React from 'react';
+import { describe, test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { WidgetContextProvider, useWidgetContext } from '../hooks/useWidgetContext.js';
+import { PageStateProvider } from '../hooks/usePageState.js';
+import { StateStore } from '../state/store.js';
+import { createRootContext } from '../context/builder.js';
+import { useBind } from '../hooks/useBind.js';
+import { useExpression } from '../hooks/useExpression.js';
+import { useCondition } from '../hooks/useCondition.js';
+import { usePageState } from '../hooks/usePageState.js';
+import type { WidgetContext } from '../context/types.js';
+
+function TestWrapper({ ctx, children }: { ctx: WidgetContext; children: React.ReactNode }) {
+  const state = new StateStore();
+  return (
+    <PageStateProvider value={state}>
+      <WidgetContextProvider value={ctx}>{children}</WidgetContextProvider>
+    </PageStateProvider>
+  );
+}
+
+describe('useBind hook', () => {
+  test('returns null for undefined bind', () => {
+    function TestComp() {
+      const result = useBind(undefined);
+      return <div data-testid="result">{String(result)}</div>;
+    }
+    const ctx = createRootContext({}, 'test', 'view');
+    render(
+      <TestWrapper ctx={ctx}>
+        <TestComp />
+      </TestWrapper>,
+    );
+    expect(screen.getByTestId('result')).toHaveTextContent('null');
+  });
+
+  test('returns field value from context', () => {
+    function TestComp() {
+      const result = useBind({ field: 'name' });
+      return <div data-testid="result">{String(result?.value)}</div>;
+    }
+    const ctx = createRootContext({ name: 'Test' }, 'test', 'view');
+    render(
+      <TestWrapper ctx={ctx}>
+        <TestComp />
+      </TestWrapper>,
+    );
+    expect(screen.getByTestId('result')).toHaveTextContent('Test');
+  });
+
+  test('evaluates expression binding', () => {
+    function TestComp() {
+      const result = useBind({ expression: '{{a + b}}' });
+      return <div data-testid="result">{String(result?.value)}</div>;
+    }
+    const ctx = createRootContext({ a: 3, b: 7 }, 'test', 'view');
+    render(
+      <TestWrapper ctx={ctx}>
+        <TestComp />
+      </TestWrapper>,
+    );
+    expect(screen.getByTestId('result')).toHaveTextContent('10');
+  });
+});
+
+describe('useExpression hook', () => {
+  test('returns undefined for no expression', () => {
+    function TestComp() {
+      const result = useExpression(undefined);
+      return <div data-testid="result">{String(result)}</div>;
+    }
+    const ctx = createRootContext({}, 'test', 'view');
+    render(
+      <TestWrapper ctx={ctx}>
+        <TestComp />
+      </TestWrapper>,
+    );
+    expect(screen.getByTestId('result')).toHaveTextContent('undefined');
+  });
+
+  test('evaluates expression against context', () => {
+    function TestComp() {
+      const result = useExpression('{{qty * rate}}');
+      return <div data-testid="result">{String(result)}</div>;
+    }
+    const ctx = createRootContext({ qty: 4, rate: 25 }, 'test', 'view');
+    render(
+      <TestWrapper ctx={ctx}>
+        <TestComp />
+      </TestWrapper>,
+    );
+    expect(screen.getByTestId('result')).toHaveTextContent('100');
+  });
+
+  test('handles function calls in expressions', () => {
+    function TestComp() {
+      const result = useExpression('{{upper("hello")}}');
+      return <div data-testid="result">{String(result)}</div>;
+    }
+    const ctx = createRootContext({}, 'test', 'view');
+    render(
+      <TestWrapper ctx={ctx}>
+        <TestComp />
+      </TestWrapper>,
+    );
+    expect(screen.getByTestId('result')).toHaveTextContent('HELLO');
+  });
+});
+
+describe('useCondition hook', () => {
+  test('returns true when no conditions', () => {
+    function TestComp() {
+      const result = useCondition(undefined);
+      return <div data-testid="result">{String(result)}</div>;
+    }
+    const ctx = createRootContext({}, 'test', 'view');
+    render(
+      <TestWrapper ctx={ctx}>
+        <TestComp />
+      </TestWrapper>,
+    );
+    expect(screen.getByTestId('result')).toHaveTextContent('true');
+  });
+
+  test('evaluates single condition', () => {
+    function TestComp() {
+      const result = useCondition({ field: 'status', operator: 'eq', value: 'draft' });
+      return <div data-testid="result">{String(result)}</div>;
+    }
+    const ctx = createRootContext({ status: 'draft' }, 'test', 'view');
+    render(
+      <TestWrapper ctx={ctx}>
+        <TestComp />
+      </TestWrapper>,
+    );
+    expect(screen.getByTestId('result')).toHaveTextContent('true');
+  });
+
+  test('evaluates failing condition', () => {
+    function TestComp() {
+      const result = useCondition({ field: 'status', operator: 'eq', value: 'draft' });
+      return <div data-testid="result">{String(result)}</div>;
+    }
+    const ctx = createRootContext({ status: 'submitted' }, 'test', 'view');
+    render(
+      <TestWrapper ctx={ctx}>
+        <TestComp />
+      </TestWrapper>,
+    );
+    expect(screen.getByTestId('result')).toHaveTextContent('false');
+  });
+
+  test('evaluates multiple AND conditions', () => {
+    function TestComp() {
+      const result = useCondition([
+        { field: 'a', operator: 'gt', value: 0 },
+        { field: 'b', operator: 'notEmpty' },
+      ]);
+      return <div data-testid="result">{String(result)}</div>;
+    }
+    const ctx = createRootContext({ a: 5, b: 'yes' }, 'test', 'view');
+    render(
+      <TestWrapper ctx={ctx}>
+        <TestComp />
+      </TestWrapper>,
+    );
+    expect(screen.getByTestId('result')).toHaveTextContent('true');
+  });
+});
+
+describe('usePageState hook', () => {
+  test('throws outside provider', () => {
+    function TestComp() {
+      usePageState();
+      return null;
+    }
+    expect(() => render(<TestComp />)).toThrow(
+      'usePageState must be used within a PageStateProvider',
+    );
+  });
+
+  test('returns the state store', () => {
+    const store = new StateStore();
+    store.set('test', 42);
+    function TestComp() {
+      const state = usePageState();
+      return <div data-testid="result">{String(state.get('test'))}</div>;
+    }
+    render(
+      <PageStateProvider value={store}>
+        <TestComp />
+      </PageStateProvider>,
+    );
+    expect(screen.getByTestId('result')).toHaveTextContent('42');
+  });
+});
+
+describe('Hook Edge Cases', () => {
+  test('useBind with missing field returns undefined value', () => {
+    function TestComp() {
+      const result = useBind({ field: 'nonexistent' });
+      return <div data-testid="result">{result?.value === undefined ? 'undef' : 'has'}</div>;
+    }
+    const ctx = createRootContext({}, 'test', 'view');
+    render(
+      <TestWrapper ctx={ctx}>
+        <TestComp />
+      </TestWrapper>,
+    );
+    expect(screen.getByTestId('result')).toHaveTextContent('undef');
+  });
+
+  test('useExpression with complex nested expression', () => {
+    function TestComp() {
+      const result = useExpression('{{if(qty > 0, qty * rate, 0)}}');
+      return <div data-testid="result">{String(result)}</div>;
+    }
+    const ctx = createRootContext({ qty: 3, rate: 10 }, 'test', 'view');
+    render(
+      <TestWrapper ctx={ctx}>
+        <TestComp />
+      </TestWrapper>,
+    );
+    expect(screen.getByTestId('result')).toHaveTextContent('30');
+  });
+
+  test('useExpression returns 0 when qty is 0', () => {
+    function TestComp() {
+      const result = useExpression('{{if(qty > 0, qty * rate, 0)}}');
+      return <div data-testid="result">{String(result)}</div>;
+    }
+    const ctx = createRootContext({ qty: 0, rate: 10 }, 'test', 'view');
+    render(
+      <TestWrapper ctx={ctx}>
+        <TestComp />
+      </TestWrapper>,
+    );
+    expect(screen.getByTestId('result')).toHaveTextContent('0');
+  });
+
+  test('useWidgetContext throws outside provider', () => {
+    function TestComp() {
+      const ctx = useWidgetContext();
+      return <div>{ctx.model}</div>;
+    }
+    expect(() => render(<TestComp />)).toThrow();
+  });
+});

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

@@ -0,0 +1,129 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import React from 'react';
+import { render, fireEvent, cleanup } from '@testing-library/react';
+import { IconWidget } from '../components/IconWidget.js';
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('IconWidget', () => {
+  it('renders default circle icon when no name provided', () => {
+    const { container } = render(
+      <IconWidget
+        props={{}}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      />,
+    );
+
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+  });
+
+  it('passes custom icon name to Icon component', () => {
+    const { container } = render(
+      <IconWidget
+        props={{ name: 'arrow-right' }}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      />,
+    );
+
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+  });
+
+  it('renders with default size of 14', () => {
+    const { container } = render(
+      <IconWidget
+        props={{}}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      />,
+    );
+
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('width', '14');
+    expect(svg).toHaveAttribute('height', '14');
+  });
+
+  it('passes custom size prop through to SVG', () => {
+    const { container } = render(
+      <IconWidget
+        props={{ size: 24 }}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      />,
+    );
+
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('width', '24');
+    expect(svg).toHaveAttribute('height', '24');
+  });
+
+  it('passes color prop through to SVG', () => {
+    const { container } = render(
+      <IconWidget
+        props={{ color: 'red' }}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      />,
+    );
+
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('stroke', 'red');
+  });
+
+  it('fires on.click when clicked', () => {
+    const handleClick = vi.fn();
+
+    const { container } = render(
+      <IconWidget
+        props={{ name: 'circle' }}
+        bind={{ value: undefined }}
+        on={{ click: handleClick }}
+        context={{ record: {}, model: '', mode: 'view' }}
+      />,
+    );
+
+    const span = container.firstElementChild as HTMLElement;
+    fireEvent.click(span);
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('adds cursor-pointer class when on.click exists', () => {
+    const handleClick = vi.fn();
+
+    const { container } = render(
+      <IconWidget
+        props={{ name: 'circle' }}
+        bind={{ value: undefined }}
+        on={{ click: handleClick }}
+        context={{ record: {}, model: '', mode: 'view' }}
+      />,
+    );
+
+    const span = container.firstElementChild as HTMLElement;
+    expect(span.className).toContain('cursor-pointer');
+  });
+
+  it('does not add cursor-pointer class when on.click is not provided', () => {
+    const { container } = render(
+      <IconWidget
+        props={{ name: 'circle' }}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      />,
+    );
+
+    const span = container.firstElementChild as HTMLElement;
+    expect(span.className).not.toContain('cursor-pointer');
+  });
+});

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

@@ -0,0 +1,264 @@
+import { describe, it, expect, vi } from 'vitest';
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { InputWidget } from '../components/InputWidget.js';
+
+describe('InputWidget', () => {
+  const defaultProps = {
+    props: {},
+    bind: { value: undefined },
+    on: {},
+    context: { record: {}, model: '', mode: 'view' as const },
+  };
+
+  describe('label rendering', () => {
+    it('renders label from props', () => {
+      render(<InputWidget {...defaultProps} props={{ label: 'Email Address' }} />);
+      expect(screen.getByText('Email Address')).toBeDefined();
+    });
+
+    it('renders label from bind.meta.label as fallback', () => {
+      render(
+        <InputWidget
+          {...defaultProps}
+          bind={{
+            value: '',
+            meta: { type: 'string', label: 'Username', required: false, readOnly: false },
+          }}
+        />,
+      );
+      expect(screen.getByText('Username')).toBeDefined();
+    });
+
+    it('prefers props.label over bind.meta.label', () => {
+      render(
+        <InputWidget
+          {...defaultProps}
+          props={{ label: 'Override Label' }}
+          bind={{
+            value: '',
+            meta: { type: 'string', label: 'Meta Label', required: false, readOnly: false },
+          }}
+        />,
+      );
+      expect(screen.getByText('Override Label')).toBeDefined();
+      expect(screen.queryByText('Meta Label')).toBeNull();
+    });
+
+    it('does not render label element when no label provided', () => {
+      const { container } = render(<InputWidget {...defaultProps} />);
+      expect(container.querySelector('label')).toBeNull();
+    });
+  });
+
+  describe('input type mapping', () => {
+    it('maps int field type to number input', () => {
+      const { container } = render(
+        <InputWidget
+          {...defaultProps}
+          bind={{
+            value: '',
+            meta: { type: 'int', label: 'Qty', required: false, readOnly: false },
+          }}
+        />,
+      );
+      expect(container.querySelector('input')?.type).toBe('number');
+    });
+
+    it('maps decimal field type to number input', () => {
+      const { container } = render(
+        <InputWidget
+          {...defaultProps}
+          bind={{
+            value: '',
+            meta: { type: 'decimal', label: 'Price', required: false, readOnly: false },
+          }}
+        />,
+      );
+      expect(container.querySelector('input')?.type).toBe('number');
+    });
+
+    it('maps money field type to number input', () => {
+      const { container } = render(
+        <InputWidget
+          {...defaultProps}
+          bind={{
+            value: '',
+            meta: { type: 'money', label: 'Amount', required: false, readOnly: false },
+          }}
+        />,
+      );
+      expect(container.querySelector('input')?.type).toBe('number');
+    });
+
+    it('maps date field type to date input', () => {
+      const { container } = render(
+        <InputWidget
+          {...defaultProps}
+          bind={{
+            value: '',
+            meta: { type: 'date', label: 'Date', required: false, readOnly: false },
+          }}
+        />,
+      );
+      expect(container.querySelector('input')?.type).toBe('date');
+    });
+
+    it('defaults to text input for string field type', () => {
+      const { container } = render(
+        <InputWidget
+          {...defaultProps}
+          bind={{
+            value: '',
+            meta: { type: 'string', label: 'Name', required: false, readOnly: false },
+          }}
+        />,
+      );
+      expect(container.querySelector('input')?.type).toBe('text');
+    });
+
+    it('defaults to text input when no meta type provided', () => {
+      const { container } = render(<InputWidget {...defaultProps} bind={{ value: '' }} />);
+      expect(container.querySelector('input')?.type).toBe('text');
+    });
+  });
+
+  describe('props passthrough', () => {
+    it('sets placeholder from props', () => {
+      const { container } = render(
+        <InputWidget {...defaultProps} props={{ placeholder: 'Enter value...' }} />,
+      );
+      expect(container.querySelector('input')?.placeholder).toBe('Enter value...');
+    });
+
+    it('sets readOnly from props', () => {
+      const { container } = render(<InputWidget {...defaultProps} props={{ readOnly: true }} />);
+      expect(container.querySelector('input')?.readOnly).toBe(true);
+    });
+
+    it('sets readOnly from bind.meta as fallback', () => {
+      const { container } = render(
+        <InputWidget
+          {...defaultProps}
+          bind={{
+            value: '',
+            meta: { type: 'string', label: 'Field', required: false, readOnly: true },
+          }}
+        />,
+      );
+      expect(container.querySelector('input')?.readOnly).toBe(true);
+    });
+
+    it('sets disabled from props', () => {
+      const { container } = render(<InputWidget {...defaultProps} props={{ disabled: true }} />);
+      expect(container.querySelector('input')?.disabled).toBe(true);
+    });
+
+    it('passes min, max, step, and pattern as HTML attributes', () => {
+      const { container } = render(
+        <InputWidget
+          {...defaultProps}
+          props={{ min: 0, max: 100, step: 5, pattern: '[0-9]+' }}
+          bind={{
+            value: '',
+            meta: { type: 'int', label: 'Score', required: false, readOnly: false },
+          }}
+        />,
+      );
+      const input = container.querySelector('input')!;
+      expect(input.min).toBe('0');
+      expect(input.max).toBe('100');
+      expect(input.step).toBe('5');
+      expect(input.pattern).toBe('[0-9]+');
+    });
+  });
+
+  describe('value binding', () => {
+    it('displays bind.value in the input', () => {
+      const { container } = render(
+        <InputWidget {...defaultProps} bind={{ value: 'Hello World' }} />,
+      );
+      expect(container.querySelector('input')?.value).toBe('Hello World');
+    });
+
+    it('displays empty string when bind.value is null', () => {
+      const { container } = render(<InputWidget {...defaultProps} bind={{ value: null }} />);
+      expect(container.querySelector('input')?.value).toBe('');
+    });
+
+    it('displays empty string when bind.value is undefined', () => {
+      const { container } = render(<InputWidget {...defaultProps} bind={{ value: undefined }} />);
+      expect(container.querySelector('input')?.value).toBe('');
+    });
+  });
+
+  describe('event triggers', () => {
+    it('calls bind.setValue and on.change on input change', () => {
+      const setValue = vi.fn();
+      const onChange = vi.fn();
+
+      const { container } = render(
+        <InputWidget {...defaultProps} bind={{ value: '', setValue }} on={{ change: onChange }} />,
+      );
+
+      fireEvent.change(container.querySelector('input')!, { target: { value: 'new value' } });
+
+      expect(setValue).toHaveBeenCalledWith('new value');
+      expect(onChange).toHaveBeenCalledWith('new value');
+    });
+
+    it('calls on.focus on input focus', () => {
+      const onFocus = vi.fn();
+
+      const { container } = render(<InputWidget {...defaultProps} on={{ focus: onFocus }} />);
+
+      fireEvent.focus(container.querySelector('input')!);
+
+      expect(onFocus).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls on.blur on input blur', () => {
+      const onBlur = vi.fn();
+
+      const { container } = render(<InputWidget {...defaultProps} on={{ blur: onBlur }} />);
+
+      fireEvent.blur(container.querySelector('input')!);
+
+      expect(onBlur).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not throw when on.change is not provided', () => {
+      const setValue = vi.fn();
+      const { container } = render(
+        <InputWidget {...defaultProps} bind={{ value: '', setValue }} on={{}} />,
+      );
+
+      expect(() => {
+        fireEvent.change(container.querySelector('input')!, { target: { value: 'x' } });
+      }).not.toThrow();
+      expect(setValue).toHaveBeenCalledWith('x');
+    });
+
+    it('does not throw when bind.setValue is not provided', () => {
+      const onChange = vi.fn();
+      const { container } = render(
+        <InputWidget {...defaultProps} bind={{ value: '' }} on={{ change: onChange }} />,
+      );
+
+      expect(() => {
+        fireEvent.change(container.querySelector('input')!, { target: { value: 'x' } });
+      }).not.toThrow();
+      expect(onChange).toHaveBeenCalledWith('x');
+    });
+  });
+
+  describe('widgetMeta', () => {
+    it('has correct metadata', () => {
+      expect(InputWidget.widgetMeta.name).toBe('input');
+      expect(InputWidget.widgetMeta.category).toBe('input');
+      expect(InputWidget.widgetMeta.binding).toBe('field');
+      expect(InputWidget.widgetMeta.container).toBe(false);
+      expect(InputWidget.widgetMeta.triggers).toEqual(['change', 'focus', 'blur']);
+    });
+  });
+});