Merge pull request #222 from objectstack-ai/copilot/add-objectui-integration

Author: hotlong

apps/web/src/__tests__/components/ActivityTimeline.test.tsx

@@ -0,0 +1,69 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ActivityTimeline } from '@/components/workflow/ActivityTimeline';
+import type { ActivityEntry } from '@/types/workflow';
+
+const sampleActivities: ActivityEntry[] = [
+  {
+    id: 'act-1',
+    type: 'record_created',
+    timestamp: '2025-01-01T10:00:00Z',
+    user: 'Alice',
+    summary: 'Created record',
+  },
+  {
+    id: 'act-2',
+    type: 'field_changed',
+    timestamp: '2025-01-02T14:00:00Z',
+    user: 'Bob',
+    summary: 'Updated status',
+    changes: [{ field: 'status', fieldLabel: 'Status', oldValue: 'draft', newValue: 'sent' }],
+  },
+  {
+    id: 'act-3',
+    type: 'comment',
+    timestamp: '2025-01-03T09:00:00Z',
+    user: 'Carol',
+    summary: 'Added a comment',
+    comment: 'This looks good!',
+  },
+];
+
+describe('ActivityTimeline', () => {
+  it('renders empty state when no activities', () => {
+    render(<ActivityTimeline activities={[]} />);
+    expect(screen.getByText('No activity yet.')).toBeDefined();
+  });
+
+  it('renders activity entries', () => {
+    render(<ActivityTimeline activities={sampleActivities} />);
+    expect(screen.getByText('Alice')).toBeDefined();
+    expect(screen.getByText('Bob')).toBeDefined();
+    expect(screen.getByText('Carol')).toBeDefined();
+  });
+
+  it('renders field changes with old/new values', () => {
+    render(<ActivityTimeline activities={sampleActivities} />);
+    expect(screen.getByText('Status:')).toBeDefined();
+    expect(screen.getByText('draft')).toBeDefined();
+    expect(screen.getByText('sent')).toBeDefined();
+  });
+
+  it('renders comment body', () => {
+    render(<ActivityTimeline activities={sampleActivities} />);
+    expect(screen.getByText('This looks good!')).toBeDefined();
+  });
+
+  it('respects maxItems prop', () => {
+    render(<ActivityTimeline activities={sampleActivities} maxItems={1} />);
+    expect(screen.getByText('Alice')).toBeDefined();
+    // Bob and Carol should not be visible
+    expect(screen.queryByText('Bob')).toBeNull();
+    expect(screen.getByText('+2 more activities')).toBeDefined();
+  });
+
+  it('has data-testid attribute', () => {
+    render(<ActivityTimeline activities={sampleActivities} />);
+    expect(screen.getByTestId('activity-timeline')).toBeDefined();
+  });
+});

apps/web/src/__tests__/components/ApprovalActions.test.tsx

