@rangka/client 0.1.0 → 0.1.2

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

@@ -1,300 +0,0 @@
-import React from 'react';
-import { describe, test, expect, beforeEach, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { SlotRenderer } from '../renderer/SlotRenderer.js';
-import { registerWidget, clearWidgetRegistry } from '../registry.js';
-import { registerBuiltInWidgets } from '../components/register.js';
-import { createRootContext } from '../context/builder.js';
-import { StateStore } from '../state/store.js';
-import type { WidgetNode } from '@rangka/shared';
-import type { WidgetProps } from '../types.js';
-
-beforeEach(() => {
-  clearWidgetRegistry();
-  registerBuiltInWidgets();
-});
-
-describe('SlotRenderer', () => {
-  test('renders empty slot without error', () => {
-    const { container } = render(<SlotRenderer nodes={[]} />);
-    expect(container.innerHTML).toBe('');
-  });
-
-  test('renders single button widget', () => {
-    const nodes: WidgetNode[] = [{ type: 'button', props: { label: 'Click me' } }];
-    render(<SlotRenderer nodes={nodes} />);
-    expect(screen.getByText('Click me')).toBeInTheDocument();
-  });
-
-  test('renders multiple widgets in order', () => {
-    const nodes: WidgetNode[] = [
-      { type: 'button', props: { label: 'First' } },
-      { type: 'button', props: { label: 'Second' } },
-      { type: 'button', props: { label: 'Third' } },
-    ];
-    render(<SlotRenderer nodes={nodes} />);
-    const buttons = screen.getAllByRole('button');
-    expect(buttons).toHaveLength(3);
-    expect(buttons[0]).toHaveTextContent('First');
-    expect(buttons[1]).toHaveTextContent('Second');
-    expect(buttons[2]).toHaveTextContent('Third');
-  });
-
-  test('renders text widget with field binding', () => {
-    const ctx = createRootContext({ name: 'Order #1' }, 'sales.order', 'view');
-    const nodes: WidgetNode[] = [{ type: 'text', bind: { field: 'name' } }];
-    render(<SlotRenderer nodes={nodes} context={ctx} />);
-    expect(screen.getByText('Order #1')).toBeInTheDocument();
-  });
-
-  test('renders text widget with expression binding', () => {
-    const ctx = createRootContext({ qty: 5, rate: 100 }, 'sales.order', 'view');
-    const nodes: WidgetNode[] = [{ type: 'text', bind: { expression: '{{qty * rate}}' } }];
-    render(<SlotRenderer nodes={nodes} context={ctx} />);
-    expect(screen.getByText('500')).toBeInTheDocument();
-  });
-
-  test('skips widget when visible=false', () => {
-    const ctx = createRootContext({ status: 'submitted' }, 'sales.order', 'view');
-    const nodes: WidgetNode[] = [
-      {
-        type: 'button',
-        props: { label: 'Edit' },
-        visible: { field: 'status', operator: 'eq', value: 'draft' },
-      },
-    ];
-    render(<SlotRenderer nodes={nodes} context={ctx} />);
-    expect(screen.queryByText('Edit')).not.toBeInTheDocument();
-  });
-
-  test('shows widget when visible=true', () => {
-    const ctx = createRootContext({ status: 'draft' }, 'sales.order', 'view');
-    const nodes: WidgetNode[] = [
-      {
-        type: 'button',
-        props: { label: 'Edit' },
-        visible: { field: 'status', operator: 'eq', value: 'draft' },
-      },
-    ];
-    render(<SlotRenderer nodes={nodes} context={ctx} />);
-    expect(screen.getByText('Edit')).toBeInTheDocument();
-  });
-
-  test('resolves expression in props', () => {
-    const ctx = createRootContext({ count: 3 }, 'test', 'view');
-    const nodes: WidgetNode[] = [{ type: 'button', props: { label: '{{count}} items' } }];
-    render(<SlotRenderer nodes={nodes} context={ctx} />);
-    expect(screen.getByText('3 items')).toBeInTheDocument();
-  });
-
-  test('renders group with children', () => {
-    const nodes: WidgetNode[] = [
-      {
-        type: 'group',
-        props: { direction: 'row' },
-        children: [
-          { type: 'button', props: { label: 'A' } },
-          { type: 'button', props: { label: 'B' } },
-        ],
-      },
-    ];
-    render(<SlotRenderer nodes={nodes} />);
-    expect(screen.getByText('A')).toBeInTheDocument();
-    expect(screen.getByText('B')).toBeInTheDocument();
-  });
-
-  test('renders section with label and children', () => {
-    const nodes: WidgetNode[] = [
-      {
-        type: 'section',
-        props: { label: 'Details' },
-        children: [{ type: 'text', bind: { expression: '{{"hello"}}' } }],
-      },
-    ];
-    render(<SlotRenderer nodes={nodes} />);
-    expect(screen.getByText('Details')).toBeInTheDocument();
-    expect(screen.getByText('hello')).toBeInTheDocument();
-  });
-
-  test('renders divider', () => {
-    const nodes: WidgetNode[] = [{ type: 'divider' }];
-    const { container } = render(<SlotRenderer nodes={nodes} />);
-    expect(
-      container.querySelector('[role="separator"]') ??
-        container.querySelector('[data-slot="separator"]'),
-    ).toBeInTheDocument();
-  });
-
-  test('renders spacer', () => {
-    const nodes: WidgetNode[] = [{ type: 'spacer' }];
-    const { container } = render(<SlotRenderer nodes={nodes} />);
-    expect(container.querySelector('div')).toBeInTheDocument();
-  });
-
-  test('renders error placeholder for unknown widget', () => {
-    const nodes: WidgetNode[] = [{ type: 'nonexistent_widget' }];
-    const { container } = render(<SlotRenderer nodes={nodes} />);
-    expect(container.querySelector('[data-widget-error]')).toBeInTheDocument();
-  });
-
-  test('button click fires action', async () => {
-    const navigate = vi.fn();
-    const nodes: WidgetNode[] = [
-      {
-        type: 'button',
-        props: { label: 'Go' },
-        on: { click: { type: 'navigate', path: '/home' } },
-      },
-    ];
-    render(<SlotRenderer nodes={nodes} handlers={{ navigate }} />);
-    fireEvent.click(screen.getByText('Go'));
-    await vi.waitFor(() => {
-      expect(navigate).toHaveBeenCalledWith('/home');
-    });
-  });
-
-  test('button click fires setValue on $state', async () => {
-    const state = new StateStore();
-    const nodes: WidgetNode[] = [
-      {
-        type: 'button',
-        props: { label: 'Next' },
-        on: { click: { type: 'setValue', field: '$state.step', value: 2 } },
-      },
-    ];
-    render(<SlotRenderer nodes={nodes} state={state} />);
-    fireEvent.click(screen.getByText('Next'));
-    await vi.waitFor(() => {
-      expect(state.get('step')).toBe(2);
-    });
-  });
-});
-
-describe('SlotRenderer Edge Cases', () => {
-  test('deeply nested widget tree renders', () => {
-    const nodes: WidgetNode[] = [
-      {
-        type: 'group',
-        children: [
-          {
-            type: 'group',
-            children: [
-              {
-                type: 'group',
-                children: [{ type: 'button', props: { label: 'Deep' } }],
-              },
-            ],
-          },
-        ],
-      },
-    ];
-    render(<SlotRenderer nodes={nodes} />);
-    expect(screen.getByText('Deep')).toBeInTheDocument();
-  });
-
-  test('multiple visible conditions all must pass', () => {
-    const ctx = createRootContext({ status: 'draft', total: 50 }, 'test', 'view');
-    const nodes: WidgetNode[] = [
-      {
-        type: 'button',
-        props: { label: 'Submit' },
-        visible: [
-          { field: 'status', operator: 'eq', value: 'draft' },
-          { field: 'total', operator: 'gt', value: 0 },
-        ],
-      },
-    ];
-    render(<SlotRenderer nodes={nodes} context={ctx} />);
-    expect(screen.getByText('Submit')).toBeInTheDocument();
-  });
-
-  test('visible fails when one condition false', () => {
-    const ctx = createRootContext({ status: 'draft', total: 0 }, 'test', 'view');
-    const nodes: WidgetNode[] = [
-      {
-        type: 'button',
-        props: { label: 'Submit' },
-        visible: [
-          { field: 'status', operator: 'eq', value: 'draft' },
-          { field: 'total', operator: 'gt', value: 0 },
-        ],
-      },
-    ];
-    render(<SlotRenderer nodes={nodes} context={ctx} />);
-    expect(screen.queryByText('Submit')).not.toBeInTheDocument();
-  });
-
-  test('widget with no props renders without error', () => {
-    const nodes: WidgetNode[] = [{ type: 'divider' }];
-    expect(() => render(<SlotRenderer nodes={nodes} />)).not.toThrow();
-  });
-
-  test('custom widget via registry', () => {
-    const CustomWidget = ({ props }: WidgetProps) => (
-      <div data-testid="custom">{props.text as string}</div>
-    );
-    registerWidget(
-      {
-        name: 'custom-test',
-        label: 'Custom',
-        category: 'display',
-        schema: { text: { type: 'string' } },
-        binding: 'none',
-        triggers: [],
-        container: false,
-      },
-      CustomWidget,
-    );
-    const nodes: WidgetNode[] = [{ type: 'custom-test', props: { text: 'Hello Custom' } }];
-    render(<SlotRenderer nodes={nodes} />);
-    expect(screen.getByTestId('custom')).toHaveTextContent('Hello Custom');
-  });
-
-  test('sequence action fires multiple actions', async () => {
-    const state = new StateStore();
-    const navigate = vi.fn();
-    const nodes: WidgetNode[] = [
-      {
-        type: 'button',
-        props: { label: 'Do All' },
-        on: {
-          click: {
-            type: 'sequence',
-            actions: [
-              { type: 'setValue', field: '$state.done', value: true },
-              { type: 'navigate', path: '/done' },
-            ],
-          },
-        },
-      },
-    ];
-    render(<SlotRenderer nodes={nodes} state={state} handlers={{ navigate }} />);
-    fireEvent.click(screen.getByText('Do All'));
-    await vi.waitFor(() => {
-      expect(state.get('done')).toBe(true);
-      expect(navigate).toHaveBeenCalledWith('/done');
-    });
-  });
-
-  test('expression binding with nested field path', () => {
-    const ctx = createRootContext({ items: [10, 20, 30] }, 'test', 'view');
-    const nodes: WidgetNode[] = [{ type: 'text', bind: { expression: '{{sum(items)}}' } }];
-    render(<SlotRenderer nodes={nodes} context={ctx} />);
-    expect(screen.getByText('60')).toBeInTheDocument();
-  });
-
-  test('widget with expression in disabled prop', () => {
-    const ctx = createRootContext({ locked: true }, 'test', 'view');
-    const nodes: WidgetNode[] = [
-      { type: 'button', props: { label: 'Action', disabled: '{{locked}}' } },
-    ];
-    render(<SlotRenderer nodes={nodes} context={ctx} />);
-    expect(screen.getByText('Action')).toBeDisabled();
-  });
-
-  test('handles null bind value gracefully', () => {
-    const ctx = createRootContext({ name: null }, 'test', 'view');
-    const nodes: WidgetNode[] = [{ type: 'text', bind: { field: 'name' } }];
-    expect(() => render(<SlotRenderer nodes={nodes} context={ctx} />)).not.toThrow();
-  });
-});

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

@@ -1,229 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import React from 'react';
-import { render, cleanup } from '@testing-library/react';
-import { registerWidget, clearWidgetRegistry } from '../registry.js';
-import { RepeatWidget } from '../components/RepeatWidget.js';
-import { WidgetContextProvider } from '../hooks/useWidgetContext.js';
-import type { WidgetProps } from '../types.js';
-import type { WidgetContext } from '../context/types.js';
-import type { ComponentType } from 'react';
-
-function FieldReader({ bind, context }: WidgetProps) {
-  return (
-    <span data-testid="field-reader" data-index={context.index} data-model={context.model}>
-      {bind.value != null ? String(bind.value) : 'no-value'}
-    </span>
-  );
-}
-
-beforeEach(() => {
-  clearWidgetRegistry();
-  registerWidget(
-    {
-      name: 'repeat',
-      label: 'Repeat',
-      category: 'data',
-      schema: {},
-      binding: 'field',
-      triggers: [],
-      container: true,
-    },
-    RepeatWidget as unknown as ComponentType<WidgetProps>,
-  );
-  registerWidget(
-    {
-      name: 'field-reader',
-      label: 'Field Reader',
-      category: 'display',
-      schema: {},
-      binding: 'field',
-      triggers: [],
-      container: false,
-    },
-    FieldReader,
-  );
-});
-
-afterEach(() => {
-  cleanup();
-  clearWidgetRegistry();
-});
-
-describe('RepeatWidget', () => {
-  it('renders children for each record from bind.value', () => {
-    const records = [
-      { id: '1', name: 'Alice' },
-      { id: '2', name: 'Bob' },
-      { id: '3', name: 'Carol' },
-    ];
-
-    const { container } = render(
-      <WidgetContextProvider value={{ record: {}, model: 'test', mode: 'view' }}>
-        <RepeatWidget
-          props={{ layout: 'list' }}
-          bind={{ value: records }}
-          on={{}}
-          context={{ record: {}, model: 'test', mode: 'view' }}
-        >
-          <span data-testid="repeat-child">item</span>
-        </RepeatWidget>
-      </WidgetContextProvider>,
-    );
-
-    const items = container.querySelectorAll('[data-repeat-index]');
-    expect(items).toHaveLength(3);
-  });
-
-  it('reads records from parent context when bind.value is not an array', () => {
-    const records = [
-      { id: '1', name: 'Item 1' },
-      { id: '2', name: 'Item 2' },
-    ];
-
-    const ctx: WidgetContext = {
-      record: {},
-      records,
-      model: 'sales.product',
-      mode: 'view',
-    };
-
-    const { container } = render(
-      <WidgetContextProvider value={ctx}>
-        <RepeatWidget
-          props={{ layout: 'list' }}
-          bind={{ value: null }}
-          on={{}}
-          context={{ record: {}, model: 'sales.product', mode: 'view' }}
-        >
-          <span data-testid="repeat-child">item</span>
-        </RepeatWidget>
-      </WidgetContextProvider>,
-    );
-
-    const items = container.querySelectorAll('[data-repeat-index]');
-    expect(items).toHaveLength(2);
-  });
-
-  it('renders grid layout with correct columns', () => {
-    const records = [
-      { id: '1', name: 'A' },
-      { id: '2', name: 'B' },
-    ];
-
-    const { container } = render(
-      <WidgetContextProvider value={{ record: {}, model: 'test', mode: 'view' }}>
-        <RepeatWidget
-          props={{ layout: 'grid', columns: 2, gap: 'lg' }}
-          bind={{ value: records }}
-          on={{}}
-          context={{ record: {}, model: 'test', mode: 'view' }}
-        >
-          <span>item</span>
-        </RepeatWidget>
-      </WidgetContextProvider>,
-    );
-
-    const repeatEl = container.querySelector('[data-widget="repeat"]') as HTMLElement;
-    expect(repeatEl.getAttribute('data-layout')).toBe('grid');
-    expect(repeatEl.style.display).toBe('grid');
-    expect(repeatEl.style.gridTemplateColumns).toBe('repeat(2, minmax(0, 1fr))');
-    expect(repeatEl.style.gap).toBe('24px');
-  });
-
-  it('renders list layout with vertical flex', () => {
-    const records = [{ id: '1', name: 'A' }];
-
-    const { container } = render(
-      <WidgetContextProvider value={{ record: {}, model: 'test', mode: 'view' }}>
-        <RepeatWidget
-          props={{ layout: 'list', gap: 'sm' }}
-          bind={{ value: records }}
-          on={{}}
-          context={{ record: {}, model: 'test', mode: 'view' }}
-        >
-          <span>item</span>
-        </RepeatWidget>
-      </WidgetContextProvider>,
-    );
-
-    const repeatEl = container.querySelector('[data-widget="repeat"]') as HTMLElement;
-    expect(repeatEl.getAttribute('data-layout')).toBe('list');
-    expect(repeatEl.style.display).toBe('flex');
-    expect(repeatEl.style.flexDirection).toBe('column');
-    expect(repeatEl.style.gap).toBe('8px');
-  });
-
-  it('provides row-level context with index', () => {
-    const records = [
-      { id: '1', name: 'First' },
-      { id: '2', name: 'Second' },
-    ];
-
-    const ctx: WidgetContext = {
-      record: {},
-      records,
-      model: 'test.item',
-      mode: 'view',
-    };
-
-    // We need to test that children get row context
-    // The RepeatWidget renders children as ReactNode, so each iteration gets WidgetContextProvider
-    // We verify by checking that it renders the right number of items
-    const { container } = render(
-      <WidgetContextProvider value={ctx}>
-        <RepeatWidget
-          props={{ layout: 'list' }}
-          bind={{ value: records }}
-          on={{}}
-          context={{ record: {}, model: 'test.item', mode: 'view' }}
-        >
-          <span className="child-marker">child</span>
-        </RepeatWidget>
-      </WidgetContextProvider>,
-    );
-
-    const items = container.querySelectorAll('[data-repeat-index]');
-    expect(items).toHaveLength(2);
-    expect(items[0].getAttribute('data-repeat-index')).toBe('0');
-    expect(items[1].getAttribute('data-repeat-index')).toBe('1');
-  });
-
-  it('renders empty when no records available', () => {
-    const { container } = render(
-      <WidgetContextProvider value={{ record: {}, model: 'test', mode: 'view' }}>
-        <RepeatWidget
-          props={{ layout: 'list' }}
-          bind={{ value: null }}
-          on={{}}
-          context={{ record: {}, model: 'test', mode: 'view' }}
-        >
-          <span>item</span>
-        </RepeatWidget>
-      </WidgetContextProvider>,
-    );
-
-    const items = container.querySelectorAll('[data-repeat-index]');
-    expect(items).toHaveLength(0);
-  });
-
-  it('defaults to list layout and md gap', () => {
-    const records = [{ id: '1', name: 'A' }];
-
-    const { container } = render(
-      <WidgetContextProvider value={{ record: {}, model: 'test', mode: 'view' }}>
-        <RepeatWidget
-          props={{}}
-          bind={{ value: records }}
-          on={{}}
-          context={{ record: {}, model: 'test', mode: 'view' }}
-        >
-          <span>item</span>
-        </RepeatWidget>
-      </WidgetContextProvider>,
-    );
-
-    const repeatEl = container.querySelector('[data-widget="repeat"]') as HTMLElement;
-    expect(repeatEl.getAttribute('data-layout')).toBe('list');
-    expect(repeatEl.style.gap).toBe('16px');
-  });
-});