@object-ui/plugin-dashboard 3.3.0 → 3.3.1

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

@@ -1,386 +0,0 @@
-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

@@ -1,114 +0,0 @@
-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();
-  });
-});