@@ -0,0 +1,64 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ApprovalActions } from '@/components/workflow/ApprovalActions';
+import type { WorkflowStatus, WorkflowTransition } from '@/types/workflow';
+
+function makeStatus(transitions: WorkflowTransition[]): WorkflowStatus {
+  return {
+    workflowName: 'test_flow',
+    currentState: 'pending',
+    currentStateLabel: 'Pending',
+    color: 'yellow',
+    availableTransitions: transitions,
+  };
+}
+
+describe('ApprovalActions', () => {
+  it('renders nothing when no transitions available', () => {
+    const { container } = render(
+      <ApprovalActions status={makeStatus([])} onTransition={() => {}} />,
+    );
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('renders approve button', () => {
+    const transitions: WorkflowTransition[] = [
+      { name: 'approve', label: 'Approve', from: 'pending', to: 'approved' },
+    ];
+    render(<ApprovalActions status={makeStatus(transitions)} onTransition={() => {}} />);
+    expect(screen.getByText('Approve')).toBeDefined();
+  });
+
+  it('renders reject button with destructive variant', () => {
+    const transitions: WorkflowTransition[] = [
+      { name: 'reject', label: 'Reject', from: 'pending', to: 'rejected' },
+    ];
+    render(<ApprovalActions status={makeStatus(transitions)} onTransition={() => {}} />);
+    expect(screen.getByText('Reject')).toBeDefined();
+  });
+
+  it('calls onTransition when button clicked', () => {
+    const onTransition = vi.fn();
+    const transitions: WorkflowTransition[] = [
+      { name: 'approve', label: 'Approve', from: 'pending', to: 'approved' },
+    ];
+    render(<ApprovalActions status={makeStatus(transitions)} onTransition={onTransition} />);
+    fireEvent.click(screen.getByText('Approve'));
+    expect(onTransition).toHaveBeenCalledWith(transitions[0]);
+  });
+
+  it('disables buttons when isExecuting is true', () => {
+    const transitions: WorkflowTransition[] = [
+      { name: 'approve', label: 'Approve', from: 'pending', to: 'approved' },
+    ];
+    render(
+      <ApprovalActions
+        status={makeStatus(transitions)}
+        onTransition={() => {}}
+        isExecuting
+      />,
+    );
+    const button = screen.getByText('Approve').closest('button');
+    expect(button?.disabled).toBe(true);
+  });
+});

apps/web/src/__tests__/components/ChartWidget.test.tsx

@@ -0,0 +1,68 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ChartWidget } from '@/components/objectui/ChartWidget';
+import type { ChartConfig } from '@/types/workflow';
+
+describe('ChartWidget', () => {
+  it('renders number chart', () => {
+    const config: ChartConfig = {
+      type: 'number',
+      title: 'Total Revenue',
+      data: [{ label: 'Revenue', value: 150000 }],
+    };
+    render(<ChartWidget config={config} />);
+    expect(screen.getByText('Total Revenue')).toBeDefined();
+    expect(screen.getByText('150,000')).toBeDefined();
+  });
+
+  it('renders bar chart with labels', () => {
+    const config: ChartConfig = {
+      type: 'bar',
+      title: 'Leads by Status',
+      data: [
+        { label: 'New', value: 10 },
+        { label: 'Qualified', value: 5 },
+      ],
+    };
+    render(<ChartWidget config={config} />);
+    expect(screen.getByText('Leads by Status')).toBeDefined();
+    expect(screen.getByText('New')).toBeDefined();
+    expect(screen.getByText('Qualified')).toBeDefined();
+  });
+
+  it('renders pie chart with legend', () => {
+    const config: ChartConfig = {
+      type: 'pie',
+      title: 'Distribution',
+      data: [
+        { label: 'A', value: 30 },
+        { label: 'B', value: 70 },
+      ],
+    };
+    render(<ChartWidget config={config} />);
+    expect(screen.getByText('Distribution')).toBeDefined();
+    expect(screen.getByText('A')).toBeDefined();
+    expect(screen.getByText('B')).toBeDefined();
+  });
+
+  it('renders description when provided', () => {
+    const config: ChartConfig = {
+      type: 'number',
+      title: 'Title',
+      description: 'Some description',
+      data: [{ label: 'X', value: 1 }],
+    };
+    render(<ChartWidget config={config} />);
+    expect(screen.getByText('Some description')).toBeDefined();
+  });
+
+  it('has data-testid attribute', () => {
+    const config: ChartConfig = {
+      type: 'number',
+      title: 'Test',
+      data: [{ label: 'X', value: 1 }],
+    };
+    render(<ChartWidget config={config} />);
+    expect(screen.getByTestId('chart-widget')).toBeDefined();
+  });
+});

apps/web/src/__tests__/components/ViewSwitcher.test.tsx

@@ -0,0 +1,113 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ViewSwitcher, findKanbanField } from '@/components/objectui/ViewSwitcher';
+import type { ObjectDefinition } from '@/types/metadata';
+import { vi } from 'vitest';
+
+const taskObjectDef: ObjectDefinition = {
+  name: 'task',
+  label: 'Task',
+  fields: {
+    id: { type: 'text', label: 'ID', readonly: true },
+    title: { type: 'text', label: 'Title' },
+    status: {
+      type: 'select',
+      label: 'Status',
+      options: [
+        { label: 'To Do', value: 'todo' },
+        { label: 'In Progress', value: 'in_progress' },
+        { label: 'Done', value: 'done' },
+      ],
+    },
+    due_date: { type: 'datetime', label: 'Due Date' },
+  },
+};
+
+const noSelectObjectDef: ObjectDefinition = {
+  name: 'note',
+  label: 'Note',
+  fields: {
+    id: { type: 'text', label: 'ID', readonly: true },
+    content: { type: 'textarea', label: 'Content' },
+  },
+};
+
+describe('findKanbanField', () => {
+  it('returns status field for object with select fields', () => {
+    expect(findKanbanField(taskObjectDef)).toBe('status');
+  });
+
+  it('returns undefined for object without select fields', () => {
+    expect(findKanbanField(noSelectObjectDef)).toBeUndefined();
+  });
+
+  it('prefers status/stage/state/priority names', () => {
+    const objectDef: ObjectDefinition = {
+      name: 'test',
+      label: 'Test',
+      fields: {
+        category: {
+          type: 'select',
+          label: 'Category',
+          options: [{ label: 'A', value: 'a' }, { label: 'B', value: 'b' }],
+        },
+        priority: {
+          type: 'select',
+          label: 'Priority',
+          options: [{ label: 'Low', value: 'low' }, { label: 'High', value: 'high' }],
+        },
+      },
+    };
+    expect(findKanbanField(objectDef)).toBe('priority');
+  });
+});
+
+describe('ViewSwitcher', () => {
+  it('renders all three view buttons', () => {
+    render(<ViewSwitcher currentView="table" onViewChange={() => {}} />);
+    // Three buttons should exist
+    const buttons = screen.getAllByRole('button');
+    expect(buttons.length).toBe(3);
+  });
+
+  it('calls onViewChange when a button is clicked', () => {
+    const onViewChange = vi.fn();
+    render(
+      <ViewSwitcher
+        currentView="table"
+        onViewChange={onViewChange}
+        objectDef={taskObjectDef}
+      />,
+    );
+    // Click the kanban button (second button)
+    const buttons = screen.getAllByRole('button');
+    fireEvent.click(buttons[1]); // Kanban
+    expect(onViewChange).toHaveBeenCalledWith('kanban');
+  });
+
+  it('disables kanban when no select field available', () => {
+    render(
+      <ViewSwitcher
+        currentView="table"
+        onViewChange={() => {}}
+        objectDef={noSelectObjectDef}
+      />,
+    );
+    const buttons = screen.getAllByRole('button');
+    // Kanban button should be disabled
+    expect(buttons[1].hasAttribute('disabled')).toBe(true);
+  });
+
+  it('enables kanban when select field is available', () => {
+    render(
+      <ViewSwitcher
+        currentView="table"
+        onViewChange={() => {}}
+        objectDef={taskObjectDef}
+      />,
+    );
+    const buttons = screen.getAllByRole('button');
+    // Kanban button should NOT be disabled
+    expect(buttons[1].hasAttribute('disabled')).toBe(false);
+  });
+});

