test: Add tests for container types, reordering, and grouping

14 new tests covering schema, reorder, and grouping logic.

Author: alex-fedotyev

packages/app/src/DBDashboardPage.tsx

@@ -84,7 +84,6 @@ import { ContactSupportText } from '@/components/ContactSupportText';
 import {
   SectionDropZone,
   SortableSectionWrapper,
-  TileDragHandle,
   UngroupedDropZone,
 } from '@/components/DashboardDndComponents';
 import {
@@ -665,18 +664,6 @@ const Tile = forwardRef(
           onMouseUp={onMouseUp}
           onTouchEnd={onTouchEnd}
         >
-          <Group justify="center" py={4}>
-            {/* Cross-section drag: grip replaces the bar when containers exist */}
-            {availableSections && availableSections.length > 0 ? (
-              <TileDragHandle
-                tileId={chart.id}
-                tileName={chart.config.name ?? 'Tile'}
-                containerId={chart.containerId}
-              />
-            ) : (
-              <Box bg={hovered ? 'gray' : undefined} w={100} h={2} />
-            )}
-          </Group>
           <div
             className="fs-7 text-muted flex-grow-1 overflow-hidden cursor-default"
             onMouseDown={e => e.stopPropagation()}

packages/app/src/__tests__/dashboardSections.test.tsx

@@ -51,6 +51,56 @@ describe('DashboardContainer schema', () => {
       }).success,
     ).toBe(false);
   });
+
+  it('validates a tab container', () => {
+    const result = DashboardContainerSchema.safeParse({
+      id: 'tab-1',
+      type: 'tab',
+      title: 'Overview Tabs',
+      collapsed: false,
+    });
+    expect(result.success).toBe(true);
+    if (result.success) {
+      expect(result.data.type).toBe('tab');
+    }
+  });
+
+  it('validates a group container', () => {
+    const result = DashboardContainerSchema.safeParse({
+      id: 'group-1',
+      type: 'group',
+      title: 'Key Metrics',
+      collapsed: false,
+    });
+    expect(result.success).toBe(true);
+    if (result.success) {
+      expect(result.data.type).toBe('group');
+    }
+  });
+
+  it('validates a tab container with activeTabId', () => {
+    const result = DashboardContainerSchema.safeParse({
+      id: 'tab-1',
+      type: 'tab',
+      title: 'Tabs',
+      collapsed: false,
+      activeTabId: 'sub-tab-1',
+    });
+    expect(result.success).toBe(true);
+    if (result.success) {
+      expect(result.data.activeTabId).toBe('sub-tab-1');
+    }
+  });
+
+  it('rejects an invalid container type', () => {
+    const result = DashboardContainerSchema.safeParse({
+      id: 'c-1',
+      type: 'invalid',
+      title: 'Bad Type',
+      collapsed: false,
+    });
+    expect(result.success).toBe(false);
+  });
 });
 
 describe('Tile schema with containerId', () => {
@@ -525,4 +575,105 @@ describe('section authoring operations', () => {
       expect(result.tiles[0].containerId).toBeUndefined();
     });
   });
