datajunction-ui 0.0.92 → 0.0.94

package/src/app/pages/NodePage/__tests__/NodeDataFlowTab.test.jsx

@@ -0,0 +1,428 @@
+import React from 'react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import DJClientContext from '../../../providers/djclient';
+import NodeDataFlowTab from '../NodeDataFlowTab';
+
+// Sankey mock renders the node/link elements with fake props so SankeyNode/SankeyLink are covered
+jest.mock('recharts', () => {
+  const React = require('react');
+  return {
+    Sankey: ({ node: nodeEl, link: linkEl, data, children }) => {
+      const nodes = data?.nodes || [];
+      const makeNode = (payload, extra = {}) =>
+        React.isValidElement(nodeEl)
+          ? React.cloneElement(nodeEl, {
+              x: 10,
+              y: 10,
+              width: 20,
+              height: 30,
+              payload,
+              hoveredNodeName: null,
+              onNodeHover: () => {},
+              onNavigate: () => {},
+              ...extra,
+            })
+          : null;
+      const makeLink = (payload, extra = {}) =>
+        React.isValidElement(linkEl)
+          ? React.cloneElement(linkEl, {
+              sourceX: 0,
+              targetX: 100,
+              sourceY: 50,
+              targetY: 50,
+              sourceControlX: 30,
+              targetControlX: 70,
+              linkWidth: 5,
+              index: 0,
+              payload,
+              ...extra,
+            })
+          : null;
+      const firstNode = nodes[0];
+      const secondNode = nodes[1] || nodes[0];
+      return (
+        <div data-testid="sankey">
+          {/* SankeyNode: null payload → returns null */}
+          {makeNode(null)}
+          {/* SankeyNode: phantom type → returns <g/> */}
+          {firstNode && makeNode({ ...firstNode, type: 'phantom' })}
+          {/* SankeyNode: normal */}
+          {firstNode && makeNode(firstNode)}
+          {/* SankeyNode: hovered (isHovered=true) */}
+          {firstNode &&
+            makeNode(firstNode, { hoveredNodeName: firstNode.name })}
+          {/* SankeyNode: dimmed (hoveredNodeName !== this node) */}
+          {firstNode && makeNode(firstNode, { hoveredNodeName: 'other.node' })}
+          {/* SankeyNode: no name → cursor:default */}
+          {makeNode({ type: 'metric', display_name: 'No Name Node' })}
+          {/* SankeyLink: phantom target → returns <g/> */}
+          {firstNode &&
+            secondNode &&
+            makeLink({
+              source: firstNode,
+              target: { ...secondNode, type: 'phantom' },
+            })}
+          {/* SankeyLink: no hover */}
+          {firstNode &&
+            secondNode &&
+            makeLink({ source: firstNode, target: secondNode })}
+          {/* SankeyLink: hovered matching source → isConnected=true, opacity=0.8 */}
+          {firstNode &&
+            secondNode &&
+            makeLink(
+              { source: firstNode, target: secondNode },
+              { hoveredNodeName: firstNode.name },
+            )}
+          {/* SankeyLink: hovered not matching → isConnected=false, opacity=0.15 */}
+          {firstNode &&
+            secondNode &&
+            makeLink(
+              { source: firstNode, target: secondNode },
+              { hoveredNodeName: 'something.else' },
+            )}
+          {children}
+        </div>
+      );
+    },
+    // Tooltip mock invokes the content function with various args to cover lines 413-421
+    Tooltip: ({ content }) => {
+      if (typeof content !== 'function') return null;
+      return (
+        <div data-testid="tooltip">
+          {/* active=false → line 413 returns null */}
+          {content({
+            active: false,
+            payload: [{ payload: { name: 'test', type: 'metric' } }],
+          })}
+          {/* payload empty → line 413 returns null */}
+          {content({ active: true, payload: [] })}
+          {/* item=null → line 415 returns null */}
+          {content({ active: true, payload: [{}] })}
+          {/* item.name exists + item.type → lines 416-421 */}
+          {content({
+            active: true,
+            payload: [{ payload: { name: 'a.b.metric', type: 'metric' } }],
+          })}
+          {/* item.name falsy → uses source→target fallback (line 418) */}
+          {content({
+            active: true,
+            payload: [
+              {
+                payload: {
+                  source: { display_name: 'Src Node', name: 'src' },
+                  target: { name: 'tgt' },
+                },
+              },
+            ],
+          })}
+          {/* item.name falsy, source has no display_name → uses source.name */}
+          {content({
+            active: true,
+            payload: [
+              {
+                payload: {
+                  source: { name: 'src.node' },
+                  target: { display_name: 'Target Display' },
+                },
+              },
+            ],
+          })}
+        </div>
+      );
+    },
+  };
+});
+
+// ResizeObserver fires callback immediately so containerWidth gets set to 800
+beforeAll(() => {
+  global.ResizeObserver = function (callback) {
+    return {
+      observe: function (el) {
+        callback([{ contentRect: { width: 800 } }]);
+      },
+      disconnect: function () {},
+    };
+  };
+  HTMLCanvasElement.prototype.getContext = () => ({
+    font: '',
+    measureText: () => ({ width: 50 }),
+  });
+});
+
+describe('<NodeDataFlowTab />', () => {
+  const mockDjClient = {
+    upstreamsGQL: jest.fn(),
+    downstreamsGQL: jest.fn(),
+    findCubesWithMetrics: jest.fn(),
+  };
+
+  const renderWithContext = djNode =>
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <MemoryRouter>
+          <NodeDataFlowTab djNode={djNode} />
+        </MemoryRouter>
+      </DJClientContext.Provider>,
+    );
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockDjClient.findCubesWithMetrics.mockResolvedValue([]);
+  });
+
+  it('stays in loading state when djNode has no name (line 186 early return)', async () => {
+    renderWithContext({});
+    // Effect returns early, loading stays true — no API calls
+    expect(mockDjClient.upstreamsGQL).not.toHaveBeenCalled();
+    expect(
+      screen.queryByText('No data flow relationships found for this node.'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('shows "No data flow relationships" when dag and downstreams return empty arrays', async () => {
+    // Use a source node — metrics get phantom links which make links.length > 0
+    const djNode = { name: 'default.source1', type: 'source', parents: [] };
+    mockDjClient.upstreamsGQL.mockResolvedValue([]);
+    mockDjClient.downstreamsGQL.mockResolvedValue([]);
+
+    renderWithContext(djNode);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('No data flow relationships found for this node.'),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('renders Sankey when links exist between nodes', async () => {
+    const source = {
+      name: 'default.source1',
+      type: 'source',
+      current: { parents: [] },
+    };
+    const djNode = {
+      name: 'default.metric1',
+      type: 'metric',
+      parents: [{ name: 'default.source1' }],
+    };
+    mockDjClient.upstreamsGQL.mockResolvedValue([source]);
+    mockDjClient.downstreamsGQL.mockResolvedValue([]);
+
+    renderWithContext(djNode);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('sankey')).toBeInTheDocument();
+    });
+  });
+
+  it('handles error from Promise.all gracefully (lines 268-269)', async () => {
+    const consoleSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+    const djNode = { name: 'default.metric1', type: 'metric', parents: [] };
+    mockDjClient.upstreamsGQL.mockRejectedValue(new Error('Network error'));
+    mockDjClient.downstreamsGQL.mockResolvedValue([]);
+
+    renderWithContext(djNode);
+
+    await waitFor(() => {
+      expect(consoleSpy).toHaveBeenCalledWith(expect.any(Error));
+    });
+    expect(
+      screen.getByText('No data flow relationships found for this node.'),
+    ).toBeInTheDocument();
+    consoleSpy.mockRestore();
+  });
+
+  it('filters CUBE type from downstream nodes and calls findCubesWithMetrics (lines 195-196)', async () => {
+    const djNode = {
+      name: 'default.metric1',
+      type: 'metric',
+      parents: [],
+    };
+    mockDjClient.upstreamsGQL.mockResolvedValue([]);
+    mockDjClient.downstreamsGQL.mockResolvedValue([
+      {
+        name: 'default.cube1',
+        type: 'CUBE',
+        current: { parents: [{ name: 'default.metric1' }] },
+      },
+      {
+        name: 'default.transform1',
+        type: 'TRANSFORM',
+        current: { parents: [{ name: 'default.metric1' }] },
+      },
+    ]);
+    // cube has metric as parent → creates a link
+    mockDjClient.findCubesWithMetrics.mockResolvedValue([
+      {
+        name: 'default.cube1',
+        type: 'cube',
+        parents: [{ name: 'default.metric1' }],
+      },
+    ]);
+
+    renderWithContext(djNode);
+
+    await waitFor(() => {
+      expect(mockDjClient.findCubesWithMetrics).toHaveBeenCalledWith([
+        'default.cube1',
+      ]);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('sankey')).toBeInTheDocument();
+    });
+  });
+
+  it('covers sort return 0 branch for same-type non-seed nodes (line 220)', async () => {
+    // Two source nodes, neither is the seed (metric1) — sort returns 0
+    const source1 = {
+      name: 'default.source1',
+      type: 'source',
+      current: { parents: [] },
+    };
+    const source2 = {
+      name: 'default.source2',
+      type: 'source',
+      current: { parents: [] },
+    };
+    const djNode = {
+      name: 'default.metric1',
+      type: 'metric',
+      parents: [{ name: 'default.source1' }, { name: 'default.source2' }],
+    };
+    mockDjClient.upstreamsGQL.mockResolvedValue([source1, source2]);
+    mockDjClient.downstreamsGQL.mockResolvedValue([]);
+
+    renderWithContext(djNode);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('sankey')).toBeInTheDocument();
+    });
+  });
+
+  it('covers SankeyLink hover (linkHovered=true) via mouseEnter on path', async () => {
+    const source = {
+      name: 'default.source1',
+      type: 'source',
+      current: { parents: [] },
+    };
+    const djNode = {
+      name: 'default.metric1',
+      type: 'metric',
+      parents: [{ name: 'default.source1' }],
+    };
+    mockDjClient.upstreamsGQL.mockResolvedValue([source]);
+    mockDjClient.downstreamsGQL.mockResolvedValue([]);
+
+    const { container } = renderWithContext(djNode);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('sankey')).toBeInTheDocument();
+    });
+
+    // Trigger linkHovered=true to cover the 0.85 opacity branch (line 137)
+    const path = container.querySelector('path');
+    if (path) {
+      fireEvent.mouseEnter(path);
+      fireEvent.mouseLeave(path);
+    }
+  });
+
+  it('covers ResizeObserver callback setting containerWidth (line 179)', async () => {
+    const djNode = {
+      name: 'default.metric1',
+      type: 'metric',
+      parents: [{ name: 'default.source1' }],
+    };
+    const source = {
+      name: 'default.source1',
+      type: 'source',
+      current: { parents: [] },
+    };
+    mockDjClient.upstreamsGQL.mockResolvedValue([source]);
+    mockDjClient.downstreamsGQL.mockResolvedValue([]);
+
+    renderWithContext(djNode);
+
+    // ResizeObserver mock fires immediately with width=800 → containerWidth>0 → Sankey renders
+    await waitFor(() => {
+      expect(screen.getByTestId('sankey')).toBeInTheDocument();
+    });
+  });
+
+  it('renders SankeyNode with rightmostType=metric when no cubes', async () => {
+    const source = {
+      name: 'default.source1',
+      type: 'source',
+      current: { parents: [] },
+    };
+    const transform = {
+      name: 'default.transform1',
+      type: 'transform',
+      current: { parents: [{ name: 'default.source1' }] },
+    };
+    const djNode = {
+      name: 'default.metric1',
+      type: 'metric',
+      parents: [{ name: 'default.transform1' }],
+    };
+    mockDjClient.upstreamsGQL.mockResolvedValue([source, transform]);
+    mockDjClient.downstreamsGQL.mockResolvedValue([]);
+
+    renderWithContext(djNode);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('sankey')).toBeInTheDocument();
+    });
+  });
+
+  it('includes dimension nodes in the flow graph (they have data lineage like transforms)', async () => {
+    const dimNode = {
+      name: 'default.dim1',
+      type: 'dimension',
+      current: { parents: [{ name: 'default.source1' }] },
+    };
+    const djNode = {
+      name: 'default.metric1',
+      type: 'metric',
+      parents: [{ name: 'default.source1' }],
+    };
+    const source = {
+      name: 'default.source1',
+      type: 'source',
+      current: { parents: [] },
+    };
+    mockDjClient.upstreamsGQL.mockResolvedValue([dimNode, source]);
+    mockDjClient.downstreamsGQL.mockResolvedValue([]);
+
+    renderWithContext(djNode);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('sankey')).toBeInTheDocument();
+    });
+  });
+
+  it('shows data flow for a dimension node viewed directly', async () => {
+    const djNode = {
+      name: 'default.dispatcher',
+      type: 'dimension',
+      parents: [{ name: 'default.dispatchers_source' }],
+    };
+    const source = {
+      name: 'default.dispatchers_source',
+      type: 'source',
+      current: { parents: [] },
+    };
+    mockDjClient.upstreamsGQL.mockResolvedValue([source]);
+    mockDjClient.downstreamsGQL.mockResolvedValue([]);
+
+    renderWithContext(djNode);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('sankey')).toBeInTheDocument();
+    });
+  });
+});

