@rangka/client 0.1.0 → 0.1.2

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

@@ -1,116 +0,0 @@
-import { describe, test, expect } from 'vitest';
-import { parse, evaluate } from '../expression/index.js';
-import { evaluateConditions } from '../condition/index.js';
-import { StateStore } from '../state/index.js';
-import { createRootContext } from '../context/index.js';
-import { resolveBinding } from '../binding/index.js';
-import { dispatch } from '../action/index.js';
-import { buildDependencyMap, getAffectedWidgets } from '../reactivity/index.js';
-import type { ActionContext, ActionHandlers } from '../action/index.js';
-import type { WidgetNode } from '@rangka/shared';
-
-describe('Integration: Form scenario', () => {
-  test('field change → expression recomputes → condition re-evaluates → action fires', () => {
-    const record = { qty: 5, rate: 100, total: 500, status: 'draft' };
-    const _ctx = createRootContext(record, 'sales.order', 'edit');
-
-    record.qty = 10;
-    const exprAst = parse('{{qty * rate}}');
-    const newTotal = evaluate(exprAst, record);
-    expect(newTotal).toBe(1000);
-
-    record.total = newTotal as number;
-    const visible = evaluateConditions({ field: 'total', operator: 'gt', value: 500 }, record);
-    expect(visible).toBe(true);
-  });
-});
-
-describe('Integration: Table row context', () => {
-  test('model binding → row context → action in row uses correct record', async () => {
-    const parentRecord = { id: '1', customer: 'Acme' };
-    const parentCtx = createRootContext(parentRecord, 'sales.order', 'view');
-
-    const rowRecord = { id: '10', product: 'Widget', qty: 5, rate: 20 };
-    const rowCtx = {
-      record: rowRecord,
-      model: 'sales.orderItem',
-      mode: 'view' as const,
-      index: 0,
-      parent: parentCtx,
-    };
-
-    const binding = resolveBinding({ expression: '{{qty * rate}}' }, rowCtx);
-    expect(binding!.value).toBe(100);
-
-    const deleted: [string, string][] = [];
-    const handlers: ActionHandlers = {
-      modelDelete: async (model, id) => {
-        deleted.push([model, id]);
-      },
-    };
-    const actionCtx: ActionContext = {
-      widgetContext: rowCtx,
-      state: new StateStore(),
-    };
-    await dispatch({ type: 'model.delete' }, actionCtx, handlers);
-    expect(deleted).toEqual([['sales.orderItem', '10']]);
-  });
-});
-
-describe('Integration: $state reactivity scenario', () => {
-  test('action writes $state → dependent widgets flagged for re-render', async () => {
-    const state = new StateStore();
-    const nodes: WidgetNode[] = [
-      { id: 'step1', type: 'section', visible: { field: '$state.step', operator: 'eq', value: 1 } },
-      { id: 'step2', type: 'section', visible: { field: '$state.step', operator: 'eq', value: 2 } },
-      {
-        id: 'nextBtn',
-        type: 'button',
-        props: { label: '{{if($state.step == 2, "Submit", "Next")}}' },
-      },
-    ];
-
-    const depMap = buildDependencyMap(nodes);
-
-    const actionCtx: ActionContext = {
-      widgetContext: createRootContext({}, 'app.page', 'view'),
-      state,
-    };
-    await dispatch({ type: 'setValue', field: '$state.step', value: 2 }, actionCtx, {});
-
-    expect(state.get('step')).toBe(2);
-
-    const affected = getAffectedWidgets(depMap, 'step', true);
-    expect(affected).toContain('step1');
-    expect(affected).toContain('step2');
-    expect(affected).toContain('nextBtn');
-  });
-});
-
-describe('Integration: Wizard scenario', () => {
-  test('$state.step changes → visibility toggles → props update', async () => {
-    const state = new StateStore();
-    state.set('step', 1);
-
-    const flat = { $state: { step: 1 } };
-
-    expect(evaluateConditions({ field: '$state.step', operator: 'eq', value: 1 }, flat)).toBe(true);
-    expect(evaluateConditions({ field: '$state.step', operator: 'eq', value: 2 }, flat)).toBe(
-      false,
-    );
-
-    const labelAst = parse('{{if($state.step == 2, "Submit", "Next")}}');
-    expect(evaluate(labelAst, flat)).toBe('Next');
-
-    state.set('step', 2);
-    const flat2 = { $state: { step: 2 } };
-
-    expect(evaluateConditions({ field: '$state.step', operator: 'eq', value: 1 }, flat2)).toBe(
-      false,
-    );
-    expect(evaluateConditions({ field: '$state.step', operator: 'eq', value: 2 }, flat2)).toBe(
-      true,
-    );
-    expect(evaluate(labelAst, flat2)).toBe('Submit');
-  });
-});

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