apps/web/src/__tests__/components/WorkflowStatusBadge.test.tsx

@@ -0,0 +1,53 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { WorkflowStatusBadge } from '@/components/workflow/WorkflowStatusBadge';
+import type { WorkflowStatus } from '@/types/workflow';
+
+function makeStatus(overrides?: Partial<WorkflowStatus>): WorkflowStatus {
+  return {
+    workflowName: 'test_flow',
+    currentState: 'pending',
+    currentStateLabel: 'Pending',
+    color: 'yellow',
+    availableTransitions: [],
+    ...overrides,
+  };
+}
+
+describe('WorkflowStatusBadge', () => {
+  it('renders the current state label', () => {
+    render(<WorkflowStatusBadge status={makeStatus()} />);
+    expect(screen.getByText('Pending')).toBeDefined();
+  });
+
+  it('renders with green color for approved state', () => {
+    render(
+      <WorkflowStatusBadge
+        status={makeStatus({ currentStateLabel: 'Approved', color: 'green' })}
+      />,
+    );
+    expect(screen.getByText('Approved')).toBeDefined();
+  });
+
+  it('shows workflow name when showWorkflowName is true', () => {
+    render(
+      <WorkflowStatusBadge
+        status={makeStatus({ workflowName: 'leave_flow' })}
+        showWorkflowName
+      />,
+    );
+    expect(screen.getByText('leave_flow:')).toBeDefined();
+  });
+
+  it('hides workflow name by default', () => {
+    const { container } = render(
+      <WorkflowStatusBadge status={makeStatus({ workflowName: 'leave_flow' })} />,
+    );
+    expect(container.textContent).not.toContain('leave_flow:');
+  });
+
+  it('has data-testid attribute', () => {
+    render(<WorkflowStatusBadge status={makeStatus()} />);
+    expect(screen.getByTestId('workflow-status-badge')).toBeDefined();
+  });
+});