@rangka/client 0.1.0 → 0.1.2

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

@@ -1,249 +0,0 @@
-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

@@ -1,129 +0,0 @@
-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

@@ -1,264 +0,0 @@
-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']);
-    });
-  });
-});