@object-ui/react 3.0.2 → 3.1.0

package/src/spec-bridge/__tests__/SpecBridge.test.ts

@@ -0,0 +1,550 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { SpecBridge } from '../SpecBridge';
+import { bridgeListView } from '../bridges/list-view';
+import { bridgeFormView } from '../bridges/form-view';
+import { bridgePage } from '../bridges/page';
+import { bridgeDashboard } from '../bridges/dashboard';
+import type { BridgeFn } from '../types';
+
+describe('SpecBridge', () => {
+  describe('class orchestration', () => {
+    it('registers built-in bridges on construction', () => {
+      const bridge = new SpecBridge();
+      // All four built-in types should work without error
+      expect(() => bridge.transform('list', {})).not.toThrow();
+      expect(() => bridge.transform('form', {})).not.toThrow();
+      expect(() => bridge.transform('page', {})).not.toThrow();
+      expect(() => bridge.transform('dashboard', {})).not.toThrow();
+    });
+
+    it('throws for unknown spec types', () => {
+      const bridge = new SpecBridge();
+      expect(() => bridge.transform('unknown', {})).toThrow(
+        'No bridge registered for spec type: unknown',
+      );
+    });
+
+    it('allows custom bridge registration', () => {
+      const bridge = new SpecBridge();
+      const customBridge: BridgeFn = (spec) => ({
+        type: 'custom-widget',
+        id: spec.id,
+      });
+      bridge.register('custom', customBridge);
+
+      const node = bridge.transform('custom', { id: 'my-custom' });
+      expect(node.type).toBe('custom-widget');
+      expect(node.id).toBe('my-custom');
+    });
+
+    it('allows overriding built-in bridges', () => {
+      const bridge = new SpecBridge();
+      const override: BridgeFn = () => ({ type: 'my-list' });
+      bridge.register('list', override);
+
+      const node = bridge.transformListView({});
+      expect(node.type).toBe('my-list');
+    });
+
+    it('passes context to bridge functions', () => {
+      const bridge = new SpecBridge({
+        user: { role: 'admin' },
+        variables: { theme: 'dark' },
+      });
+      const spy: BridgeFn = (_spec, ctx) => ({
+        type: 'test',
+        user: ctx.user,
+        variables: ctx.variables,
+      });
+      bridge.register('test', spy);
+
+      const node = bridge.transform('test', {});
+      expect(node.user).toEqual({ role: 'admin' });
+      expect(node.variables).toEqual({ theme: 'dark' });
+    });
+
+    it('updates context via updateContext', () => {
+      const bridge = new SpecBridge({ user: { role: 'viewer' } });
+      bridge.updateContext({ user: { role: 'admin' } });
+
+      const spy: BridgeFn = (_spec, ctx) => ({
+        type: 'test',
+        role: ctx.user?.role,
+      });
+      bridge.register('ctx-test', spy);
+
+      const node = bridge.transform('ctx-test', {});
+      expect(node.role).toBe('admin');
+    });
+  });
+
+  describe('bridgeListView', () => {
+    it('transforms a basic list view spec', () => {
+      const spec = {
+        name: 'accounts_list',
+        label: 'All Accounts',
+        type: 'grid',
+        columns: [
+          { field: 'name', label: 'Account Name', width: 200, sortable: true },
+          { field: 'industry', label: 'Industry', width: 150 },
+        ],
+        data: { provider: 'object', object: 'Account' },
+        selection: { mode: 'multiple' },
+        pagination: { pageSize: 25 },
+      };
+
+      const bridge = new SpecBridge();
+      const node = bridge.transformListView(spec);
+
+      expect(node.type).toBe('object-grid');
+      expect(node.id).toBe('accounts_list');
+      expect(node.label).toBe('All Accounts');
+      expect(node.columns).toHaveLength(2);
+      expect(node.columns[0].accessorKey).toBe('name');
+      expect(node.columns[0].header).toBe('Account Name');
+      expect(node.columns[0].width).toBe(200);
+      expect(node.columns[0].sortable).toBe(true);
+      expect(node.columns[1].accessorKey).toBe('industry');
+      expect(node.data).toEqual({ provider: 'object', object: 'Account' });
+      expect(node.selection).toEqual({ mode: 'multiple' });
+      expect(node.pagination).toEqual({ pageSize: 25 });
+    });
+
+    it('uses field name as header fallback', () => {
+      const node = bridgeListView(
+        { columns: [{ field: 'email' }] },
+        {},
+      );
+      expect(node.columns[0].header).toBe('email');
+    });
+
+    it('maps column properties correctly', () => {
+      const node = bridgeListView(
+        {
+          columns: [
+            {
+              field: 'status',
+              label: 'Status',
+              align: 'center',
+              hidden: false,
+              resizable: true,
+              wrap: true,
+              type: 'badge',
+              pinned: 'left',
+              summary: { type: 'count' },
+              link: { href: '/status' },
+              action: { type: 'navigate' },
+            },
+          ],
+        },
+        {},
+      );
+
+      const col = node.columns[0];
+      expect(col.align).toBe('center');
+      expect(col.hidden).toBe(false);
+      expect(col.resizable).toBe(true);
+      expect(col.wrap).toBe(true);
+      expect(col.type).toBe('badge');
+      expect(col.pinned).toBe('left');
+      expect(col.summary).toEqual({ type: 'count' });
+      expect(col.link).toEqual({ href: '/status' });
+      expect(col.action).toEqual({ type: 'navigate' });
+    });
+
+    it('maps rowHeight to density', () => {
+      const compact = bridgeListView({ rowHeight: 'compact' }, {});
+      expect(compact.density).toBe('compact');
+
+      const comfortable = bridgeListView({ rowHeight: 'comfortable' }, {});
+      expect(comfortable.density).toBe('comfortable');
+
+      const spacious = bridgeListView({ rowHeight: 'spacious' }, {});
+      expect(spacious.density).toBe('spacious');
+
+      const small = bridgeListView({ rowHeight: 'small' }, {});
+      expect(small.density).toBe('compact');
+
+      const short = bridgeListView({ rowHeight: 'short' }, {});
+      expect(short.density).toBe('compact');
+
+      const extraTall = bridgeListView({ rowHeight: 'extra_tall' }, {});
+      expect(extraTall.density).toBe('spacious');
+    });
+
+    it('includes optional list properties', () => {
+      const node = bridgeListView(
+        {
+          sort: { field: 'name', direction: 'asc' },
+          filter: { status: 'active' },
+          grouping: { field: 'region' },
+          rowColor: { field: 'priority' },
+          searchableFields: ['name', 'email'],
+          quickFilters: [{ field: 'status', values: ['active'] }],
+        },
+        {},
+      );
+
+      expect(node.sort).toEqual({ field: 'name', direction: 'asc' });
+      expect(node.filter).toEqual({ status: 'active' });
+      expect(node.grouping).toEqual({ field: 'region' });
+      expect(node.rowColor).toEqual({ field: 'priority' });
+      expect(node.searchableFields).toEqual(['name', 'email']);
+      expect(node.quickFilters).toHaveLength(1);
+    });
+
+    it('handles empty spec gracefully', () => {
+      const node = bridgeListView({}, {});
+      expect(node.type).toBe('object-grid');
+      expect(node.columns).toEqual([]);
+    });
+  });
+
+  describe('bridgeFormView', () => {
+    it('transforms a basic form view spec', () => {
+      const spec = {
+        type: 'create',
+        data: { provider: 'object', object: 'Contact' },
+        sections: [
+          {
+            label: 'Basic Info',
+            columns: 2,
+            fields: [
+              { field: 'firstName', label: 'First Name', required: true },
+              { field: 'lastName', label: 'Last Name', required: true },
+              { field: 'email', label: 'Email', placeholder: 'you@example.com' },
+            ],
+          },
+        ],
+      };
+
+      const bridge = new SpecBridge();
+      const node = bridge.transformFormView(spec);
+
+      expect(node.type).toBe('object-form');
+      expect(node.id).toBe('form-create');
+      expect(node.data).toEqual({ provider: 'object', object: 'Contact' });
+      expect(node.sections).toHaveLength(1);
+      expect(node.sections[0].label).toBe('Basic Info');
+      expect(node.sections[0].columns).toBe(2);
+      expect(node.sections[0].fields).toHaveLength(3);
+      expect(node.sections[0].fields[0].name).toBe('firstName');
+      expect(node.sections[0].fields[0].required).toBe(true);
+    });
+
+    it('maps field properties correctly', () => {
+      const node = bridgeFormView(
+        {
+          sections: [
+            {
+              fields: [
+                {
+                  field: 'notes',
+                  label: 'Notes',
+                  placeholder: 'Enter notes',
+                  helpText: 'Keep it brief',
+                  readonly: true,
+                  hidden: false,
+                  colSpan: 2,
+                  widget: 'textarea',
+                  dependsOn: ['status'],
+                  visibleOn: '${status === "active"}',
+                },
+              ],
+            },
+          ],
+        },
+        {},
+      );
+
+      const field = node.sections[0].fields[0];
+      expect(field.name).toBe('notes');
+      expect(field.label).toBe('Notes');
+      expect(field.placeholder).toBe('Enter notes');
+      expect(field.helpText).toBe('Keep it brief');
+      expect(field.readonly).toBe(true);
+      expect(field.hidden).toBe(false);
+      expect(field.colSpan).toBe(2);
+      expect(field.widget).toBe('textarea');
+      expect(field.dependsOn).toEqual(['status']);
+      expect(field.visibleOn).toBe('${status === "active"}');
+    });
+
+    it('maps section properties correctly', () => {
+      const node = bridgeFormView(
+        {
+          sections: [
+            {
+              label: 'Advanced',
+              collapsible: true,
+              collapsed: true,
+              columns: 3,
+              fields: [],
+            },
+          ],
+        },
+        {},
+      );
+
+      const section = node.sections[0];
+      expect(section.label).toBe('Advanced');
+      expect(section.collapsible).toBe(true);
+      expect(section.collapsed).toBe(true);
+      expect(section.columns).toBe(3);
+    });
+
+    it('uses default id when type is not specified', () => {
+      const node = bridgeFormView({}, {});
+      expect(node.id).toBe('form-default');
+    });
+
+    it('uses field name as label fallback', () => {
+      const node = bridgeFormView(
+        { sections: [{ fields: [{ field: 'age' }] }] },
+        {},
+      );
+      expect(node.sections[0].fields[0].label).toBe('age');
+    });
+
+    it('passes groups through', () => {
+      const node = bridgeFormView(
+        { groups: [{ name: 'g1', label: 'Group 1' }] },
+        {},
+      );
+      expect(node.groups).toEqual([{ name: 'g1', label: 'Group 1' }]);
+    });
+  });
+
+  describe('bridgePage', () => {
+    it('transforms a basic page spec', () => {
+      const spec = {
+        name: 'account_detail',
+        label: 'Account Detail',
+        type: 'detail',
+        variables: { accountId: '123' },
+        regions: [
+          {
+            name: 'main',
+            components: [
+              {
+                type: 'ui.heading',
+                id: 'title',
+                label: 'Account Details',
+                properties: { level: 2 },
+              },
+              {
+                type: 'ui.card',
+                id: 'info-card',
+                className: 'mt-4',
+              },
+            ],
+          },
+        ],
+      };
+
+      const bridge = new SpecBridge();
+      const node = bridge.transformPage(spec);
+
+      expect(node.type).toBe('page');
+      expect(node.id).toBe('account_detail');
+      expect(node.label).toBe('Account Detail');
+      expect(node.pageType).toBe('detail');
+      expect(node.variables).toEqual({ accountId: '123' });
+      expect(Array.isArray(node.body)).toBe(true);
+
+      const regions = node.body as any[];
+      expect(regions).toHaveLength(1);
+      expect(regions[0].type).toBe('page-region');
+      expect(regions[0].id).toBe('main');
+
+      const components = regions[0].body as any[];
+      expect(components).toHaveLength(2);
+      expect(components[0].type).toBe('ui.heading');
+      expect(components[0].level).toBe(2);
+      expect(components[1].className).toBe('mt-4');
+    });
+
+    it('maps component properties and events', () => {
+      const node = bridgePage(
+        {
+          regions: [
+            {
+              components: [
+                {
+                  type: 'ui.button',
+                  id: 'save-btn',
+                  label: 'Save',
+                  events: { onClick: 'save' },
+                  visibility: '${canEdit}',
+                  dataSource: { provider: 'api', read: '/api/data' },
+                  responsive: { sm: 'hidden' },
+                  aria: { label: 'Save record' },
+                },
+              ],
+            },
+          ],
+        },
+        {},
+      );
+
+      const regions = node.body as any[];
+      const comp = regions[0].body[0];
+      expect(comp.type).toBe('ui.button');
+      expect(comp.label).toBe('Save');
+      expect(comp.events).toEqual({ onClick: 'save' });
+      expect(comp.visibility).toBe('${canEdit}');
+      expect(comp.dataSource).toEqual({ provider: 'api', read: '/api/data' });
+      expect(comp.responsive).toEqual({ sm: 'hidden' });
+      expect(comp.aria).toEqual({ label: 'Save record' });
+    });
+
+    it('includes template and object when present', () => {
+      const node = bridgePage(
+        { template: 'two-column', object: 'Account' },
+        {},
+      );
+      expect(node.template).toBe('two-column');
+      expect(node.object).toBe('Account');
+    });
+
+    it('handles empty regions gracefully', () => {
+      const node = bridgePage({}, {});
+      expect(node.type).toBe('page');
+      expect(node.body).toEqual([]);
+    });
+  });
+
+  describe('bridgeDashboard', () => {
+    it('transforms a basic dashboard spec', () => {
+      const spec = {
+        name: 'sales_dashboard',
+        label: 'Sales Dashboard',
+        widgets: [
+          {
+            title: 'Revenue',
+            type: 'bar-chart',
+            object: 'Opportunity',
+            categoryField: 'stage',
+            valueField: 'amount',
+            aggregate: 'sum',
+          },
+          {
+            title: 'Pipeline',
+            type: 'metric',
+            object: 'Opportunity',
+            valueField: 'count',
+          },
+        ],
+        header: { title: 'Sales Overview' },
+        globalFilters: [
+          { field: 'region', type: 'select' },
+        ],
+      };
+
+      const bridge = new SpecBridge();
+      const node = bridge.transformDashboard(spec);
+
+      expect(node.type).toBe('dashboard');
+      expect(node.id).toBe('sales_dashboard');
+      expect(node.label).toBe('Sales Dashboard');
+
+      const body = node.body as any[];
+      // header + filter-bar + widget-grid
+      expect(body).toHaveLength(3);
+      expect(body[0].type).toBe('dashboard-header');
+      expect(body[0].title).toBe('Sales Overview');
+      expect(body[1].type).toBe('filter-bar');
+      expect(body[1].filters).toHaveLength(1);
+
+      const widgetGrid = body[2];
+      expect(widgetGrid.type).toBe('widget-grid');
+      const widgets = widgetGrid.body as any[];
+      expect(widgets).toHaveLength(2);
+      expect(widgets[0].type).toBe('bar-chart');
+      expect(widgets[0].title).toBe('Revenue');
+      expect(widgets[0].categoryField).toBe('stage');
+      expect(widgets[0].valueField).toBe('amount');
+      expect(widgets[0].aggregate).toBe('sum');
+      expect(widgets[1].type).toBe('metric');
+    });
+
+    it('maps widget properties correctly', () => {
+      const node = bridgeDashboard(
+        {
+          widgets: [
+            {
+              title: 'Chart',
+              description: 'A chart',
+              type: 'line-chart',
+              chartConfig: { smooth: true },
+              colorVariant: 'blue',
+              object: 'Deal',
+              filter: { status: 'won' },
+              categoryField: 'month',
+              valueField: 'revenue',
+              aggregate: 'avg',
+              measures: [{ field: 'revenue', agg: 'sum' }],
+              layout: { x: 0, y: 0, w: 6, h: 4 },
+            },
+          ],
+        },
+        {},
+      );
+
+      const widgetGrid = (node.body as any[])[0];
+      const widget = widgetGrid.body[0];
+      expect(widget.title).toBe('Chart');
+      expect(widget.description).toBe('A chart');
+      expect(widget.chartConfig).toEqual({ smooth: true });
+      expect(widget.colorVariant).toBe('blue');
+      expect(widget.object).toBe('Deal');
+      expect(widget.filter).toEqual({ status: 'won' });
+      expect(widget.measures).toHaveLength(1);
+      expect(widget.layout).toEqual({ x: 0, y: 0, w: 6, h: 4 });
+    });
+
+    it('omits header and filters when not present', () => {
+      const node = bridgeDashboard({ widgets: [] }, {});
+      const body = node.body as any[];
+      // Only widget-grid
+      expect(body).toHaveLength(1);
+      expect(body[0].type).toBe('widget-grid');
+    });
+
+    it('assigns sequential widget ids', () => {
+      const node = bridgeDashboard(
+        {
+          widgets: [
+            { title: 'A', type: 'metric' },
+            { title: 'B', type: 'metric' },
+            { title: 'C', type: 'metric' },
+          ],
+        },
+        {},
+      );
+
+      const widgetGrid = (node.body as any[])[0];
+      const widgets = widgetGrid.body as any[];
+      expect(widgets[0].id).toBe('widget-0');
+      expect(widgets[1].id).toBe('widget-1');
+      expect(widgets[2].id).toBe('widget-2');
+    });
+
+    it('defaults widget type to chart', () => {
+      const node = bridgeDashboard(
+        { widgets: [{ title: 'Untitled' }] },
+        {},
+      );
+      const widgetGrid = (node.body as any[])[0];
+      expect(widgetGrid.body[0].type).toBe('chart');
+    });
+  });
+});