@object-ui/plugin-dashboard 3.3.0 → 3.3.1

package/src/__tests__/DashboardWithConfig.test.tsx

@@ -1,276 +0,0 @@
-/**
- * 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

@@ -1,107 +0,0 @@
-/**
- * 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 { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { MetricCard } from '../MetricCard';
-
-describe('MetricCard', () => {
-  it('should render metric card with title and value', () => {
-    render(<MetricCard title="Total Users" value="1,234" />);
-    
-    expect(screen.getByText('Total Users')).toBeInTheDocument();
-    expect(screen.getByText('1,234')).toBeInTheDocument();
-  });
-
-  it('should render trend indicator when trend is provided', () => {
-    render(
-      <MetricCard
-        title="Revenue"
-        value="$45,231"
-        trend="up"
-        trendValue="+12%"
-        description="vs last month"
-      />
-    );
-    
-    expect(screen.getByText('Revenue')).toBeInTheDocument();
-    expect(screen.getByText('$45,231')).toBeInTheDocument();
-    expect(screen.getByText('+12%')).toBeInTheDocument();
-    expect(screen.getByText('vs last month')).toBeInTheDocument();
-  });
-
-  it('should render description without trend', () => {
-    render(
-      <MetricCard
-        title="Active Sessions"
-        value="432"
-        description="current users online"
-      />
-    );
-    
-    expect(screen.getByText('Active Sessions')).toBeInTheDocument();
-    expect(screen.getByText('432')).toBeInTheDocument();
-    expect(screen.getByText('current users online')).toBeInTheDocument();
-  });
-
-  it('should handle numeric values', () => {
-    render(<MetricCard title="Count" value={1234} />);
-    
-    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();
-  });
-
-  it('should show loading state when loading prop is true', () => {
-    const { container } = render(
-      <MetricCard title="Revenue" value="$45,231" loading={true} />
-    );
-
-    const loadingEl = container.querySelector('[data-testid="metric-card-loading"]');
-    expect(loadingEl).toBeTruthy();
-    // Value should not be rendered during loading
-    expect(container.textContent).not.toContain('$45,231');
-  });
-
-  it('should show error state when error prop is set', () => {
-    const { container } = render(
-      <MetricCard title="Revenue" value="$45,231" error="Connection refused" />
-    );
-
-    const errorEl = container.querySelector('[data-testid="metric-card-error"]');
-    expect(errorEl).toBeTruthy();
-    expect(screen.getByText('Connection refused')).toBeInTheDocument();
-    // Value should not be rendered during error
-    expect(container.textContent).not.toContain('$45,231');
-    // Title should still be visible
-    expect(screen.getByText('Revenue')).toBeInTheDocument();
-  });
-});

package/src/__tests__/ObjectDataTable.test.tsx

@@ -1,211 +0,0 @@
-/**
- * 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, normalizeColumns } 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).toBeTruthy();
-    });
-
-    expect(screen.getByText('Connection refused')).toBeTruthy();
-  });
-
-  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();
-  });
-
-  it('should normalize string[] columns without crashing', () => {
-    const schema = {
-      ...baseSchema,
-      columns: ['name', 'amount', 'close_date'],
-      data: [
-        { name: 'Deal A', amount: 1000, close_date: '2025-01-01' },
-        { name: 'Deal B', amount: 2000, close_date: '2025-06-01' },
-      ],
-    };
-
-    // Should not crash when columns are strings
-    const { container } = render(
-      <SchemaRendererProvider>
-        <ObjectDataTable schema={schema} />
-      </SchemaRendererProvider>,
-    );
-
-    expect(container).toBeDefined();
-  });
-
-  it('should pass through object[] columns unchanged', () => {
-    const schema = {
-      ...baseSchema,
-      columns: [
-        { header: 'Name', accessorKey: 'name' },
-        { header: 'Amount', accessorKey: 'amount' },
-      ],
-      data: [
-        { name: 'Deal A', amount: 1000 },
-      ],
-    };
-
-    const { container } = render(
-      <SchemaRendererProvider>
-        <ObjectDataTable schema={schema} />
-      </SchemaRendererProvider>,
-    );
-
-    expect(container).toBeDefined();
-  });
-});
-
-describe('normalizeColumns', () => {
-  it('should convert snake_case string to title-cased header', () => {
-    const result = normalizeColumns(['close_date']);
-    expect(result).toEqual([{ header: 'Close Date', accessorKey: 'close_date' }]);
-  });
-
-  it('should convert camelCase string to title-cased header', () => {
-    const result = normalizeColumns(['firstName']);
-    expect(result).toEqual([{ header: 'First Name', accessorKey: 'firstName' }]);
-  });
-
-  it('should convert simple string to capitalized header', () => {
-    const result = normalizeColumns(['name']);
-    expect(result).toEqual([{ header: 'Name', accessorKey: 'name' }]);
-  });
-
-  it('should handle multiple string columns', () => {
-    const result = normalizeColumns(['name', 'total_amount', 'createdAt']);
-    expect(result).toEqual([
-      { header: 'Name', accessorKey: 'name' },
-      { header: 'Total Amount', accessorKey: 'total_amount' },
-      { header: 'Created At', accessorKey: 'createdAt' },
-    ]);
-  });
-
-  it('should pass through object columns unchanged', () => {
-    const cols = [
-      { header: 'Custom Name', accessorKey: 'name' },
-      { header: 'Amount ($)', accessorKey: 'amount' },
-    ];
-    const result = normalizeColumns(cols);
-    expect(result).toEqual(cols);
-  });
-
-  it('should handle mixed string and object columns', () => {
-    const result = normalizeColumns([
-      'name',
-      { header: 'Custom Amount', accessorKey: 'amount' },
-      'close_date',
-    ]);
-    expect(result).toEqual([
-      { header: 'Name', accessorKey: 'name' },
-      { header: 'Custom Amount', accessorKey: 'amount' },
-      { header: 'Close Date', accessorKey: 'close_date' },
-    ]);
-  });
-});