@rangka/client 0.1.0 → 0.1.2

package/src/widgets/__tests__/table-data-binding.test.tsx

@@ -1,482 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import React from 'react';
-import { render, screen, fireEvent, cleanup, waitFor } from '@testing-library/react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import type { WidgetNode } from '@rangka/shared';
-import { registerWidget, clearWidgetRegistry } from '../registry.js';
-import { SlotRenderer } from '../renderer/SlotRenderer.js';
-import { StateStore } from '../state/store.js';
-import { TableWidget } from '../components/TableWidget.js';
-import { ColumnWidget } from '../components/ColumnWidget.js';
-import { MetaProvider } from '../../context/MetaContext.js';
-import type { WidgetProps } from '../types.js';
-import type { WidgetContext } from '../context/types.js';
-import type { ComponentType } from 'react';
-
-vi.mock('../../api/client.js', () => ({
-  apiClient: vi.fn(),
-}));
-
-import { apiClient } from '../../api/client.js';
-const mockApiClient = vi.mocked(apiClient);
-
-function TestText({ bind }: WidgetProps) {
-  return <span data-testid="cell-text">{String(bind?.value ?? '')}</span>;
-}
-
-function TestBadge({ bind }: WidgetProps) {
-  return <span data-testid="cell-badge">{String(bind?.value ?? '')}</span>;
-}
-
-function createQueryClient() {
-  return new QueryClient({
-    defaultOptions: {
-      queries: { retry: false, gcTime: 0 },
-    },
-  });
-}
-
-function mockApiResponse(data: Record<string, unknown>[], total?: number) {
-  const body = total != null ? { data, total } : data;
-  mockApiClient.mockResolvedValueOnce({
-    ok: true,
-    json: () => Promise.resolve(body),
-  } as unknown as Response);
-}
-
-function renderTable(
-  nodes: WidgetNode[],
-  options: {
-    records?: Record<string, unknown>[];
-    model?: string;
-    state?: StateStore;
-  } = {},
-) {
-  const { records, model = 'sales.order', state = new StateStore() } = options;
-  const ctx: WidgetContext = {
-    record: {},
-    records,
-    model,
-    mode: 'view',
-  };
-  const queryClient = createQueryClient();
-  const meta = {
-    navigation: [],
-    pages: [],
-    models: {
-      [model]: {
-        qualifiedName: model,
-        fields: [
-          { name: 'customer', type: 'string', label: 'Customer' },
-          { name: 'date', type: 'date', label: 'Date' },
-          {
-            name: 'status',
-            type: 'enum',
-            label: 'Status',
-            options: ['Draft', 'Confirmed', 'Shipped'],
-          },
-          { name: 'total', type: 'money', label: 'Total' },
-        ],
-      },
-    },
-  };
-  const result = render(
-    <MetaProvider meta={meta}>
-      <QueryClientProvider client={queryClient}>
-        <SlotRenderer nodes={nodes} context={ctx} state={state} />
-      </QueryClientProvider>
-    </MetaProvider>,
-  );
-  return { ...result, state, queryClient };
-}
-
-beforeEach(() => {
-  clearWidgetRegistry();
-  registerWidget(
-    {
-      name: 'table',
-      label: 'Table',
-      category: 'data',
-      schema: {},
-      binding: 'model',
-      triggers: ['rowClick', 'select', 'pageChange'],
-      container: true,
-      accepts: ['column'],
-    },
-    TableWidget as unknown as ComponentType<WidgetProps>,
-  );
-  registerWidget(
-    {
-      name: 'column',
-      label: 'Column',
-      category: 'layout',
-      schema: {},
-      binding: 'none',
-      triggers: [],
-      container: true,
-    },
-    ColumnWidget as unknown as ComponentType<WidgetProps>,
-  );
-  registerWidget(
-    {
-      name: 'text',
-      label: 'Text',
-      category: 'display',
-      schema: {},
-      binding: 'expression',
-      triggers: [],
-      container: false,
-    },
-    TestText,
-  );
-  registerWidget(
-    {
-      name: 'badge',
-      label: 'Badge',
-      category: 'display',
-      schema: {},
-      binding: 'field',
-      triggers: [],
-      container: false,
-    },
-    TestBadge,
-  );
-  mockApiClient.mockReset();
-});
-
-afterEach(() => {
-  cleanup();
-  clearWidgetRegistry();
-});
-
-const sampleData = [
-  { id: '1', customer: 'Acme Corp', total: 1500, status: 'paid' },
-  { id: '2', customer: 'Beta Inc', total: 2300, status: 'draft' },
-  { id: '3', customer: 'Gamma Ltd', total: 800, status: 'paid' },
-];
-
-function tableWithColumns(props: Record<string, unknown> = {}): WidgetNode[] {
-  return [
-    {
-      type: 'table',
-      bind: { model: { name: 'sales.order' } },
-      props: { pageSize: 20, ...props },
-      children: [
-        {
-          type: 'column',
-          props: { label: 'Customer', sortable: true, filterable: true },
-          bind: { field: 'customer' },
-        },
-        {
-          type: 'column',
-          props: { label: 'Total', align: 'right', sortable: true },
-          bind: { field: 'total' },
-        },
-        { type: 'column', props: { label: 'Status', filterable: true }, bind: { field: 'status' } },
-      ],
-    },
-  ];
-}
-
-describe('Table data binding (smart mode)', () => {
-  describe('data fetching', () => {
-    it('fetches data on mount when bind.model and pageSize are set', async () => {
-      mockApiResponse(sampleData, 3);
-      renderTable(tableWithColumns());
-
-      await waitFor(() => {
-        expect(mockApiClient).toHaveBeenCalledTimes(1);
-      });
-
-      const callUrl = mockApiClient.mock.calls[0][0] as string;
-      expect(callUrl).toContain('/api/sales/order');
-      expect(callUrl).toContain('page=1');
-      expect(callUrl).toContain('limit=20');
-    });
-
-    it('renders fetched data as rows', async () => {
-      mockApiResponse(sampleData, 3);
-      renderTable(tableWithColumns());
-
-      await waitFor(() => {
-        expect(screen.getByText('Acme Corp')).toBeInTheDocument();
-      });
-      expect(screen.getByText('Beta Inc')).toBeInTheDocument();
-      expect(screen.getByText('Gamma Ltd')).toBeInTheDocument();
-    });
-
-    it('shows loading state', () => {
-      mockApiClient.mockReturnValue(new Promise(() => {}));
-      renderTable(tableWithColumns());
-      expect(screen.getAllByRole('row').length).toBeGreaterThan(1);
-      expect(document.querySelectorAll('[data-slot="skeleton"]').length).toBeGreaterThan(0);
-    });
-  });
-
-  describe('sorting', () => {
-    it('clicking sortable header updates $sort in store', async () => {
-      mockApiResponse(sampleData, 3);
-      const state = new StateStore();
-      renderTable(tableWithColumns(), { state });
-
-      await waitFor(() => {
-        expect(screen.getByText('Acme Corp')).toBeInTheDocument();
-      });
-
-      fireEvent.click(screen.getByText('Customer'));
-      expect(state.get('$sort.sales.order')).toBe('customer');
-    });
-
-    it('sort cycles asc → desc → clear', async () => {
-      mockApiResponse(sampleData, 3);
-      const state = new StateStore();
-      renderTable(tableWithColumns(), { state });
-
-      await waitFor(() => {
-        expect(screen.getByText('Acme Corp')).toBeInTheDocument();
-      });
-
-      const header = screen.getByText('Customer');
-
-      fireEvent.click(header);
-      expect(state.get('$sort.sales.order')).toBe('customer');
-
-      mockApiResponse(sampleData, 3);
-      fireEvent.click(header);
-      expect(state.get('$sort.sales.order')).toBe('-customer');
-
-      mockApiResponse(sampleData, 3);
-      fireEvent.click(header);
-      expect(state.get('$sort.sales.order')).toBeNull();
-    });
-
-    it('clicking sort resets page to 1', async () => {
-      mockApiResponse(sampleData, 3);
-      const state = new StateStore();
-      state.set('$page.sales.order', 3);
-      renderTable(tableWithColumns(), { state });
-
-      await waitFor(() => {
-        expect(screen.getByText('Acme Corp')).toBeInTheDocument();
-      });
-
-      fireEvent.click(screen.getByText('Customer'));
-      expect(state.get('$page.sales.order')).toBe(1);
-    });
-
-    it('non-sortable column header is not clickable', async () => {
-      mockApiResponse(sampleData, 3);
-      const state = new StateStore();
-      renderTable(tableWithColumns(), { state });
-
-      await waitFor(() => {
-        expect(screen.getByText('Acme Corp')).toBeInTheDocument();
-      });
-
-      fireEvent.click(screen.getByText('Status'));
-      expect(state.get('$sort.sales.order')).toBeUndefined();
-    });
-  });
-
-  describe('pagination', () => {
-    it('renders pagination info with total', async () => {
-      mockApiResponse(sampleData, 42);
-      renderTable(tableWithColumns());
-
-      await waitFor(() => {
-        expect(screen.getByText('Acme Corp')).toBeInTheDocument();
-      });
-
-      expect(screen.getByText(/Showing 1–20 of 42/)).toBeInTheDocument();
-    });
-
-    it('next button increments page', async () => {
-      mockApiResponse(sampleData, 42);
-      const state = new StateStore();
-      renderTable(tableWithColumns(), { state });
-
-      await waitFor(() => {
-        expect(screen.getByText('Acme Corp')).toBeInTheDocument();
-      });
-
-      const nextBtn = screen.getByLabelText('Next page');
-      fireEvent.click(nextBtn);
-      expect(state.get('$page.sales.order')).toBe(2);
-    });
-
-    it('prev button is disabled on page 1', async () => {
-      mockApiResponse(sampleData, 42);
-      renderTable(tableWithColumns());
-
-      await waitFor(() => {
-        expect(screen.getByText('Acme Corp')).toBeInTheDocument();
-      });
-
-      const prevBtn = screen.getByLabelText('Previous page');
-      expect(prevBtn).toBeDisabled();
-    });
-
-    it('next button is disabled on last page', async () => {
-      mockApiResponse(sampleData, 3);
-      const state = new StateStore();
-      renderTable(tableWithColumns(), { state });
-
-      await waitFor(() => {
-        expect(screen.getByText('Acme Corp')).toBeInTheDocument();
-      });
-
-      const nextBtn = screen.getByLabelText('Next page');
-      expect(nextBtn).toBeDisabled();
-    });
-  });
-
-  describe('filter bar', () => {
-    it('renders filter button when filterable columns exist', async () => {
-      mockApiResponse(sampleData, 3);
-      renderTable(tableWithColumns());
-
-      await waitFor(() => {
-        expect(screen.getByText('Acme Corp')).toBeInTheDocument();
-      });
-
-      expect(screen.getByText('Filter')).toBeInTheDocument();
-    });
-
-    it('clicking filter shows searchable field list', async () => {
-      mockApiResponse(sampleData, 3);
-      renderTable(tableWithColumns());
-
-      await waitFor(() => {
-        expect(screen.getByText('Acme Corp')).toBeInTheDocument();
-      });
-
-      fireEvent.click(screen.getByText('Filter'));
-
-      await waitFor(() => {
-        expect(screen.getByPlaceholderText('Search fields...')).toBeInTheDocument();
-      });
-    });
-
-    it('applying a filter updates store with operator', async () => {
-      mockApiResponse(sampleData, 3);
-      const state = new StateStore();
-      renderTable(tableWithColumns(), { state });
-
-      await waitFor(() => {
-        expect(screen.getByText('Acme Corp')).toBeInTheDocument();
-      });
-
-      fireEvent.click(screen.getByText('Filter'));
-
-      await waitFor(() => {
-        expect(screen.getByPlaceholderText('Search fields...')).toBeInTheDocument();
-      });
-
-      // Click the Status field in the popover field list
-      const statusBtn = screen.getAllByRole('button').find((btn) => btn.textContent === 'Status')!;
-      fireEvent.click(statusBtn);
-
-      // Should show operator select and value input
-      const input = screen.getByPlaceholderText('Value...');
-      fireEvent.change(input, { target: { value: 'paid' } });
-      fireEvent.click(screen.getByText('Apply'));
-
-      // enum defaults to 'eq' operator, stored without suffix
-      expect(state.get('$filter.sales.order.status')).toBe('paid');
-      expect(state.get('$page.sales.order')).toBe(1);
-    });
-
-    it('removing a filter chip clears it from store', async () => {
-      const state = new StateStore();
-      state.set('$filter.sales.order.status', 'paid');
-      mockApiResponse(sampleData, 3);
-      renderTable(tableWithColumns(), { state });
-
-      await waitFor(() => {
-        expect(screen.getByText('Acme Corp')).toBeInTheDocument();
-      });
-
-      const removeBtn = screen.getByLabelText('Remove Status filter');
-      fireEvent.click(removeBtn);
-
-      expect(state.get('$filter.sales.order.status')).toBeNull();
-    });
-  });
-
-  describe('external reactivity', () => {
-    it('refetches when $filter changes externally', async () => {
-      mockApiResponse(sampleData, 3);
-      const state = new StateStore();
-      renderTable(tableWithColumns(), { state });
-
-      await waitFor(() => {
-        expect(screen.getByText('Acme Corp')).toBeInTheDocument();
-      });
-
-      const filteredData = [{ id: '1', customer: 'Acme Corp', total: 1500, status: 'paid' }];
-      mockApiResponse(filteredData, 1);
-
-      state.set('$filter.sales.order.status', 'paid');
-
-      await waitFor(() => {
-        expect(mockApiClient).toHaveBeenCalledTimes(2);
-      });
-
-      const secondCall = mockApiClient.mock.calls[1][0] as string;
-      expect(secondCall).toContain('filter%5Bstatus%5D=paid');
-    });
-  });
-
-  describe('dumb mode (no pageSize)', () => {
-    it('renders records from context without fetching', () => {
-      const nodes: WidgetNode[] = [
-        {
-          type: 'table',
-          bind: { model: { name: 'sales.order' } },
-          children: [{ type: 'column', props: { label: 'Customer' }, bind: { field: 'customer' } }],
-        },
-      ];
-
-      renderTable(nodes, { records: sampleData });
-
-      expect(screen.getByText('Acme Corp')).toBeInTheDocument();
-      expect(screen.getByText('Beta Inc')).toBeInTheDocument();
-      expect(mockApiClient).not.toHaveBeenCalled();
-    });
-
-    it('does not render pagination in dumb mode', () => {
-      const nodes: WidgetNode[] = [
-        {
-          type: 'table',
-          bind: { model: { name: 'sales.order' } },
-          children: [{ type: 'column', props: { label: 'Customer' }, bind: { field: 'customer' } }],
-        },
-      ];
-
-      renderTable(nodes, { records: sampleData });
-
-      expect(screen.queryByLabelText('Next page')).not.toBeInTheDocument();
-      expect(screen.queryByLabelText('Previous page')).not.toBeInTheDocument();
-    });
-
-    it('does not render filter bar in dumb mode', () => {
-      const nodes: WidgetNode[] = [
-        {
-          type: 'table',
-          bind: { model: { name: 'sales.order' } },
-          children: [
-            {
-              type: 'column',
-              props: { label: 'Customer', filterable: true },
-              bind: { field: 'customer' },
-            },
-          ],
-        },
-      ];
-
-      renderTable(nodes, { records: sampleData });
-
-      expect(screen.queryByText('Filter')).not.toBeInTheDocument();
-    });
-  });
-});