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

14 new tests: tab/group schema validation, activeTabId, invalid types,
section reorder (both directions), tile grouping with preservation of
existing sections.

Author: alex-fedotyev

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');
+    });
+  });
 });