@object-ui/plugin-dashboard 3.0.2 → 3.1.0

package/src/__tests__/DashboardConfigPanel.test.tsx

@@ -0,0 +1,206 @@
+/**
+ * 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 { DashboardConfigPanel } from '../DashboardConfigPanel';
+
+const defaultConfig = {
+  columns: 3,
+  gap: 4,
+  rowHeight: '120',
+  refreshInterval: '0',
+  title: 'My Dashboard',
+  showDescription: true,
+  theme: 'auto',
+};
+
+describe('DashboardConfigPanel', () => {
+  it('should render nothing when closed', () => {
+    const { container } = render(
+      <DashboardConfigPanel
+        open={false}
+        onClose={vi.fn()}
+        config={defaultConfig}
+        onSave={vi.fn()}
+      />,
+    );
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('should render panel when open', () => {
+    render(
+      <DashboardConfigPanel
+        open={true}
+        onClose={vi.fn()}
+        config={defaultConfig}
+        onSave={vi.fn()}
+      />,
+    );
+    expect(screen.getByTestId('config-panel')).toBeDefined();
+  });
+
+  it('should display dashboard breadcrumb', () => {
+    render(
+      <DashboardConfigPanel
+        open={true}
+        onClose={vi.fn()}
+        config={defaultConfig}
+        onSave={vi.fn()}
+      />,
+    );
+    expect(screen.getByText('Dashboard')).toBeDefined();
+    expect(screen.getByText('Configuration')).toBeDefined();
+  });
+
+  it('should display layout section fields', () => {
+    render(
+      <DashboardConfigPanel
+        open={true}
+        onClose={vi.fn()}
+        config={defaultConfig}
+        onSave={vi.fn()}
+      />,
+    );
+    expect(screen.getByText('Layout')).toBeDefined();
+    expect(screen.getByText('Columns')).toBeDefined();
+    expect(screen.getByText('Gap')).toBeDefined();
+    expect(screen.getByText('Row height')).toBeDefined();
+  });
+
+  it('should display data section', () => {
+    render(
+      <DashboardConfigPanel
+        open={true}
+        onClose={vi.fn()}
+        config={defaultConfig}
+        onSave={vi.fn()}
+      />,
+    );
+    expect(screen.getByText('Data')).toBeDefined();
+    expect(screen.getByText('Refresh interval')).toBeDefined();
+  });
+
+  it('should have appearance section collapsed by default', () => {
+    render(
+      <DashboardConfigPanel
+        open={true}
+        onClose={vi.fn()}
+        config={defaultConfig}
+        onSave={vi.fn()}
+      />,
+    );
+    expect(screen.getByText('Appearance')).toBeDefined();
+    // Title field should be hidden since appearance is collapsed by default
+    // Note: 'My Dashboard' is the title field value from the config, not the section title.
+    // The input label 'Title' should not be visible while collapsed
+    expect(screen.queryByText('Show description')).toBeNull();
+  });
+
+  it('should expand appearance section on click', () => {
+    render(
+      <DashboardConfigPanel
+        open={true}
+        onClose={vi.fn()}
+        config={defaultConfig}
+        onSave={vi.fn()}
+      />,
+    );
+    // Click to expand
+    fireEvent.click(screen.getByTestId('section-header-appearance'));
+    expect(screen.getByText('Show description')).toBeDefined();
+    expect(screen.getByText('Theme')).toBeDefined();
+  });
+
+  it('should call onClose when close button clicked', () => {
+    const onClose = vi.fn();
+    render(
+      <DashboardConfigPanel
+        open={true}
+        onClose={onClose}
+        config={defaultConfig}
+        onSave={vi.fn()}
+      />,
+    );
+    fireEvent.click(screen.getByTestId('config-panel-close'));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('should show save/discard footer after editing a field', () => {
+    render(
+      <DashboardConfigPanel
+        open={true}
+        onClose={vi.fn()}
+        config={defaultConfig}
+        onSave={vi.fn()}
+      />,
+    );
+    // Edit the row height input
+    const rowHeightInput = screen.getByTestId('config-field-rowHeight');
+    fireEvent.change(rowHeightInput, { target: { value: '200' } });
+    expect(screen.getByTestId('config-panel-footer')).toBeDefined();
+  });
+
+  it('should call onSave with updated draft', () => {
+    const onSave = vi.fn();
+    render(
+      <DashboardConfigPanel
+        open={true}
+        onClose={vi.fn()}
+        config={defaultConfig}
+        onSave={onSave}
+      />,
+    );
+    // Modify a field
+    fireEvent.change(screen.getByTestId('config-field-rowHeight'), {
+      target: { value: '200' },
+    });
+    // Save
+    fireEvent.click(screen.getByTestId('config-panel-save'));
+    expect(onSave).toHaveBeenCalledTimes(1);
+    const savedDraft = onSave.mock.calls[0][0];
+    expect(savedDraft.rowHeight).toBe('200');
+  });
+
+  it('should revert changes on discard', () => {
+    render(
+      <DashboardConfigPanel
+        open={true}
+        onClose={vi.fn()}
+        config={defaultConfig}
+        onSave={vi.fn()}
+      />,
+    );
+    const input = screen.getByTestId('config-field-rowHeight') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: '999' } });
+    expect(input.value).toBe('999');
+
+    // Discard
+    fireEvent.click(screen.getByTestId('config-panel-discard'));
+
+    // Footer should disappear (no longer dirty)
+    expect(screen.queryByTestId('config-panel-footer')).toBeNull();
+  });
+
+  it('should call onFieldChange for live updates', () => {
+    const onFieldChange = vi.fn();
+    render(
+      <DashboardConfigPanel
+        open={true}
+        onClose={vi.fn()}
+        config={defaultConfig}
+        onSave={vi.fn()}
+        onFieldChange={onFieldChange}
+      />,
+    );
+    fireEvent.change(screen.getByTestId('config-field-rowHeight'), {
+      target: { value: '150' },
+    });
+    expect(onFieldChange).toHaveBeenCalledWith('rowHeight', '150');
+  });
+});

package/src/__tests__/DashboardRenderer.designMode.test.tsx

@@ -0,0 +1,386 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { DashboardRenderer } from '../DashboardRenderer';
+import type { DashboardSchema } from '@object-ui/types';
+
+// Mock SchemaRenderer to avoid pulling in the full renderer tree.
+// Forwards className and includes an interactive child to simulate real chart content.
+vi.mock('@object-ui/react', () => ({
+  SchemaRenderer: ({ schema, className }: { schema: any; className?: string }) => (
+    <div data-testid="schema-renderer" className={className}>
+      <button data-testid={`interactive-child-${schema?.type ?? 'unknown'}`}>
+        {schema?.type ?? 'unknown'}
+      </button>
+    </div>
+  ),
+}));
+
+const DASHBOARD_WITH_WIDGETS: DashboardSchema = {
+  type: 'dashboard',
+  title: 'Test Dashboard',
+  columns: 2,
+  widgets: [
+    { id: 'w1', title: 'Revenue', type: 'metric' },
+    { id: 'w2', title: 'Sales Chart', type: 'bar' },
+    { id: 'w3', title: 'Orders Table', type: 'table' },
+  ],
+};
+
+describe('DashboardRenderer design mode', () => {
+  describe('Widget selection', () => {
+    it('should render widget test IDs in design mode', () => {
+      const onWidgetClick = vi.fn();
+      render(
+        <DashboardRenderer
+          schema={DASHBOARD_WITH_WIDGETS}
+          designMode
+          selectedWidgetId={null}
+          onWidgetClick={onWidgetClick}
+        />,
+      );
+
+      expect(screen.getByTestId('dashboard-preview-widget-w1')).toBeInTheDocument();
+      expect(screen.getByTestId('dashboard-preview-widget-w2')).toBeInTheDocument();
+      expect(screen.getByTestId('dashboard-preview-widget-w3')).toBeInTheDocument();
+    });
+
+    it('should not render widget test IDs when not in design mode', () => {
+      render(<DashboardRenderer schema={DASHBOARD_WITH_WIDGETS} />);
+
+      expect(screen.queryByTestId('dashboard-preview-widget-w1')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('dashboard-preview-widget-w2')).not.toBeInTheDocument();
+    });
+
+    it('should call onWidgetClick when a widget is clicked', () => {
+      const onWidgetClick = vi.fn();
+      render(
+        <DashboardRenderer
+          schema={DASHBOARD_WITH_WIDGETS}
+          designMode
+          selectedWidgetId={null}
+          onWidgetClick={onWidgetClick}
+        />,
+      );
+
+      fireEvent.click(screen.getByTestId('dashboard-preview-widget-w1'));
+      expect(onWidgetClick).toHaveBeenCalledWith('w1');
+    });
+
+    it('should set aria-selected on the selected widget', () => {
+      render(
+        <DashboardRenderer
+          schema={DASHBOARD_WITH_WIDGETS}
+          designMode
+          selectedWidgetId="w2"
+          onWidgetClick={vi.fn()}
+        />,
+      );
+
+      expect(screen.getByTestId('dashboard-preview-widget-w2')).toHaveAttribute('aria-selected', 'true');
+      expect(screen.getByTestId('dashboard-preview-widget-w1')).toHaveAttribute('aria-selected', 'false');
+    });
+
+    it('should apply selection styling classes on selected widget', () => {
+      const { container } = render(
+        <DashboardRenderer
+          schema={DASHBOARD_WITH_WIDGETS}
+          designMode
+          selectedWidgetId="w1"
+          onWidgetClick={vi.fn()}
+        />,
+      );
+
+      const selectedWidget = screen.getByTestId('dashboard-preview-widget-w1');
+      expect(selectedWidget.className).toContain('ring-2');
+      expect(selectedWidget.className).toContain('ring-primary');
+    });
+
+    it('should have role="button" on widgets in design mode', () => {
+      render(
+        <DashboardRenderer
+          schema={DASHBOARD_WITH_WIDGETS}
+          designMode
+          selectedWidgetId={null}
+          onWidgetClick={vi.fn()}
+        />,
+      );
+
+      expect(screen.getByTestId('dashboard-preview-widget-w1')).toHaveAttribute('role', 'button');
+    });
+
+    it('should have tabIndex=0 for keyboard accessibility in design mode', () => {
+      render(
+        <DashboardRenderer
+          schema={DASHBOARD_WITH_WIDGETS}
+          designMode
+          selectedWidgetId={null}
+          onWidgetClick={vi.fn()}
+        />,
+      );
+
+      expect(screen.getByTestId('dashboard-preview-widget-w1')).toHaveAttribute('tabindex', '0');
+    });
+
+    it('should have aria-label on widgets in design mode', () => {
+      render(
+        <DashboardRenderer
+          schema={DASHBOARD_WITH_WIDGETS}
+          designMode
+          selectedWidgetId={null}
+          onWidgetClick={vi.fn()}
+        />,
+      );
+
+      expect(screen.getByTestId('dashboard-preview-widget-w1')).toHaveAttribute(
+        'aria-label',
+        'Widget: Revenue',
+      );
+    });
+  });
+
+  describe('Click deselection', () => {
+    it('should call onWidgetClick(null) when clicking background', () => {
+      const onWidgetClick = vi.fn();
+      const { container } = render(
+        <DashboardRenderer
+          schema={DASHBOARD_WITH_WIDGETS}
+          designMode
+          selectedWidgetId="w1"
+          onWidgetClick={onWidgetClick}
+        />,
+      );
+
+      // Click on the outer grid container (background)
+      const gridContainer = container.firstElementChild as HTMLElement;
+      fireEvent.click(gridContainer);
+      expect(onWidgetClick).toHaveBeenCalledWith(null);
+    });
+  });
+
+  describe('Keyboard navigation', () => {
+    it('should select next widget with ArrowRight', () => {
+      const onWidgetClick = vi.fn();
+      render(
+        <DashboardRenderer
+          schema={DASHBOARD_WITH_WIDGETS}
+          designMode
+          selectedWidgetId="w1"
+          onWidgetClick={onWidgetClick}
+        />,
+      );
+
+      fireEvent.keyDown(screen.getByTestId('dashboard-preview-widget-w1'), { key: 'ArrowRight' });
+      expect(onWidgetClick).toHaveBeenCalledWith('w2');
+    });
+
+    it('should select previous widget with ArrowLeft', () => {
+      const onWidgetClick = vi.fn();
+      render(
+        <DashboardRenderer
+          schema={DASHBOARD_WITH_WIDGETS}
+          designMode
+          selectedWidgetId="w2"
+          onWidgetClick={onWidgetClick}
+        />,
+      );
+
+      fireEvent.keyDown(screen.getByTestId('dashboard-preview-widget-w2'), { key: 'ArrowLeft' });
+      expect(onWidgetClick).toHaveBeenCalledWith('w1');
+    });
+
+    it('should deselect with Escape', () => {
+      const onWidgetClick = vi.fn();
+      render(
+        <DashboardRenderer
+          schema={DASHBOARD_WITH_WIDGETS}
+          designMode
+          selectedWidgetId="w1"
+          onWidgetClick={onWidgetClick}
+        />,
+      );
+
+      fireEvent.keyDown(screen.getByTestId('dashboard-preview-widget-w1'), { key: 'Escape' });
+      expect(onWidgetClick).toHaveBeenCalledWith(null);
+    });
+
+    it('should select with Enter key', () => {
+      const onWidgetClick = vi.fn();
+      render(
+        <DashboardRenderer
+          schema={DASHBOARD_WITH_WIDGETS}
+          designMode
+          selectedWidgetId={null}
+          onWidgetClick={onWidgetClick}
+        />,
+      );
+
+      fireEvent.keyDown(screen.getByTestId('dashboard-preview-widget-w2'), { key: 'Enter' });
+      expect(onWidgetClick).toHaveBeenCalledWith('w2');
+    });
+
+    it('should select with Space key', () => {
+      const onWidgetClick = vi.fn();
+      render(
+        <DashboardRenderer
+          schema={DASHBOARD_WITH_WIDGETS}
+          designMode
+          selectedWidgetId={null}
+          onWidgetClick={onWidgetClick}
+        />,
+      );
+
+      fireEvent.keyDown(screen.getByTestId('dashboard-preview-widget-w1'), { key: ' ' });
+      expect(onWidgetClick).toHaveBeenCalledWith('w1');
+    });
+  });
+
+  describe('Content pointer-events in design mode', () => {
+    it('should apply pointer-events-none to widget content in design mode', () => {
+      render(
+        <DashboardRenderer
+          schema={DASHBOARD_WITH_WIDGETS}
+          designMode
+          selectedWidgetId={null}
+          onWidgetClick={vi.fn()}
+        />,
+      );
+
+      // Card widget (bar chart) — content wrapper should have pointer-events-none
+      const barWidget = screen.getByTestId('dashboard-preview-widget-w2');
+      const contentWrapper = barWidget.querySelector('.pointer-events-none');
+      expect(contentWrapper).toBeInTheDocument();
+    });
+
+    it('should apply pointer-events-none to self-contained (metric) widget content', () => {
+      render(
+        <DashboardRenderer
+          schema={DASHBOARD_WITH_WIDGETS}
+          designMode
+          selectedWidgetId={null}
+          onWidgetClick={vi.fn()}
+        />,
+      );
+
+      // Metric widget — SchemaRenderer receives pointer-events-none className
+      const metricWidget = screen.getByTestId('dashboard-preview-widget-w1');
+      const contentWrapper = metricWidget.querySelector('.pointer-events-none');
+      expect(contentWrapper).toBeInTheDocument();
+    });
+
+    it('should NOT apply pointer-events-none when not in design mode', () => {
+      const { container } = render(<DashboardRenderer schema={DASHBOARD_WITH_WIDGETS} />);
+
+      // No design-mode content wrapper should have pointer-events-none class
+      // (data-table ghost rows have pointer-events-none internally, which is unrelated to design mode)
+      expect(container.querySelector('.pointer-events-none:not([data-testid="ghost-row"])')).not.toBeInTheDocument();
+    });
+
+    it('should still call onWidgetClick when clicking on Card-based widget content area', () => {
+      const onWidgetClick = vi.fn();
+      render(
+        <DashboardRenderer
+          schema={DASHBOARD_WITH_WIDGETS}
+          designMode
+          selectedWidgetId={null}
+          onWidgetClick={onWidgetClick}
+        />,
+      );
+
+      // Click on the bar chart widget (Card-based)
+      fireEvent.click(screen.getByTestId('dashboard-preview-widget-w2'));
+      expect(onWidgetClick).toHaveBeenCalledWith('w2');
+    });
+
+    it('should still call onWidgetClick when clicking on table widget', () => {
+      const onWidgetClick = vi.fn();
+      render(
+        <DashboardRenderer
+          schema={DASHBOARD_WITH_WIDGETS}
+          designMode
+          selectedWidgetId={null}
+          onWidgetClick={onWidgetClick}
+        />,
+      );
+
+      // Click on the table widget (Card-based)
+      fireEvent.click(screen.getByTestId('dashboard-preview-widget-w3'));
+      expect(onWidgetClick).toHaveBeenCalledWith('w3');
+    });
+  });
+
+  describe('Click-capture overlay in design mode', () => {
+    it('should render a click-capture overlay on Card-based widgets in design mode', () => {
+      render(
+        <DashboardRenderer
+          schema={DASHBOARD_WITH_WIDGETS}
+          designMode
+          selectedWidgetId={null}
+          onWidgetClick={vi.fn()}
+        />,
+      );
+
+      // Card widget (bar chart) — should have an absolute overlay div
+      const barWidget = screen.getByTestId('dashboard-preview-widget-w2');
+      const overlay = barWidget.querySelector('[data-testid="widget-click-overlay"]');
+      expect(overlay).toBeInTheDocument();
+      expect(overlay?.className).toContain('absolute');
+      expect(overlay?.className).toContain('inset-0');
+      expect(overlay?.className).toContain('z-10');
+    });
+
+    it('should render a click-capture overlay on self-contained widgets in design mode', () => {
+      render(
+        <DashboardRenderer
+          schema={DASHBOARD_WITH_WIDGETS}
+          designMode
+          selectedWidgetId={null}
+          onWidgetClick={vi.fn()}
+        />,
+      );
+
+      // Metric widget — should have an absolute overlay div
+      const metricWidget = screen.getByTestId('dashboard-preview-widget-w1');
+      const overlay = metricWidget.querySelector('[data-testid="widget-click-overlay"]');
+      expect(overlay).toBeInTheDocument();
+      expect(overlay?.className).toContain('absolute');
+      expect(overlay?.className).toContain('inset-0');
+      expect(overlay?.className).toContain('z-10');
+    });
+
+    it('should NOT render overlays when not in design mode', () => {
+      const { container } = render(<DashboardRenderer schema={DASHBOARD_WITH_WIDGETS} />);
+
+      expect(container.querySelector('[data-testid="widget-click-overlay"]')).not.toBeInTheDocument();
+    });
+
+    it('should apply relative positioning to widget container in design mode', () => {
+      render(
+        <DashboardRenderer
+          schema={DASHBOARD_WITH_WIDGETS}
+          designMode
+          selectedWidgetId={null}
+          onWidgetClick={vi.fn()}
+        />,
+      );
+
+      // Card widget should have relative for overlay positioning
+      const barWidget = screen.getByTestId('dashboard-preview-widget-w2');
+      expect(barWidget.className).toContain('relative');
+
+      // Metric widget should have relative for overlay positioning
+      const metricWidget = screen.getByTestId('dashboard-preview-widget-w1');
+      expect(metricWidget.className).toContain('relative');
+    });
+  });
+
+  describe('Non-design mode behavior', () => {
+    it('should not add design mode attributes when designMode is off', () => {
+      const { container } = render(<DashboardRenderer schema={DASHBOARD_WITH_WIDGETS} />);
+
+      // No widget should have data-widget-id
+      expect(container.querySelector('[data-widget-id]')).not.toBeInTheDocument();
+      // No widget should have role=button
+      expect(container.querySelector('[role="button"]')).not.toBeInTheDocument();
+    });
+  });
+});

package/src/__tests__/DashboardRenderer.header.test.tsx

@@ -0,0 +1,114 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { DashboardRenderer } from '../DashboardRenderer';
+import type { DashboardSchema } from '@object-ui/types';
+
+// Mock SchemaRenderer to avoid pulling in the full renderer tree
+vi.mock('@object-ui/react', () => ({
+  SchemaRenderer: ({ schema }: { schema: any }) => (
+    <div data-testid="schema-renderer">{schema?.type ?? 'unknown'}</div>
+  ),
+}));
+
+describe('DashboardRenderer header', () => {
+  const baseSchema: DashboardSchema = {
+    type: 'dashboard',
+    name: 'test_dashboard',
+    title: 'Sales Dashboard',
+    description: 'Monthly overview of sales data',
+    widgets: [],
+  };
+
+  it('should render title when showTitle is not false', () => {
+    const schema: DashboardSchema = {
+      ...baseSchema,
+      header: { showTitle: true },
+    };
+    render(<DashboardRenderer schema={schema} />);
+
+    expect(screen.getByText('Sales Dashboard')).toBeInTheDocument();
+  });
+
+  it('should not render title when showTitle is false', () => {
+    const schema: DashboardSchema = {
+      ...baseSchema,
+      header: { showTitle: false },
+    };
+    render(<DashboardRenderer schema={schema} />);
+
+    expect(screen.queryByText('Sales Dashboard')).not.toBeInTheDocument();
+  });
+
+  it('should render description when showDescription is not false', () => {
+    const schema: DashboardSchema = {
+      ...baseSchema,
+      header: { showDescription: true },
+    };
+    render(<DashboardRenderer schema={schema} />);
+
+    expect(screen.getByText('Monthly overview of sales data')).toBeInTheDocument();
+  });
+
+  it('should not render description when showDescription is false', () => {
+    const schema: DashboardSchema = {
+      ...baseSchema,
+      header: { showDescription: false },
+    };
+    render(<DashboardRenderer schema={schema} />);
+
+    expect(screen.queryByText('Monthly overview of sales data')).not.toBeInTheDocument();
+  });
+
+  it('should render action buttons', () => {
+    const schema: DashboardSchema = {
+      ...baseSchema,
+      header: {
+        actions: [
+          { label: 'Export', action: 'export' },
+          { label: 'Share', action: 'share' },
+        ],
+      },
+    };
+    render(<DashboardRenderer schema={schema} />);
+
+    expect(screen.getByText('Export')).toBeInTheDocument();
+    expect(screen.getByText('Share')).toBeInTheDocument();
+  });
+
+  it('should render recordCount badge when prop provided', () => {
+    const schema: DashboardSchema = {
+      ...baseSchema,
+      header: {},
+    };
+    const onRefresh = vi.fn();
+    render(<DashboardRenderer schema={schema} onRefresh={onRefresh} recordCount={1234} />);
+
+    expect(screen.getByText('1,234 records')).toBeInTheDocument();
+  });
+
+  it('should set data-user-actions attribute when userActions provided', () => {
+    const schema: DashboardSchema = {
+      ...baseSchema,
+      header: {},
+    };
+    const userActions = { sort: true, search: false, filter: true };
+    const { container } = render(
+      <DashboardRenderer schema={schema} userActions={userActions} />
+    );
+
+    const root = container.firstElementChild as HTMLElement;
+    expect(root.getAttribute('data-user-actions')).toBe(JSON.stringify(userActions));
+  });
+
+  it('should not render header section when schema.header is undefined', () => {
+    const schema: DashboardSchema = {
+      ...baseSchema,
+      header: undefined,
+    };
+    render(<DashboardRenderer schema={schema} />);
+
+    // Neither title nor description should appear in a header context
+    // The title text itself should not be rendered since there is no header
+    expect(screen.queryByText('Sales Dashboard')).not.toBeInTheDocument();
+  });
+});