@@ -1,70 +0,0 @@
-import { describe, it, expect, vi, afterEach } from 'vitest';
-import React from 'react';
-import { render, screen, fireEvent, cleanup } from '@testing-library/react';
-import { JsonWidget } from '../components/JsonWidget.js';
-
-const defaultProps = {
-  props: {},
-  bind: { value: null },
-  on: {},
-  context: { record: {}, model: '', mode: 'view' as const },
-};
-
-afterEach(() => cleanup());
-
-describe('JsonWidget', () => {
-  it('renders a textarea', () => {
-    const { container } = render(<JsonWidget {...defaultProps} />);
-    expect(container.querySelector('textarea')).toBeInTheDocument();
-  });
-
-  it('has monospace font', () => {
-    const { container } = render(<JsonWidget {...defaultProps} />);
-    expect(container.querySelector('textarea')?.className).toContain('font-mono');
-  });
-
-  it('displays label from props', () => {
-    render(<JsonWidget {...defaultProps} props={{ label: 'Metadata' }} />);
-    expect(screen.getByText('Metadata')).toBeInTheDocument();
-  });
-
-  it('renders object value as formatted JSON', () => {
-    const { container } = render(<JsonWidget {...defaultProps} bind={{ value: { key: 'val' } }} />);
-    expect(container.querySelector('textarea')?.value).toContain('"key": "val"');
-  });
-
-  it('formats JSON on blur', () => {
-    const setValue = vi.fn();
-    const { container } = render(<JsonWidget {...defaultProps} bind={{ value: null, setValue }} />);
-    const textarea = container.querySelector('textarea')!;
-    fireEvent.change(textarea, { target: { value: '{"a":1}' } });
-    fireEvent.blur(textarea);
-    expect(textarea.value).toContain('"a": 1');
-    expect(setValue).toHaveBeenCalledWith({ a: 1 });
-  });
-
-  it('shows error for invalid JSON on blur', () => {
-    const { container } = render(<JsonWidget {...defaultProps} bind={{ value: null }} />);
-    const textarea = container.querySelector('textarea')!;
-    fireEvent.change(textarea, { target: { value: '{invalid' } });
-    fireEvent.blur(textarea);
-    expect(screen.getByRole('alert').textContent).toBe('Invalid JSON');
-  });
-
-  it('handles disabled state', () => {
-    const { container } = render(<JsonWidget {...defaultProps} props={{ disabled: true }} />);
-    expect(container.querySelector('textarea')?.disabled).toBe(true);
-  });
-
-  it('handles null bind.value gracefully', () => {
-    const { container } = render(<JsonWidget {...defaultProps} bind={{ value: null }} />);
-    expect(container.querySelector('textarea')?.value).toBe('');
-  });
-
-  it('fires on.change when typing', () => {
-    const onChange = vi.fn();
-    const { container } = render(<JsonWidget {...defaultProps} on={{ change: onChange }} />);
-    fireEvent.change(container.querySelector('textarea')!, { target: { value: '{}' } });
-    expect(onChange).toHaveBeenCalledWith('{}');
-  });
-});

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

