datajunction-ui 0.0.74 → 0.0.76

package/src/app/pages/MyWorkspacePage/__tests__/MaterializationsSection.test.jsx

@@ -0,0 +1,238 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { MaterializationsSection } from '../MaterializationsSection';
+
+jest.mock('../MyWorkspacePage.css', () => ({}));
+
+describe('<MaterializationsSection />', () => {
+  const now = Date.now();
+
+  const createMockNode = (name, hoursAgo, schedule = '@daily') => ({
+    name,
+    type: 'CUBE',
+    current: {
+      displayName: name,
+      availability: {
+        validThroughTs:
+          hoursAgo !== null ? now - hoursAgo * 60 * 60 * 1000 : null,
+        table: 'warehouse.materialized_table',
+      },
+      materializations: [{ name: 'mat1', schedule }],
+    },
+  });
+
+  it('should render loading state', () => {
+    render(
+      <MemoryRouter>
+        <MaterializationsSection nodes={[]} loading={true} />
+      </MemoryRouter>,
+    );
+
+    expect(
+      screen.queryByText('No materializations configured.'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('should render empty state when no materializations', () => {
+    render(
+      <MemoryRouter>
+        <MaterializationsSection nodes={[]} loading={false} />
+      </MemoryRouter>,
+    );
+
+    expect(
+      screen.getByText('No materializations configured.'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Materialize a node')).toBeInTheDocument();
+    expect(
+      screen.getByText('Speed up queries with cached data'),
+    ).toBeInTheDocument();
+  });
+
+  it('should render pending status for nodes without validThroughTs', () => {
+    const pendingNode = createMockNode('pending_cube', null);
+
+    render(
+      <MemoryRouter>
+        <MaterializationsSection nodes={[pendingNode]} loading={false} />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByText('pending_cube')).toBeInTheDocument();
+    expect(screen.getByText('⏳ Pending')).toBeInTheDocument();
+  });
+
+  it('should render green status for recent materializations (< 24h)', () => {
+    const freshNode = createMockNode('fresh_cube', 12); // 12 hours ago
+
+    render(
+      <MemoryRouter>
+        <MaterializationsSection nodes={[freshNode]} loading={false} />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByText('fresh_cube')).toBeInTheDocument();
+    expect(screen.getByText(/12h ago/)).toBeInTheDocument();
+  });
+
+  it('should render yellow status for stale materializations (24-72h)', () => {
+    const staleNode = createMockNode('stale_cube', 48); // 48 hours ago
+
+    render(
+      <MemoryRouter>
+        <MaterializationsSection nodes={[staleNode]} loading={false} />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByText('stale_cube')).toBeInTheDocument();
+    expect(screen.getByText(/2d ago/)).toBeInTheDocument();
+  });
+
+  it('should render red status for very stale materializations (> 72h)', () => {
+    const veryStaleNode = createMockNode('very_stale_cube', 168); // 7 days ago
+
+    render(
+      <MemoryRouter>
+        <MaterializationsSection nodes={[veryStaleNode]} loading={false} />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByText('very_stale_cube')).toBeInTheDocument();
+    expect(screen.getByText(/7d ago/)).toBeInTheDocument();
+  });
+
+  it('should sort nodes by validThroughTs (most recent first)', () => {
+    const nodes = [
+      createMockNode('old_cube', 72),
+      createMockNode('recent_cube', 12),
+      createMockNode('middle_cube', 36),
+    ];
+
+    render(
+      <MemoryRouter>
+        <MaterializationsSection nodes={nodes} loading={false} />
+      </MemoryRouter>,
+    );
+
+    const allCubes = screen.getAllByText(/cube/);
+    // Should be sorted: recent, middle, old
+    expect(allCubes[0]).toHaveTextContent('recent_cube');
+    expect(allCubes[1]).toHaveTextContent('middle_cube');
+    expect(allCubes[2]).toHaveTextContent('old_cube');
+  });
+
+  it('should display materialization schedule', () => {
+    const node = createMockNode('scheduled_cube', 12, '@hourly');
+
+    render(
+      <MemoryRouter>
+        <MaterializationsSection nodes={[node]} loading={false} />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByText('🕐 @hourly')).toBeInTheDocument();
+  });
+
+  it('should display materialization table', () => {
+    const node = createMockNode('cube_with_table', 12);
+
+    render(
+      <MemoryRouter>
+        <MaterializationsSection nodes={[node]} loading={false} />
+      </MemoryRouter>,
+    );
+
+    expect(
+      screen.getByText('→ warehouse.materialized_table'),
+    ).toBeInTheDocument();
+  });
+
+  it('should handle nodes with no schedule', () => {
+    const nodeWithoutSchedule = {
+      name: 'no_schedule_cube',
+      type: 'CUBE',
+      current: {
+        displayName: 'no_schedule_cube',
+        availability: {
+          validThroughTs: now - 12 * 60 * 60 * 1000,
+        },
+        materializations: [{ name: 'mat1' }], // No schedule
+      },
+    };
+
+    render(
+      <MemoryRouter>
+        <MaterializationsSection
+          nodes={[nodeWithoutSchedule]}
+          loading={false}
+        />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByText('🕐 No schedule')).toBeInTheDocument();
+  });
+
+  it('should limit display to 5 nodes', () => {
+    const manyNodes = Array.from({ length: 10 }, (_, i) =>
+      createMockNode(`cube_${i}`, 12),
+    );
+
+    render(
+      <MemoryRouter>
+        <MaterializationsSection nodes={manyNodes} loading={false} />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByText('cube_0')).toBeInTheDocument();
+    expect(screen.getByText('cube_4')).toBeInTheDocument();
+    expect(screen.queryByText('cube_5')).not.toBeInTheDocument();
+    expect(screen.getByText('+5 more')).toBeInTheDocument();
+  });
+
+  it('should handle undefined nodes gracefully', () => {
+    render(
+      <MemoryRouter>
+        <MaterializationsSection nodes={undefined} loading={false} />
+      </MemoryRouter>,
+    );
+
+    expect(
+      screen.getByText('No materializations configured.'),
+    ).toBeInTheDocument();
+  });
+
+  it('should handle nodes without availability', () => {
+    const nodeWithoutAvailability = {
+      name: 'no_availability_cube',
+      type: 'CUBE',
+      current: {
+        displayName: 'no_availability_cube',
+        materializations: [{ name: 'mat1', schedule: '@daily' }],
+      },
+    };
+
+    render(
+      <MemoryRouter>
+        <MaterializationsSection
+          nodes={[nodeWithoutAvailability]}
+          loading={false}
+        />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByText('no_availability_cube')).toBeInTheDocument();
+    expect(screen.getByText('⏳ Pending')).toBeInTheDocument();
+  });
+
+  it('should link to nodes with materialization filter', () => {
+    render(
+      <MemoryRouter>
+        <MaterializationsSection nodes={[]} loading={false} />
+      </MemoryRouter>,
+    );
+
+    const viewAllLink = screen.getByText('View All →').closest('a');
+    expect(viewAllLink).toHaveAttribute('href', '/?hasMaterialization=true');
+  });
+});

package/src/app/pages/MyWorkspacePage/__tests__/MyNodesSection.test.jsx

@@ -0,0 +1,389 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { MyNodesSection } from '../MyNodesSection';
+
+jest.mock('../MyWorkspacePage.css', () => ({}));
+jest.mock('../NodeList', () => ({
+  NodeList: ({ nodes, showUpdatedAt }) => (
+    <div data-testid="node-list">
+      {nodes.map(node => (
+        <div key={node.name}>{node.name}</div>
+      ))}
+    </div>
+  ),
+}));
+jest.mock('../TypeGroupGrid', () => ({
+  TypeGroupGrid: ({ groupedData }) => (
+    <div data-testid="type-group-grid">
+      {groupedData.map(group => (
+        <div key={group.type}>
+          {group.type}: {group.count} nodes
+        </div>
+      ))}
+    </div>
+  ),
+}));
+
+describe('<MyNodesSection />', () => {
+  const mockOwnedNodes = [
+    {
+      name: 'default.owned_metric',
+      type: 'METRIC',
+      current: { displayName: 'Owned Metric', updatedAt: '2024-01-01' },
+    },
+  ];
+
+  const mockWatchedNodes = [
+    {
+      name: 'default.watched_metric',
+      type: 'METRIC',
+      current: { displayName: 'Watched Metric', updatedAt: '2024-01-02' },
+    },
+    {
+      name: 'default.owned_metric', // Also owned, should be filtered out
+      type: 'METRIC',
+      current: { displayName: 'Owned Metric', updatedAt: '2024-01-01' },
+    },
+  ];
+
+  const mockRecentlyEdited = [
+    {
+      name: 'default.edited_metric',
+      type: 'METRIC',
+      current: { displayName: 'Edited Metric', updatedAt: '2024-01-03' },
+    },
+  ];
+
+  it('should render loading state', () => {
+    render(
+      <MemoryRouter>
+        <MyNodesSection
+          ownedNodes={[]}
+          watchedNodes={[]}
+          recentlyEdited={[]}
+          username="test.user@example.com"
+          loading={true}
+        />
+      </MemoryRouter>,
+    );
+
+    expect(screen.queryByText('Owned (0)')).not.toBeInTheDocument();
+  });
+
+  it('should render empty state when no nodes', () => {
+    render(
+      <MemoryRouter>
+        <MyNodesSection
+          ownedNodes={[]}
+          watchedNodes={[]}
+          recentlyEdited={[]}
+          username="test.user@example.com"
+          loading={false}
+        />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByText('No nodes yet.')).toBeInTheDocument();
+    expect(screen.getByText('Create a node')).toBeInTheDocument();
+    expect(screen.getByText('Claim ownership')).toBeInTheDocument();
+  });
+
+  it('should render tabs with node counts', () => {
+    render(
+      <MemoryRouter>
+        <MyNodesSection
+          ownedNodes={mockOwnedNodes}
+          watchedNodes={mockWatchedNodes}
+          recentlyEdited={mockRecentlyEdited}
+          username="test.user@example.com"
+          loading={false}
+        />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByText('Owned (1)')).toBeInTheDocument();
+    // Should only count watched nodes that aren't owned (1 watched-only)
+    expect(screen.getByText('Watched (1)')).toBeInTheDocument();
+    expect(screen.getByText('Recent Edits (1)')).toBeInTheDocument();
+  });
+
+  it('should show owned nodes by default', () => {
+    render(
+      <MemoryRouter>
+        <MyNodesSection
+          ownedNodes={mockOwnedNodes}
+          watchedNodes={mockWatchedNodes}
+          recentlyEdited={mockRecentlyEdited}
+          username="test.user@example.com"
+          loading={false}
+        />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByText('default.owned_metric')).toBeInTheDocument();
+    expect(
+      screen.queryByText('default.watched_metric'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('should switch to watched tab', () => {
+    render(
+      <MemoryRouter>
+        <MyNodesSection
+          ownedNodes={mockOwnedNodes}
+          watchedNodes={mockWatchedNodes}
+          recentlyEdited={mockRecentlyEdited}
+          username="test.user@example.com"
+          loading={false}
+        />
+      </MemoryRouter>,
+    );
+
+    fireEvent.click(screen.getByText('Watched (1)'));
+
+    // Should show watched-only nodes (not owned)
+    expect(screen.getByText('default.watched_metric')).toBeInTheDocument();
+    expect(screen.queryByText('default.owned_metric')).not.toBeInTheDocument();
+  });
+
+  it('should switch to recent edits tab', () => {
+    render(
+      <MemoryRouter>
+        <MyNodesSection
+          ownedNodes={mockOwnedNodes}
+          watchedNodes={mockWatchedNodes}
+          recentlyEdited={mockRecentlyEdited}
+          username="test.user@example.com"
+          loading={false}
+        />
+      </MemoryRouter>,
+    );
+
+    fireEvent.click(screen.getByText('Recent Edits (1)'));
+
+    expect(screen.getByText('default.edited_metric')).toBeInTheDocument();
+  });
+
+  it('should show empty state for active tab with no nodes', () => {
+    render(
+      <MemoryRouter>
+        <MyNodesSection
+          ownedNodes={mockOwnedNodes}
+          watchedNodes={[]}
+          recentlyEdited={[]}
+          username="test.user@example.com"
+          loading={false}
+        />
+      </MemoryRouter>,
+    );
+
+    fireEvent.click(screen.getByText('Watched (0)'));
+
+    expect(screen.getByText('No watched nodes')).toBeInTheDocument();
+  });
+
+  it('should limit displayed nodes to 8', () => {
+    const manyNodes = Array.from({ length: 15 }, (_, i) => ({
+      name: `default.metric_${i}`,
+      type: 'METRIC',
+      current: { displayName: `Metric ${i}`, updatedAt: '2024-01-01' },
+    }));
+
+    render(
+      <MemoryRouter>
+        <MyNodesSection
+          ownedNodes={manyNodes}
+          watchedNodes={[]}
+          recentlyEdited={[]}
+          username="test.user@example.com"
+          loading={false}
+        />
+      </MemoryRouter>,
+    );
+
+    // Should show "+7 more" text
+    expect(screen.getByText('+7 more')).toBeInTheDocument();
+  });
+
+  it('should link to browse page with username filter', () => {
+    render(
+      <MemoryRouter>
+        <MyNodesSection
+          ownedNodes={mockOwnedNodes}
+          watchedNodes={[]}
+          recentlyEdited={[]}
+          username="test.user@example.com"
+          loading={false}
+        />
+      </MemoryRouter>,
+    );
+
+    // The "View All →" link should have the username filter
+    const viewAllLink = screen.getByText('View All →').closest('a');
+    expect(viewAllLink).toHaveAttribute(
+      'href',
+      '/?ownedBy=test.user@example.com',
+    );
+  });
+
+  it('should filter watched nodes to exclude owned nodes', () => {
+    const ownedNodes = [
+      { name: 'node1', type: 'METRIC', current: {} },
+      { name: 'node2', type: 'METRIC', current: {} },
+    ];
+    const watchedNodes = [
+      { name: 'node1', type: 'METRIC', current: {} }, // Also owned
+      { name: 'node3', type: 'METRIC', current: {} }, // Watched only
+    ];
+
+    render(
+      <MemoryRouter>
+        <MyNodesSection
+          ownedNodes={ownedNodes}
+          watchedNodes={watchedNodes}
+          recentlyEdited={[]}
+          username="test.user@example.com"
+          loading={false}
+        />
+      </MemoryRouter>,
+    );
+
+    // Watched tab should only show 1 (watched-only nodes)
+    expect(screen.getByText('Watched (1)')).toBeInTheDocument();
+  });
+
+  describe('Group by Type feature', () => {
+    beforeEach(() => {
+      localStorage.clear();
+    });
+
+    it('should show group by type toggle when nodes exist', () => {
+      render(
+        <MemoryRouter>
+          <MyNodesSection
+            ownedNodes={mockOwnedNodes}
+            watchedNodes={[]}
+            recentlyEdited={[]}
+            username="test.user@example.com"
+            loading={false}
+          />
+        </MemoryRouter>,
+      );
+
+      expect(screen.getByLabelText('Group by Type')).toBeInTheDocument();
+    });
+
+    it('should not show toggle when no nodes', () => {
+      render(
+        <MemoryRouter>
+          <MyNodesSection
+            ownedNodes={[]}
+            watchedNodes={[]}
+            recentlyEdited={[]}
+            username="test.user@example.com"
+            loading={false}
+          />
+        </MemoryRouter>,
+      );
+
+      expect(screen.queryByLabelText('Group by Type')).not.toBeInTheDocument();
+    });
+
+    it('should toggle between list and grouped view', () => {
+      render(
+        <MemoryRouter>
+          <MyNodesSection
+            ownedNodes={mockOwnedNodes}
+            watchedNodes={[]}
+            recentlyEdited={[]}
+            username="test.user@example.com"
+            loading={false}
+          />
+        </MemoryRouter>,
+      );
+
+      // Initially should show list view
+      expect(screen.getByTestId('node-list')).toBeInTheDocument();
+      expect(screen.queryByTestId('type-group-grid')).not.toBeInTheDocument();
+
+      // Click toggle
+      const toggle = screen.getByLabelText('Group by Type');
+      fireEvent.click(toggle);
+
+      // Should now show grouped view
+      expect(screen.queryByTestId('node-list')).not.toBeInTheDocument();
+      expect(screen.getByTestId('type-group-grid')).toBeInTheDocument();
+    });
+
+    it('should persist toggle state to localStorage', () => {
+      render(
+        <MemoryRouter>
+          <MyNodesSection
+            ownedNodes={mockOwnedNodes}
+            watchedNodes={[]}
+            recentlyEdited={[]}
+            username="test.user@example.com"
+            loading={false}
+          />
+        </MemoryRouter>,
+      );
+
+      const toggle = screen.getByLabelText('Group by Type');
+      fireEvent.click(toggle);
+
+      expect(localStorage.getItem('workspace_groupByType')).toBe('true');
+
+      fireEvent.click(toggle);
+      expect(localStorage.getItem('workspace_groupByType')).toBe('false');
+    });
+
+    it('should load toggle state from localStorage', () => {
+      localStorage.setItem('workspace_groupByType', 'true');
+
+      render(
+        <MemoryRouter>
+          <MyNodesSection
+            ownedNodes={mockOwnedNodes}
+            watchedNodes={[]}
+            recentlyEdited={[]}
+            username="test.user@example.com"
+            loading={false}
+          />
+        </MemoryRouter>,
+      );
+
+      // Should show grouped view on mount
+      expect(screen.getByTestId('type-group-grid')).toBeInTheDocument();
+      expect(screen.getByLabelText('Group by Type')).toBeChecked();
+    });
+
+    it('should group nodes by type correctly', () => {
+      const mixedNodes = [
+        { name: 'metric1', type: 'metric', current: {} },
+        { name: 'metric2', type: 'metric', current: {} },
+        { name: 'dim1', type: 'dimension', current: {} },
+        { name: 'source1', type: 'source', current: {} },
+      ];
+
+      render(
+        <MemoryRouter>
+          <MyNodesSection
+            ownedNodes={mixedNodes}
+            watchedNodes={[]}
+            recentlyEdited={[]}
+            username="test.user@example.com"
+            loading={false}
+          />
+        </MemoryRouter>,
+      );
+
+      const toggle = screen.getByLabelText('Group by Type');
+      fireEvent.click(toggle);
+
+      expect(screen.getByText('metric: 2 nodes')).toBeInTheDocument();
+      expect(screen.getByText('dimension: 1 nodes')).toBeInTheDocument();
+      expect(screen.getByText('source: 1 nodes')).toBeInTheDocument();
+    });
+  });
+});