From 9ddc96057800f7f9f199f7958b6e60a2adbaabed Mon Sep 17 00:00:00 2001
From: Hein <hein.puth@gmail.com>
Date: Tue, 17 Feb 2026 00:06:15 +0200
Subject: [PATCH] feat(tests): add comprehensive tree structure tests for
 various modes

---
 tests/e2e/tree-hierarchical.spec.ts | 381 ++++++++++++++++++++++++++++
 1 file changed, 381 insertions(+)
 create mode 100644 tests/e2e/tree-hierarchical.spec.ts

diff --git a/tests/e2e/tree-hierarchical.spec.ts b/tests/e2e/tree-hierarchical.spec.ts
new file mode 100644
index 0000000..c876750
--- /dev/null
+++ b/tests/e2e/tree-hierarchical.spec.ts
@@ -0,0 +1,381 @@
+import { expect, test } from '@playwright/test';
+
+// Helper to navigate to a story inside the Storybook iframe
+async function gotoStory(page: any, storyId: string) {
+  await page.goto(`/iframe.html?id=components-griddy--${storyId}&viewMode=story`);
+  await page.waitForSelector('[role="grid"]', { timeout: 10000 });
+}
+
+// Helper to get all visible row text content (from first gridcell in each row)
+async function getVisibleRowNames(page: any): Promise<string[]> {
+  const cells = page.locator('[role="row"] [role="gridcell"]:first-child');
+  const count = await cells.count();
+  const names: string[] = [];
+  for (let i = 0; i < count; i++) {
+    const text = await cells.nth(i).innerText();
+    names.push(text.trim());
+  }
+  return names;
+}
+
+// Helper to click the expand button within a row that contains the given text
+async function clickExpandButton(page: any, rowText: string) {
+  const row = page.locator('[role="row"]', { hasText: rowText });
+  const expandBtn = row.locator('button').first();
+  await expandBtn.click();
+}
+
+// ─── 1. Tree Nested Mode ──────────────────────────────────────────────────────
+
+test.describe('Tree Nested Mode', () => {
+  test.beforeEach(async ({ page }) => {
+    await gotoStory(page, 'tree-nested-mode');
+  });
+
+  test('renders root-level rows collapsed by default', async ({ page }) => {
+    const rows = page.locator('[role="row"]');
+    // Header row + 3 root rows (Engineering, Design, Sales)
+    await expect(rows).toHaveCount(4);
+
+    await expect(page.locator('[role="row"]', { hasText: 'Engineering' })).toBeVisible();
+    await expect(page.locator('[role="row"]', { hasText: 'Design' })).toBeVisible();
+    await expect(page.locator('[role="row"]', { hasText: 'Sales' })).toBeVisible();
+  });
+
+  test('expanding a root node reveals children', async ({ page }) => {
+    await clickExpandButton(page, 'Engineering');
+    await expect(page.locator('[role="row"]', { hasText: 'Frontend Team' })).toBeVisible();
+    await expect(page.locator('[role="row"]', { hasText: 'Backend Team' })).toBeVisible();
+  });
+
+  test('expanding a child node reveals leaf nodes', async ({ page }) => {
+    await clickExpandButton(page, 'Engineering');
+    await expect(page.locator('[role="row"]', { hasText: 'Frontend Team' })).toBeVisible();
+
+    await clickExpandButton(page, 'Frontend Team');
+    await expect(page.locator('[role="row"]', { hasText: 'Alice Johnson' })).toBeVisible();
+    await expect(page.locator('[role="row"]', { hasText: 'Bob Smith' })).toBeVisible();
+  });
+
+  test('collapsing a parent hides all children', async ({ page }) => {
+    // Expand Engineering
+    await clickExpandButton(page, 'Engineering');
+    await expect(page.locator('[role="row"]', { hasText: 'Frontend Team' })).toBeVisible();
+
+    // Collapse Engineering
+    await clickExpandButton(page, 'Engineering');
+    await expect(page.locator('[role="row"]', { hasText: 'Frontend Team' })).not.toBeVisible();
+    await expect(page.locator('[role="row"]', { hasText: 'Backend Team' })).not.toBeVisible();
+  });
+
+  test('leaf nodes have no expand button', async ({ page }) => {
+    await clickExpandButton(page, 'Engineering');
+    await clickExpandButton(page, 'Frontend Team');
+
+    const leafRow = page.locator('[role="row"]', { hasText: 'Alice Johnson' });
+    await expect(leafRow).toBeVisible();
+    // Leaf nodes render a <span> instead of <button> for the expand area
+    const buttons = leafRow.locator('button');
+    // Should have no expand button (only possible checkbox button, not tree expand)
+    const spanExpand = leafRow.locator('span[style*="cursor: default"]');
+    await expect(spanExpand).toBeVisible();
+  });
+
+  test('rows are indented based on depth level', async ({ page }) => {
+    await clickExpandButton(page, 'Engineering');
+    await clickExpandButton(page, 'Frontend Team');
+
+    // Get the first gridcell of root vs child vs leaf
+    const rootCell = page
+      .locator('[role="row"]', { hasText: 'Engineering' })
+      .locator('[role="gridcell"]')
+      .first();
+    const childCell = page
+      .locator('[role="row"]', { hasText: 'Frontend Team' })
+      .locator('[role="gridcell"]')
+      .first();
+    const leafCell = page
+      .locator('[role="row"]', { hasText: 'Alice Johnson' })
+      .locator('[role="gridcell"]')
+      .first();
+
+    const rootPadding = await rootCell.evaluate((el: HTMLElement) =>
+      parseInt(getComputedStyle(el).paddingLeft, 10)
+    );
+    const childPadding = await childCell.evaluate((el: HTMLElement) =>
+      parseInt(getComputedStyle(el).paddingLeft, 10)
+    );
+    const leafPadding = await leafCell.evaluate((el: HTMLElement) =>
+      parseInt(getComputedStyle(el).paddingLeft, 10)
+    );
+
+    // Each level should be more indented than the previous
+    expect(childPadding).toBeGreaterThan(rootPadding);
+    expect(leafPadding).toBeGreaterThan(childPadding);
+  });
+});
+
+// ─── 2. Tree Flat Mode ────────────────────────────────────────────────────────
+
+test.describe('Tree Flat Mode', () => {
+  test.beforeEach(async ({ page }) => {
+    await gotoStory(page, 'tree-flat-mode');
+  });
+
+  test('renders root nodes from flat data', async ({ page }) => {
+    await expect(page.locator('[role="row"]', { hasText: 'Engineering' })).toBeVisible();
+    await expect(page.locator('[role="row"]', { hasText: 'Design' })).toBeVisible();
+  });
+
+  test('expanding shows correctly nested children', async ({ page }) => {
+    await clickExpandButton(page, 'Engineering');
+    await expect(page.locator('[role="row"]', { hasText: 'Frontend Team' })).toBeVisible();
+    await expect(page.locator('[role="row"]', { hasText: 'Backend Team' })).toBeVisible();
+
+    await clickExpandButton(page, 'Frontend Team');
+    await expect(page.locator('[role="row"]', { hasText: 'Alice Johnson' })).toBeVisible();
+    await expect(page.locator('[role="row"]', { hasText: 'Bob Smith' })).toBeVisible();
+  });
+
+  test('structure matches expected parent-child relationships', async ({ page }) => {
+    await clickExpandButton(page, 'Design');
+    await expect(page.locator('[role="row"]', { hasText: 'Product Design' })).toBeVisible();
+
+    await clickExpandButton(page, 'Product Design');
+    await expect(page.locator('[role="row"]', { hasText: 'Frank Miller' })).toBeVisible();
+  });
+});
+
+// ─── 3. Tree Lazy Mode ───────────────────────────────────────────────────────
+
+test.describe('Tree Lazy Mode', () => {
+  test.beforeEach(async ({ page }) => {
+    await gotoStory(page, 'tree-lazy-mode');
+  });
+
+  test('root nodes render immediately', async ({ page }) => {
+    await expect(page.locator('[role="row"]', { hasText: 'Engineering' })).toBeVisible();
+    await expect(page.locator('[role="row"]', { hasText: 'Design' })).toBeVisible();
+    await expect(page.locator('[role="row"]', { hasText: 'Sales' })).toBeVisible();
+  });
+
+  test('expanding a node shows loading then children', async ({ page }) => {
+    await clickExpandButton(page, 'Engineering');
+
+    // Wait for lazy-loaded children to appear (800ms delay in story)
+    await expect(page.locator('[role="row"]', { hasText: 'Engineering - Team A' })).toBeVisible({
+      timeout: 5000,
+    });
+    await expect(page.locator('[role="row"]', { hasText: 'Engineering - Team B' })).toBeVisible();
+  });
+
+  test('lazy-loaded children are expandable', async ({ page }) => {
+    await clickExpandButton(page, 'Engineering');
+    await expect(page.locator('[role="row"]', { hasText: 'Engineering - Team A' })).toBeVisible({
+      timeout: 5000,
+    });
+
+    await clickExpandButton(page, 'Engineering - Team A');
+    await expect(
+      page.locator('[role="row"]', { hasText: 'Person 1 (Engineering - Team A)' })
+    ).toBeVisible({ timeout: 5000 });
+  });
+
+  test('re-collapsing and re-expanding uses cached data', async ({ page }) => {
+    // First expand
+    await clickExpandButton(page, 'Engineering');
+    await expect(page.locator('[role="row"]', { hasText: 'Engineering - Team A' })).toBeVisible({
+      timeout: 5000,
+    });
+
+    // Collapse
+    await clickExpandButton(page, 'Engineering');
+    await expect(
+      page.locator('[role="row"]', { hasText: 'Engineering - Team A' })
+    ).not.toBeVisible();
+
+    // Re-expand — should appear quickly without loading spinner (cached)
+    await clickExpandButton(page, 'Engineering');
+    // Children should appear nearly instantly from cache
+    await expect(page.locator('[role="row"]', { hasText: 'Engineering - Team A' })).toBeVisible({
+      timeout: 1000,
+    });
+  });
+});
+
+// ─── 4. Tree with Search Auto-Expand ─────────────────────────────────────────
+
+test.describe('Tree with Search Auto-Expand', () => {
+  test.beforeEach(async ({ page }) => {
+    await gotoStory(page, 'tree-with-search');
+  });
+
+  test('Ctrl+F opens search overlay', async ({ page }) => {
+    await page.keyboard.press('Control+f');
+    await expect(page.locator('[aria-label="Search grid"]')).toBeVisible({ timeout: 3000 });
+  });
+
+  test('searching for a leaf node auto-expands ancestors', async ({ page }) => {
+    await page.keyboard.press('Control+f');
+    const searchInput = page.locator('[aria-label="Search grid"]');
+    await searchInput.fill('Alice');
+
+    // Alice Johnson should become visible (ancestors auto-expanded)
+    await expect(page.locator('[role="row"]', { hasText: 'Alice Johnson' })).toBeVisible({
+      timeout: 5000,
+    });
+    // Parent nodes should also be visible
+    await expect(page.locator('[role="row"]', { hasText: 'Engineering' })).toBeVisible();
+    await expect(page.locator('[role="row"]', { hasText: 'Frontend Team' })).toBeVisible();
+  });
+
+  test('clearing search preserves expanded state', async ({ page }) => {
+    await page.keyboard.press('Control+f');
+    const searchInput = page.locator('[aria-label="Search grid"]');
+    await searchInput.fill('Alice');
+    await expect(page.locator('[role="row"]', { hasText: 'Alice Johnson' })).toBeVisible({
+      timeout: 5000,
+    });
+
+    // Clear the search
+    await searchInput.fill('');
+
+    // Previously expanded nodes should still be visible
+    await expect(page.locator('[role="row"]', { hasText: 'Engineering' })).toBeVisible();
+    await expect(page.locator('[role="row"]', { hasText: 'Frontend Team' })).toBeVisible();
+  });
+});
+
+// ─── 5. Tree Custom Icons ─────────────────────────────────────────────────────
+
+test.describe('Tree Custom Icons', () => {
+  test.beforeEach(async ({ page }) => {
+    await gotoStory(page, 'tree-custom-icons');
+  });
+
+  test('custom expand/collapse icons render', async ({ page }) => {
+    // Collapsed nodes should show 📁
+    const collapsedRow = page.locator('[role="row"]', { hasText: 'Engineering' });
+    await expect(collapsedRow.locator('text=📁')).toBeVisible();
+
+    // Expand and check for 📂
+    await clickExpandButton(page, 'Engineering');
+    await expect(collapsedRow.locator('text=📂')).toBeVisible();
+  });
+
+  test('leaf nodes show leaf icon', async ({ page }) => {
+    await clickExpandButton(page, 'Engineering');
+    await clickExpandButton(page, 'Frontend Team');
+
+    const leafRow = page.locator('[role="row"]', { hasText: 'Alice Johnson' });
+    await expect(leafRow.locator('text=👤')).toBeVisible();
+  });
+});
+
+// ─── 6. Tree Deep with MaxDepth ──────────────────────────────────────────────
+
+test.describe('Tree Deep with MaxDepth', () => {
+  test.beforeEach(async ({ page }) => {
+    await gotoStory(page, 'tree-deep-with-max-depth');
+  });
+
+  test('tree renders with depth limiting', async ({ page }) => {
+    await expect(page.locator('[role="row"]', { hasText: 'Level 1 (Root)' })).toBeVisible();
+  });
+
+  test('expanding nodes works up to maxDepth', async ({ page }) => {
+    await clickExpandButton(page, 'Level 1 (Root)');
+    await expect(page.locator('[role="row"]', { hasText: 'Level 2' })).toBeVisible();
+
+    await clickExpandButton(page, 'Level 2');
+    await expect(page.locator('[role="row"]', { hasText: 'Level 3' })).toBeVisible();
+  });
+
+  test('nodes beyond maxDepth are not rendered', async ({ page }) => {
+    await clickExpandButton(page, 'Level 1 (Root)');
+    await clickExpandButton(page, 'Level 2');
+    await expect(page.locator('[role="row"]', { hasText: 'Level 3' })).toBeVisible();
+
+    // Level 3 is at depth 2 (0-indexed), maxDepth is 3
+    // Level 3 should either not be expandable or Level 4 should not appear
+    // Check that Level 4 row doesn't exist after trying to expand Level 3
+    const level3Row = page.locator('[role="row"]', { hasText: 'Level 3' });
+    const expandBtn = level3Row.locator('button');
+    const expandBtnCount = await expandBtn.count();
+
+    if (expandBtnCount > 0) {
+      await expandBtn.first().click();
+      // Even after clicking, Level 4 should not appear (beyond maxDepth)
+    }
+
+    // Level 5 Item should never be visible regardless
+    await expect(page.locator('[role="row"]', { hasText: 'Level 5 Item' })).not.toBeVisible();
+  });
+});
+
+// ─── 7. Keyboard Navigation ──────────────────────────────────────────────────
+
+test.describe('Tree Keyboard Navigation', () => {
+  test.beforeEach(async ({ page }) => {
+    await gotoStory(page, 'tree-nested-mode');
+  });
+
+  test('ArrowRight on collapsed node expands it', async ({ page }) => {
+    // Click the Engineering row to focus it
+    await page.locator('[role="row"]', { hasText: 'Engineering' }).click();
+    await page.keyboard.press('ArrowRight');
+
+    // Children should now be visible
+    await expect(page.locator('[role="row"]', { hasText: 'Frontend Team' })).toBeVisible({
+      timeout: 3000,
+    });
+  });
+
+  test('ArrowRight on expanded node moves focus to first child', async ({ page }) => {
+    // Expand Engineering first
+    await clickExpandButton(page, 'Engineering');
+    await expect(page.locator('[role="row"]', { hasText: 'Frontend Team' })).toBeVisible();
+
+    // Click Engineering row to focus it, then ArrowRight to move to first child
+    await page.locator('[role="row"]', { hasText: 'Engineering' }).click();
+    await page.keyboard.press('ArrowRight');
+
+    // Frontend Team row should be focused (check via :focus-within or active state)
+    // We verify by pressing ArrowRight again which should expand Frontend Team
+    await page.keyboard.press('ArrowRight');
+    await expect(page.locator('[role="row"]', { hasText: 'Alice Johnson' })).toBeVisible({
+      timeout: 3000,
+    });
+  });
+
+  test('ArrowLeft on expanded node collapses it', async ({ page }) => {
+    // Expand Engineering
+    await clickExpandButton(page, 'Engineering');
+    await expect(page.locator('[role="row"]', { hasText: 'Frontend Team' })).toBeVisible();
+
+    // Click Engineering row, then ArrowLeft to collapse
+    await page.locator('[role="row"]', { hasText: 'Engineering' }).click();
+    await page.keyboard.press('ArrowLeft');
+
+    await expect(page.locator('[role="row"]', { hasText: 'Frontend Team' })).not.toBeVisible({
+      timeout: 3000,
+    });
+  });
+
+  test('ArrowLeft on child node moves focus to parent', async ({ page }) => {
+    // Expand Engineering
+    await clickExpandButton(page, 'Engineering');
+    await expect(page.locator('[role="row"]', { hasText: 'Frontend Team' })).toBeVisible();
+
+    // Focus the child row
+    await page.locator('[role="row"]', { hasText: 'Frontend Team' }).click();
+    // ArrowLeft on a collapsed child should move focus to parent
+    await page.keyboard.press('ArrowLeft');
+
+    // Verify parent is focused by pressing ArrowLeft again (should collapse Engineering)
+    await page.keyboard.press('ArrowLeft');
+    await expect(page.locator('[role="row"]', { hasText: 'Frontend Team' })).not.toBeVisible({
+      timeout: 3000,
+    });
+  });
+});