@@ -1,92 +0,0 @@
-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 { LinkWidget } from '../components/LinkWidget.js';
-
-const defaultProps = {
-  props: {},
-  bind: {
-    value: null,
-    meta: {
-      type: 'link',
-      label: 'Customer',
-      required: false,
-      readOnly: false,
-      options: [
-        { label: 'Acme Corp', value: 'cust-1' },
-        { label: 'Globex', value: 'cust-2' },
-      ],
-    },
-  },
-  on: {},
-  context: { record: {}, model: '', mode: 'view' as const },
-};
-
-afterEach(() => cleanup());
-
-describe('LinkWidget', () => {
-  it('renders a combobox button', () => {
-    render(<LinkWidget {...defaultProps} />);
-    expect(screen.getByRole('combobox')).toBeInTheDocument();
-  });
-
-  it('displays label from props', () => {
-    render(<LinkWidget {...defaultProps} props={{ label: 'Supplier' }} />);
-    expect(screen.getByText('Supplier')).toBeInTheDocument();
-  });
-
-  it('falls back to bind.meta.label', () => {
-    render(<LinkWidget {...defaultProps} />);
-    expect(screen.getByText('Customer')).toBeInTheDocument();
-  });
-
-  it('shows placeholder when no value', () => {
-    render(<LinkWidget {...defaultProps} />);
-    expect(screen.getByText('Select...')).toBeInTheDocument();
-  });
-
-  it('shows selected option label', () => {
-    render(<LinkWidget {...defaultProps} bind={{ ...defaultProps.bind, value: 'cust-1' }} />);
-    expect(screen.getByText('Acme Corp')).toBeInTheDocument();
-  });
-
-  it('handles disabled state', () => {
-    render(<LinkWidget {...defaultProps} props={{ disabled: true }} />);
-    expect(screen.getByRole('combobox')).toBeDisabled();
-  });
-
-  it.skip('opens dropdown on click', async () => {
-    render(<LinkWidget {...defaultProps} />);
-    await userEvent.click(screen.getByRole('combobox'));
-    expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument();
-  });
-
-  it.skip('shows options in dropdown', async () => {
-    render(<LinkWidget {...defaultProps} />);
-    await userEvent.click(screen.getByRole('combobox'));
-    expect(screen.getByText('Acme Corp')).toBeInTheDocument();
-    expect(screen.getByText('Globex')).toBeInTheDocument();
-  });
-
-  it.skip('fires on.change when selecting', async () => {
-    const onChange = vi.fn();
-    render(<LinkWidget {...defaultProps} on={{ change: onChange }} />);
-    await userEvent.click(screen.getByRole('combobox'));
-    await userEvent.click(screen.getByText('Globex'));
-    expect(onChange).toHaveBeenCalledWith('cust-2');
-  });
-
-  it.skip('fires on.search when typing', async () => {
-    const onSearch = vi.fn();
-    render(<LinkWidget {...defaultProps} on={{ search: onSearch }} />);
-    await userEvent.click(screen.getByRole('combobox'));
-    fireEvent.change(screen.getByPlaceholderText('Search...'), { target: { value: 'acm' } });
-    expect(onSearch).toHaveBeenCalledWith('acm');
-  });
-
-  it('handles null bind.value gracefully', () => {
-    render(<LinkWidget {...defaultProps} bind={{ ...defaultProps.bind, value: null }} />);
-    expect(screen.getByText('Select...')).toBeInTheDocument();
-  });
-});

package/src/widgets/__tests__/many-to-many-widget.test.tsx

@@ -1,93 +0,0 @@
-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 { ManyToManyWidget } from '../components/ManyToManyWidget.js';
-
-const defaultProps = {
-  props: {},
-  bind: {
-    value: [],
-    meta: {
-      type: 'manyToMany',
-      label: 'Tags',
-      required: false,
-      readOnly: false,
-      options: [
-        { label: 'VIP', value: 'tag-1' },
-        { label: 'Active', value: 'tag-2' },
-        { label: 'New', value: 'tag-3' },
-      ],
-    },
-  },
-  on: {},
-  context: { record: {}, model: '', mode: 'view' as const },
-};
-
-afterEach(() => cleanup());
-
-describe('ManyToManyWidget', () => {
-  it('renders a combobox button', () => {
-    render(<ManyToManyWidget {...defaultProps} />);
-    expect(screen.getByRole('combobox')).toBeInTheDocument();
-  });
-
-  it('displays label', () => {
-    render(<ManyToManyWidget {...defaultProps} />);
-    expect(screen.getByText('Tags')).toBeInTheDocument();
-  });
-
-  it('shows placeholder when empty', () => {
-    render(<ManyToManyWidget {...defaultProps} />);
-    expect(screen.getByText('Select...')).toBeInTheDocument();
-  });
-
-  it('shows badges for selected values', () => {
-    render(
-      <ManyToManyWidget
-        {...defaultProps}
-        bind={{ ...defaultProps.bind, value: ['tag-1', 'tag-2'] }}
-      />,
-    );
-    expect(screen.getByText('VIP')).toBeInTheDocument();
-    expect(screen.getByText('Active')).toBeInTheDocument();
-  });
-
-  it('handles disabled state', () => {
-    render(<ManyToManyWidget {...defaultProps} props={{ disabled: true }} />);
-    expect(screen.getByRole('combobox')).toBeDisabled();
-  });
-
-  it.skip('fires on.change when toggling selection', async () => {
-    const onChange = vi.fn();
-    render(<ManyToManyWidget {...defaultProps} on={{ change: onChange }} />);
-    await userEvent.click(screen.getByRole('combobox'));
-    await userEvent.click(screen.getByText('VIP'));
-    expect(onChange).toHaveBeenCalledWith(['tag-1']);
-  });
-
-  it('removes item via badge button', () => {
-    const setValue = vi.fn();
-    render(
-      <ManyToManyWidget
-        {...defaultProps}
-        bind={{ ...defaultProps.bind, value: ['tag-1', 'tag-2'], setValue }}
-      />,
-    );
-    fireEvent.click(screen.getByLabelText('Remove VIP'));
-    expect(setValue).toHaveBeenCalledWith(['tag-2']);
-  });
-
-  it('handles null bind.value gracefully', () => {
-    render(<ManyToManyWidget {...defaultProps} bind={{ ...defaultProps.bind, value: null }} />);
-    expect(screen.getByText('Select...')).toBeInTheDocument();
-  });
-
-  it.skip('fires on.search when typing', async () => {
-    const onSearch = vi.fn();
-    render(<ManyToManyWidget {...defaultProps} on={{ search: onSearch }} />);
-    await userEvent.click(screen.getByRole('combobox'));
-    fireEvent.change(screen.getByPlaceholderText('Search...'), { target: { value: 'vi' } });
-    expect(onSearch).toHaveBeenCalledWith('vi');
-  });
-});

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