package/src/app/pages/NodePage/__tests__/NodeDependenciesTab.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, waitFor, screen } from '@testing-library/react';
-import NodeDependenciesTab from '../NodeDependenciesTab';
+import NodeDependenciesTab, { NodeList } from '../NodeDependenciesTab';
 
 describe('<NodeDependenciesTab />', () => {
   const mockDjClient = {
@@ -135,6 +135,23 @@ describe('<NodeDependenciesTab />', () => {
     mockDjClient.downstreamsGQL.mockReset();
   });
 
+  it('skips fetching when node is null (line 12 false branch)', () => {
+    render(<NodeDependenciesTab node={null} djClient={mockDjClient} />);
+    expect(mockDjClient.upstreamsGQL).not.toHaveBeenCalled();
+    expect(mockDjClient.downstreamsGQL).not.toHaveBeenCalled();
+    expect(mockDjClient.nodeDimensions).not.toHaveBeenCalled();
+  });
+
+  it('renders "None" for NodeList with empty array (lines 127-131)', () => {
+    render(<NodeList nodes={[]} />);
+    expect(screen.getByText('None')).toBeInTheDocument();
+  });
+
+  it('renders "None" for NodeList with null nodes', () => {
+    render(<NodeList nodes={null} />);
+    expect(screen.getByText('None')).toBeInTheDocument();
+  });
+
   it('renders nodes with dimensions', async () => {
     // Use mockResolvedValue since the component now uses .then()
     mockDjClient.nodeDimensions.mockResolvedValue(mockDimensions);