@object-ui/plugin-dashboard 3.0.3 → 3.1.0

package/src/__tests__/DashboardWithConfig.test.tsx

@@ -0,0 +1,276 @@
+/**
+ * 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, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { DashboardWithConfig } from '../DashboardWithConfig';
+import type { DashboardSchema } from '@object-ui/types';
+
+// Mock SchemaRenderer to avoid deep component tree
+vi.mock('@object-ui/react', () => ({
+  SchemaRenderer: ({ schema }: any) => (
+    <div data-testid="schema-renderer">{schema?.type ?? 'unknown'}</div>
+  ),
+}));
+
+const sampleSchema: DashboardSchema = {
+  type: 'dashboard',
+  columns: 3,
+  gap: 4,
+  widgets: [
+    {
+      id: 'widget-1',
+      title: 'Revenue',
+      type: 'metric',
+      component: { type: 'metric', label: 'Revenue', value: '$100K' },
+    },
+    {
+      id: 'widget-2',
+      title: 'Users',
+      type: 'bar',
+      object: 'users',
+      categoryField: 'role',
+      valueField: 'count',
+      layout: { x: 0, y: 1, w: 2, h: 1 },
+    },
+  ],
+};
+
+const sampleConfig = {
+  columns: 3,
+  gap: 4,
+  rowHeight: '120',
+  refreshInterval: '0',
+  title: 'My Dashboard',
+  showDescription: true,
+  theme: 'auto',
+};
+
+describe('DashboardWithConfig', () => {
+  it('should render the dashboard container', () => {
+    render(
+      <DashboardWithConfig
+        schema={sampleSchema}
+        config={sampleConfig}
+        onConfigSave={vi.fn()}
+      />,
+    );
+    expect(screen.getByTestId('dashboard-with-config')).toBeDefined();
+  });
+
+  it('should render the settings toggle button', () => {
+    render(
+      <DashboardWithConfig
+        schema={sampleSchema}
+        config={sampleConfig}
+        onConfigSave={vi.fn()}
+      />,
+    );
+    expect(screen.getByTestId('dashboard-config-toggle')).toBeDefined();
+    expect(screen.getByText('Settings')).toBeDefined();
+  });
+
+  it('should not show config panel by default', () => {
+    render(
+      <DashboardWithConfig
+        schema={sampleSchema}
+        config={sampleConfig}
+        onConfigSave={vi.fn()}
+      />,
+    );
+    expect(screen.queryByTestId('config-panel')).toBeNull();
+  });
+
+  it('should show config panel when defaultConfigOpen is true', () => {
+    render(
+      <DashboardWithConfig
+        schema={sampleSchema}
+        config={sampleConfig}
+        onConfigSave={vi.fn()}
+        defaultConfigOpen={true}
+      />,
+    );
+    expect(screen.getByTestId('config-panel')).toBeDefined();
+  });
+
+  it('should toggle config panel when settings button is clicked', () => {
+    render(
+      <DashboardWithConfig
+        schema={sampleSchema}
+        config={sampleConfig}
+        onConfigSave={vi.fn()}
+      />,
+    );
+    // Initially closed
+    expect(screen.queryByTestId('config-panel')).toBeNull();
+
+    // Open
+    fireEvent.click(screen.getByTestId('dashboard-config-toggle'));
+    expect(screen.getByTestId('config-panel')).toBeDefined();
+
+    // Close
+    fireEvent.click(screen.getByTestId('dashboard-config-toggle'));
+    expect(screen.queryByTestId('config-panel')).toBeNull();
+  });
+
+  it('should show dashboard breadcrumb in config panel', () => {
+    render(
+      <DashboardWithConfig
+        schema={sampleSchema}
+        config={sampleConfig}
+        onConfigSave={vi.fn()}
+        defaultConfigOpen={true}
+      />,
+    );
+    expect(screen.getByText('Dashboard')).toBeDefined();
+    expect(screen.getByText('Configuration')).toBeDefined();
+  });
+
+  it('should close config panel via close button', () => {
+    render(
+      <DashboardWithConfig
+        schema={sampleSchema}
+        config={sampleConfig}
+        onConfigSave={vi.fn()}
+        defaultConfigOpen={true}
+      />,
+    );
+    fireEvent.click(screen.getByTestId('config-panel-close'));
+    expect(screen.queryByTestId('config-panel')).toBeNull();
+  });
+
+  it('should call onConfigSave when saving dashboard config', () => {
+    const onConfigSave = vi.fn();
+    render(
+      <DashboardWithConfig
+        schema={sampleSchema}
+        config={sampleConfig}
+        onConfigSave={onConfigSave}
+        defaultConfigOpen={true}
+      />,
+    );
+    // Trigger a change to make the panel dirty
+    const rowHeightInput = screen.getByTestId('config-field-rowHeight');
+    fireEvent.change(rowHeightInput, { target: { value: '200' } });
+    // Save
+    fireEvent.click(screen.getByTestId('config-panel-save'));
+    expect(onConfigSave).toHaveBeenCalledTimes(1);
+    expect(onConfigSave.mock.calls[0][0].rowHeight).toBe('200');
+  });
+
+  it('should apply className to container', () => {
+    render(
+      <DashboardWithConfig
+        schema={sampleSchema}
+        config={sampleConfig}
+        onConfigSave={vi.fn()}
+        className="custom-class"
+      />,
+    );
+    const container = screen.getByTestId('dashboard-with-config');
+    expect(container.className).toContain('custom-class');
+  });
+
+  it('should show Dashboard > Configuration breadcrumb when no widget is selected', () => {
+    render(
+      <DashboardWithConfig
+        schema={sampleSchema}
+        config={sampleConfig}
+        onConfigSave={vi.fn()}
+        defaultConfigOpen={true}
+      />,
+    );
+    expect(screen.getByText('Dashboard')).toBeDefined();
+    expect(screen.getByText('Configuration')).toBeDefined();
+    // Widget breadcrumb should NOT be present
+    expect(screen.queryByText('Widget')).toBeNull();
+  });
+
+  it('should accept onWidgetSave prop without errors', () => {
+    const onWidgetSave = vi.fn();
+    render(
+      <DashboardWithConfig
+        schema={sampleSchema}
+        config={sampleConfig}
+        onConfigSave={vi.fn()}
+        onWidgetSave={onWidgetSave}
+        defaultConfigOpen={true}
+      />,
+    );
+    // Config panel should open showing Dashboard config by default (no widget selected)
+    expect(screen.getByText('Dashboard')).toBeDefined();
+    expect(screen.getByText('Configuration')).toBeDefined();
+    expect(screen.queryByText('Widget')).toBeNull();
+  });
+
+  it('should pass onFieldChange to WidgetConfigPanel for live preview', () => {
+    // Schema with a widget that will be selected via mocking selection state
+    const schemaWithWidget: DashboardSchema = {
+      ...sampleSchema,
+      widgets: [
+        {
+          id: 'w1',
+          title: 'Test Widget',
+          type: 'bar',
+          layout: { x: 0, y: 0, w: 2, h: 1 },
+        },
+      ],
+    };
+    const { container } = render(
+      <DashboardWithConfig
+        schema={schemaWithWidget}
+        config={sampleConfig}
+        onConfigSave={vi.fn()}
+        onWidgetSave={vi.fn()}
+        defaultConfigOpen={true}
+      />,
+    );
+    // Container should render the dashboard
+    expect(container).toBeDefined();
+    expect(screen.getByTestId('dashboard-with-config')).toBeDefined();
+  });
+
+  it('should enable design mode and pass widget selection props to DashboardRenderer when config is open', () => {
+    render(
+      <DashboardWithConfig
+        schema={sampleSchema}
+        config={sampleConfig}
+        onConfigSave={vi.fn()}
+        onWidgetSave={vi.fn()}
+        defaultConfigOpen={true}
+      />,
+    );
+    // When config panel is open, widget click overlays should be present
+    // (design mode enabled) for interactive widget selection
+    const overlays = screen.queryAllByTestId('widget-click-overlay');
+    expect(overlays.length).toBeGreaterThan(0);
+  });
+
+  it('should switch to WidgetConfigPanel when a widget is clicked in design mode', () => {
+    render(
+      <DashboardWithConfig
+        schema={sampleSchema}
+        config={sampleConfig}
+        onConfigSave={vi.fn()}
+        onWidgetSave={vi.fn()}
+        defaultConfigOpen={true}
+      />,
+    );
+    // Initially shows Dashboard > Configuration
+    expect(screen.getByText('Dashboard')).toBeDefined();
+    expect(screen.getByText('Configuration')).toBeDefined();
+    expect(screen.queryByText('Widget')).toBeNull();
+
+    // Click on a widget preview to select it
+    const widgetOverlay = screen.getByTestId('dashboard-preview-widget-widget-1');
+    fireEvent.click(widgetOverlay);
+
+    // Should now show Widget breadcrumb (WidgetConfigPanel)
+    expect(screen.getByText('Widget')).toBeDefined();
+  });
+});

package/src/__tests__/MetricCard.test.tsx

@@ -56,4 +56,27 @@ describe('MetricCard', () => {
     expect(screen.getByText('Count')).toBeInTheDocument();
     expect(screen.getByText('1234')).toBeInTheDocument();
   });
+
+  it('should resolve I18nLabel objects for title', () => {
+    render(
+      <MetricCard
+        title={{ key: 'crm.dashboard.widgets.totalRevenue', defaultValue: 'Total Revenue' }}
+        value="$45,231"
+      />
+    );
+    
+    expect(screen.getByText('Total Revenue')).toBeInTheDocument();
+  });
+
+  it('should resolve I18nLabel objects for description', () => {
+    render(
+      <MetricCard
+        title="Revenue"
+        value="$45,231"
+        description={{ key: 'crm.dashboard.trendLabel', defaultValue: 'vs last month' }}
+      />
+    );
+    
+    expect(screen.getByText('vs last month')).toBeInTheDocument();
+  });
 });

package/src/__tests__/ObjectDataTable.test.tsx

@@ -0,0 +1,122 @@
+/**
+ * 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, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { ObjectDataTable } from '../ObjectDataTable';
+import { SchemaRendererProvider } from '@object-ui/react';
+
+describe('ObjectDataTable', () => {
+  const baseSchema = {
+    type: 'object-data-table',
+    objectName: 'contacts',
+  };
+
+  it('should show loading skeleton when fetching data', async () => {
+    const dataSource = {
+      find: vi.fn(() => new Promise(() => {})), // Never resolves
+    };
+
+    const { container } = render(
+      <SchemaRendererProvider dataSource={dataSource}>
+        <ObjectDataTable schema={baseSchema} />
+      </SchemaRendererProvider>,
+    );
+
+    await waitFor(() => {
+      const loadingEl = container.querySelector('[data-testid="table-loading"]');
+      expect(loadingEl).toBeDefined();
+    });
+  });
+
+  it('should show error state on fetch failure', async () => {
+    const dataSource = {
+      find: vi.fn().mockRejectedValue(new Error('Connection refused')),
+    };
+
+    const { container } = render(
+      <SchemaRendererProvider dataSource={dataSource}>
+        <ObjectDataTable schema={baseSchema} />
+      </SchemaRendererProvider>,
+    );
+
+    await waitFor(() => {
+      const errorEl = container.querySelector('[data-testid="table-error"]');
+      expect(errorEl).toBeDefined();
+    });
+
+    expect(screen.getByText('Connection refused')).toBeDefined();
+  });
+
+  it('should show empty state when no data returned', async () => {
+    const dataSource = {
+      find: vi.fn().mockResolvedValue({ records: [] }),
+    };
+
+    const { container } = render(
+      <SchemaRendererProvider dataSource={dataSource}>
+        <ObjectDataTable schema={baseSchema} />
+      </SchemaRendererProvider>,
+    );
+
+    await waitFor(() => {
+      const emptyState = container.querySelector('[data-testid="table-empty-state"]');
+      expect(emptyState).toBeDefined();
+    });
+  });
+
+  it('should show no-data-source message when objectName is set but no dataSource', () => {
+    render(<ObjectDataTable schema={baseSchema} />);
+    expect(screen.getByText(/No data source available/)).toBeDefined();
+  });
+
+  it('should auto-derive columns from fetched data keys', async () => {
+    const dataSource = {
+      find: vi.fn().mockResolvedValue({
+        records: [
+          { firstName: 'Alice', lastName: 'Smith', email: 'alice@test.com' },
+          { firstName: 'Bob', lastName: 'Jones', email: 'bob@test.com' },
+        ],
+      }),
+    };
+
+    const schema = { ...baseSchema, objectName: 'contacts' };
+
+    const { container } = render(
+      <SchemaRendererProvider dataSource={dataSource}>
+        <ObjectDataTable schema={schema} />
+      </SchemaRendererProvider>,
+    );
+
+    // Wait for data to be fetched and rendered
+    await waitFor(() => {
+      // data-table renders via SchemaRenderer, so look for content
+      expect(container.textContent).toBeDefined();
+    });
+
+    expect(dataSource.find).toHaveBeenCalledWith('contacts', { $filter: undefined });
+  });
+
+  it('should prefer static data over fetched data', () => {
+    const dataSource = { find: vi.fn() };
+
+    const schema = {
+      ...baseSchema,
+      data: [{ name: 'Static Row', value: 42 }],
+    };
+
+    render(
+      <SchemaRendererProvider dataSource={dataSource}>
+        <ObjectDataTable schema={schema} />
+      </SchemaRendererProvider>,
+    );
+
+    expect(dataSource.find).not.toHaveBeenCalled();
+  });
+});

package/src/__tests__/ObjectPivotTable.test.tsx

@@ -0,0 +1,192 @@
+/**
+ * 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, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { ObjectPivotTable } from '../ObjectPivotTable';
+import { SchemaRendererProvider } from '@object-ui/react';
+
+describe('ObjectPivotTable', () => {
+  const baseSchema = {
+    type: 'pivot' as const,
+    rowField: 'region',
+    columnField: 'quarter',
+    valueField: 'revenue',
+    aggregation: 'sum' as const,
+  };
+
+  it('should render PivotTable with static data', () => {
+    const schema = {
+      ...baseSchema,
+      data: [
+        { region: 'North', quarter: 'Q1', revenue: 100 },
+        { region: 'South', quarter: 'Q1', revenue: 200 },
+      ],
+    };
+
+    render(<ObjectPivotTable schema={schema} />);
+    expect(screen.getByText('North')).toBeDefined();
+    expect(screen.getByText('South')).toBeDefined();
+  });
+
+  it('should show loading skeleton when fetching data', async () => {
+    // A dataSource that resolves slowly
+    const dataSource = {
+      find: vi.fn(() => new Promise(() => {})), // Never resolves
+    };
+
+    const schema = {
+      ...baseSchema,
+      objectName: 'sales',
+    };
+
+    const { container } = render(
+      <SchemaRendererProvider dataSource={dataSource}>
+        <ObjectPivotTable schema={schema} />
+      </SchemaRendererProvider>,
+    );
+
+    // Should show loading skeleton
+    await waitFor(() => {
+      const loadingEl = container.querySelector('[data-testid="pivot-loading"]');
+      expect(loadingEl).toBeDefined();
+    });
+  });
+
+  it('should show error state on fetch failure', async () => {
+    const dataSource = {
+      find: vi.fn().mockRejectedValue(new Error('Network error')),
+    };
+
+    const schema = {
+      ...baseSchema,
+      objectName: 'sales',
+    };
+
+    const { container } = render(
+      <SchemaRendererProvider dataSource={dataSource}>
+        <ObjectPivotTable schema={schema} />
+      </SchemaRendererProvider>,
+    );
+
+    await waitFor(() => {
+      const errorEl = container.querySelector('[data-testid="pivot-error"]');
+      expect(errorEl).not.toBeNull();
+    });
+
+    expect(screen.getByText('Network error')).toBeDefined();
+  });
+
+  it('should render fetched data in PivotTable', async () => {
+    const dataSource = {
+      find: vi.fn().mockResolvedValue({
+        records: [
+          { region: 'East', quarter: 'Q1', revenue: 500 },
+          { region: 'West', quarter: 'Q2', revenue: 300 },
+        ],
+      }),
+    };
+
+    const schema = {
+      ...baseSchema,
+      objectName: 'sales',
+    };
+
+    render(
+      <SchemaRendererProvider dataSource={dataSource}>
+        <ObjectPivotTable schema={schema} />
+      </SchemaRendererProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('East')).toBeDefined();
+      expect(screen.getByText('West')).toBeDefined();
+    });
+
+    expect(dataSource.find).toHaveBeenCalledWith('sales', { $filter: undefined });
+  });
+
+  it('should show empty state when no data returned', async () => {
+    const dataSource = {
+      find: vi.fn().mockResolvedValue({ records: [] }),
+    };
+
+    const schema = {
+      ...baseSchema,
+      objectName: 'sales',
+    };
+
+    const { container } = render(
+      <SchemaRendererProvider dataSource={dataSource}>
+        <ObjectPivotTable schema={schema} />
+      </SchemaRendererProvider>,
+    );
+
+    await waitFor(() => {
+      const emptyState = container.querySelector('[data-testid="pivot-empty-state"]');
+      expect(emptyState).toBeDefined();
+    });
+  });
+
+  it('should prefer static data over fetched data', () => {
+    const dataSource = {
+      find: vi.fn(),
+    };
+
+    const schema = {
+      ...baseSchema,
+      objectName: 'sales',
+      data: [
+        { region: 'Static', quarter: 'Q1', revenue: 999 },
+      ],
+    };
+
+    render(
+      <SchemaRendererProvider dataSource={dataSource}>
+        <ObjectPivotTable schema={schema} />
+      </SchemaRendererProvider>,
+    );
+
+    expect(screen.getByText('Static')).toBeDefined();
+    expect(dataSource.find).not.toHaveBeenCalled();
+  });
+
+  it('should show no-data-source message when objectName is set but no dataSource available', () => {
+    const schema = {
+      ...baseSchema,
+      objectName: 'sales',
+    };
+
+    render(<ObjectPivotTable schema={schema} />);
+    expect(screen.getByText(/No data source available/)).toBeDefined();
+  });
+
+  it('should render title in all states', async () => {
+    const dataSource = {
+      find: vi.fn().mockRejectedValue(new Error('fail')),
+    };
+
+    const schema = {
+      ...baseSchema,
+      objectName: 'sales',
+      title: 'Revenue Pivot',
+    };
+
+    render(
+      <SchemaRendererProvider dataSource={dataSource}>
+        <ObjectPivotTable schema={schema} />
+      </SchemaRendererProvider>,
+    );
+
+    // Title shows even in error state
+    await waitFor(() => {
+      expect(screen.getByText('Revenue Pivot')).toBeDefined();
+    });
+  });
+});