+
+  describe('reorder sections', () => {
+    function reorderSections(
+      dashboard: SimpleDashboard,
+      fromIndex: number,
+      toIndex: number,
+    ) {
+      if (!dashboard.containers) return dashboard;
+      const containers = [...dashboard.containers];
+      const [removed] = containers.splice(fromIndex, 1);
+      containers.splice(toIndex, 0, removed);
+      return { ...dashboard, containers };
+    }
+
+    it('moves a section from first to last', () => {
+      const dashboard: SimpleDashboard = {
+        tiles: [],
+        containers: [
+          { id: 's1', title: 'First', collapsed: false },
+          { id: 's2', title: 'Second', collapsed: false },
+          { id: 's3', title: 'Third', collapsed: false },
+        ],
+      };
+      const result = reorderSections(dashboard, 0, 2);
+      expect(result.containers!.map(c => c.id)).toEqual(['s2', 's3', 's1']);
+    });
+
+    it('moves a section from last to first', () => {
+      const dashboard: SimpleDashboard = {
+        tiles: [],
+        containers: [
+          { id: 's1', title: 'First', collapsed: false },
+          { id: 's2', title: 'Second', collapsed: false },
+          { id: 's3', title: 'Third', collapsed: false },
+        ],
+      };
+      const result = reorderSections(dashboard, 2, 0);
+      expect(result.containers!.map(c => c.id)).toEqual(['s3', 's1', 's2']);
+    });
+
+    it('does not affect tiles when sections are reordered', () => {
+      const dashboard: SimpleDashboard = {
+        tiles: [
+          { id: 'a', containerId: 's1' },
+          { id: 'b', containerId: 's2' },
+        ],
+        containers: [
+          { id: 's1', title: 'First', collapsed: false },
+          { id: 's2', title: 'Second', collapsed: false },
+        ],
+      };
+      const result = reorderSections(dashboard, 0, 1);
+      expect(result.tiles).toEqual(dashboard.tiles);
+      expect(result.containers!.map(c => c.id)).toEqual(['s2', 's1']);
+    });
+  });
+
+  describe('group selected tiles', () => {
+    function groupTilesIntoSection(
+      dashboard: SimpleDashboard,
+      tileIds: string[],
+      newSection: SimpleSection,
+    ) {
+      const containers = [...(dashboard.containers ?? []), newSection];
+      const tiles = dashboard.tiles.map(t =>
+        tileIds.includes(t.id) ? { ...t, containerId: newSection.id } : t,
+      );
+      return { ...dashboard, containers, tiles };
+    }
+
+    it('groups selected tiles into a new section', () => {
+      const dashboard: SimpleDashboard = {
+        tiles: [{ id: 'a' }, { id: 'b' }, { id: 'c' }],
+      };
+      const result = groupTilesIntoSection(dashboard, ['a', 'c'], {
+        id: 'new-s',
+        title: 'New Section',
+        collapsed: false,
+      });
+      expect(result.containers).toHaveLength(1);
+      expect(result.tiles.find(t => t.id === 'a')?.containerId).toBe('new-s');
+      expect(result.tiles.find(t => t.id === 'b')?.containerId).toBeUndefined();
+      expect(result.tiles.find(t => t.id === 'c')?.containerId).toBe('new-s');
+    });
+
+    it('preserves existing sections when grouping', () => {
+      const dashboard: SimpleDashboard = {
+        tiles: [{ id: 'a', containerId: 's1' }, { id: 'b' }, { id: 'c' }],
+        containers: [{ id: 's1', title: 'Existing', collapsed: false }],
+      };
+      const result = groupTilesIntoSection(dashboard, ['b', 'c'], {
+        id: 'new-s',
+        title: 'Grouped',
+        collapsed: false,
+      });
+      expect(result.containers).toHaveLength(2);
+      expect(result.tiles.find(t => t.id === 'a')?.containerId).toBe('s1');
+      expect(result.tiles.find(t => t.id === 'b')?.containerId).toBe('new-s');
+      expect(result.tiles.find(t => t.id === 'c')?.containerId).toBe('new-s');
+    });
+  });
 });

packages/app/src/components/DashboardDndComponents.tsx

@@ -1,49 +1,11 @@
 import React from 'react';
-import { useDraggable, useDroppable } from '@dnd-kit/core';
+import { useDroppable } from '@dnd-kit/core';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Box, Text } from '@mantine/core';
 
 import { type DragData, type DragHandleProps } from './DashboardDndContext';
 
-// --- Tile drag handle (useDraggable) ---
-
-export function TileDragHandle({
-  tileId,
-  tileName,
-  containerId,
-}: {
-  tileId: string;
-  tileName: string;
-  containerId?: string;
-}) {
-  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
-    id: `drag-tile-${tileId}`,
-    data: { type: 'tile', tileId, tileName, containerId } satisfies DragData,
-  });
-
-  return (
-    <div
-      ref={setNodeRef}
-      {...attributes}
-      {...listeners}
-      style={{
-        cursor: isDragging ? 'grabbing' : 'grab',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        opacity: isDragging ? 0.4 : 1,
-        width: 100,
-        height: 2,
-        background: 'var(--mantine-color-dimmed)',
-        borderRadius: 1,
-      }}
-      title="Drag to move between sections"
-      data-testid={`tile-drag-handle-${tileId}`}
-    />
-  );
-}
-
 // --- Section drop zone (useDroppable) ---
 
 export function SectionDropZone({