@@ -1,148 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import React from 'react';
-import { render, screen, fireEvent, cleanup } from '@testing-library/react';
-import { ModalWidget } from '../components/ModalWidget.js';
-import { PageStateProvider } from '../hooks/usePageState.js';
-import { StateStore } from '../state/store.js';
-
-function renderWithState(ui: React.ReactElement, state?: StateStore) {
-  const store = state ?? new StateStore();
-  return { ...render(<PageStateProvider value={store}>{ui}</PageStateProvider>), store };
-}
-
-beforeEach(() => {});
-
-afterEach(() => {
-  cleanup();
-});
-
-describe('ModalWidget', () => {
-  it('renders children', () => {
-    renderWithState(
-      <ModalWidget
-        props={{ size: 'md' }}
-        bind={{ value: undefined }}
-        on={{}}
-        context={{ record: {}, model: '', mode: 'view' }}
-      >
-        <div data-testid="child">Hello</div>
-      </ModalWidget>,
-    );
-
-    expect(screen.getByTestId('child')).toBeInTheDocument();
-    expect(screen.getByTestId('child')).toHaveTextContent('Hello');
-  });
-
-  it('renders with sm size', () => {
-    renderWithState(
-      <ModalWidget
-        props={{ size: 'sm' }}
-        bind={{ value: undefined }}
-        on={{}}
-        context={{ record: {}, model: '', mode: 'view' }}
-      >
-        <div>Content</div>
-      </ModalWidget>,
-    );
-
-    const dialog = screen.getByRole('dialog');
-    expect(dialog.className).toContain('sm:max-w-sm');
-  });
-
-  it('renders with md size by default', () => {
-    renderWithState(
-      <ModalWidget
-        props={{}}
-        bind={{ value: undefined }}
-        on={{}}
-        context={{ record: {}, model: '', mode: 'view' }}
-      >
-        <div>Content</div>
-      </ModalWidget>,
-    );
-
-    const dialog = screen.getByRole('dialog');
-    expect(dialog.className).toContain('sm:max-w-lg');
-  });
-
-  it('renders with lg size', () => {
-    renderWithState(
-      <ModalWidget
-        props={{ size: 'lg' }}
-        bind={{ value: undefined }}
-        on={{}}
-        context={{ record: {}, model: '', mode: 'view' }}
-      >
-        <div>Content</div>
-      </ModalWidget>,
-    );
-
-    const dialog = screen.getByRole('dialog');
-    expect(dialog.className).toContain('sm:max-w-3xl');
-  });
-
-  it('renders title', () => {
-    renderWithState(
-      <ModalWidget
-        props={{ title: 'Confirm Action' }}
-        bind={{ value: undefined }}
-        on={{}}
-        context={{ record: {}, model: '', mode: 'view' }}
-      >
-        <div>Content</div>
-      </ModalWidget>,
-    );
-
-    expect(screen.getByText('Confirm Action')).toBeInTheDocument();
-  });
-
-  it('renders close button by default', () => {
-    renderWithState(
-      <ModalWidget
-        props={{ title: 'Test' }}
-        bind={{ value: undefined }}
-        on={{}}
-        context={{ record: {}, model: '', mode: 'view' }}
-      >
-        <div>Content</div>
-      </ModalWidget>,
-    );
-
-    expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
-  });
-
-  it('close button sets $state key to false', () => {
-    const store = new StateStore();
-    store.set('showModal', true);
-
-    renderWithState(
-      <ModalWidget
-        props={{ title: 'Test', _visibleField: '$state.showModal' }}
-        bind={{ value: undefined }}
-        on={{}}
-        context={{ record: {}, model: '', mode: 'view' }}
-      >
-        <div>Content</div>
-      </ModalWidget>,
-      store,
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
-    expect(store.get('showModal')).toBe(false);
-  });
-
-  it('has correct aria role', () => {
-    renderWithState(
-      <ModalWidget
-        props={{ title: 'My Modal' }}
-        bind={{ value: undefined }}
-        on={{}}
-        context={{ record: {}, model: '', mode: 'view' }}
-      >
-        <div>Content</div>
-      </ModalWidget>,
-    );
-
-    expect(screen.getByRole('dialog')).toBeInTheDocument();
-  });
-});

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

@@ -1,97 +0,0 @@
-import { describe, it, expect, vi, afterEach } from 'vitest';
-import React from 'react';
-import { render, screen, fireEvent, cleanup } from '@testing-library/react';
-import { MoneyWidget } from '../components/MoneyWidget.js';
-
-const defaultProps = {
-  props: {},
-  bind: { value: null },
-  on: {},
-  context: { record: {}, model: '', mode: 'view' as const },
-};
-
-afterEach(() => cleanup());
-
-describe('MoneyWidget', () => {
-  it('renders input element', () => {
-    const { container } = render(<MoneyWidget {...defaultProps} />);
-    expect(container.querySelector('input')).toBeInTheDocument();
-  });
-
-  it('displays label from props', () => {
-    render(<MoneyWidget {...defaultProps} props={{ label: 'Amount' }} />);
-    expect(screen.getByText('Amount')).toBeInTheDocument();
-  });
-
-  it('shows currency prefix', () => {
-    render(<MoneyWidget {...defaultProps} props={{ currency: '€' }} />);
-    expect(screen.getByText('€')).toBeInTheDocument();
-  });
-
-  it('shows default $ prefix', () => {
-    render(<MoneyWidget {...defaultProps} />);
-    expect(screen.getByText('$')).toBeInTheDocument();
-  });
-
-  it('displays value with 2 decimal places', () => {
-    const { container } = render(<MoneyWidget {...defaultProps} bind={{ value: 1234.5 }} />);
-    expect(container.querySelector('input')?.value).toBe('1234.50');
-  });
-
-  it('fires on.change with numeric value', () => {
-    const onChange = vi.fn();
-    const { container } = render(<MoneyWidget {...defaultProps} on={{ change: onChange }} />);
-    fireEvent.focus(container.querySelector('input')!);
-    fireEvent.change(container.querySelector('input')!, { target: { value: '99.99' } });
-    expect(onChange).toHaveBeenCalledWith(99.99);
-  });
-
-  it('fires on.change with null for empty input', () => {
-    const onChange = vi.fn();
-    const { container } = render(
-      <MoneyWidget {...defaultProps} bind={{ value: 100 }} on={{ change: onChange }} />,
-    );
-    fireEvent.focus(container.querySelector('input')!);
-    fireEvent.change(container.querySelector('input')!, { target: { value: '' } });
-    expect(onChange).toHaveBeenCalledWith(null);
-  });
-
-  it('formats value on blur', () => {
-    const { container } = render(<MoneyWidget {...defaultProps} bind={{ value: null }} />);
-    const input = container.querySelector('input')!;
-    fireEvent.focus(input);
-    fireEvent.change(input, { target: { value: '42.1' } });
-    fireEvent.blur(input);
-    expect(input.value).toBe('42.10');
-  });
-
-  it('handles disabled state', () => {
-    const { container } = render(<MoneyWidget {...defaultProps} props={{ disabled: true }} />);
-    expect(container.querySelector('input')?.disabled).toBe(true);
-  });
-
-  it('handles null bind.value gracefully', () => {
-    const { container } = render(<MoneyWidget {...defaultProps} bind={{ value: null }} />);
-    expect(container.querySelector('input')?.value).toBe('');
-  });
-
-  it('handles readOnly from bind.meta', () => {
-    const { container } = render(
-      <MoneyWidget
-        {...defaultProps}
-        bind={{ value: 0, meta: { type: 'money', label: 'X', required: false, readOnly: true } }}
-      />,
-    );
-    expect(container.querySelector('input')?.readOnly).toBe(true);
-  });
-
-  it('calls bind.setValue on change', () => {
-    const setValue = vi.fn();
-    const { container } = render(
-      <MoneyWidget {...defaultProps} bind={{ value: null, setValue }} />,
-    );
-    fireEvent.focus(container.querySelector('input')!);
-    fireEvent.change(container.querySelector('input')!, { target: { value: '50' } });
-    expect(setValue).toHaveBeenCalledWith(50);
-  });
-});