datajunction-ui 0.0.1-a1 → 0.0.1-a101

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

@@ -0,0 +1,148 @@
+import React from 'react';
+import { render, waitFor, screen } from '@testing-library/react';
+import NodeMaterializationTab from '../NodeMaterializationTab';
+
+describe('<NodeMaterializationTab />', () => {
+  const mockDjClient = {
+    node: jest.fn(),
+    materializations: jest.fn(),
+  };
+
+  const mockMaterializations = [
+    {
+      name: 'mat_one',
+      config: {},
+      schedule: '@daily',
+      job: 'SparkSqlMaterializationJob',
+      backfills: [
+        {
+          spec: [
+            {
+              column_name: 'date',
+              values: ['20200101'],
+              range: ['20201010'],
+            },
+          ],
+          urls: ['https://example.com/'],
+        },
+      ],
+      strategy: 'full',
+      output_tables: ['table1'],
+      urls: ['https://example.com/'],
+    },
+  ];
+
+  const mockNode = {
+    node_revision_id: 1,
+    node_id: 1,
+    type: 'source',
+    name: 'default.repair_orders',
+    display_name: 'Default: Repair Orders',
+    version: 'v1.0',
+    status: 'valid',
+    mode: 'published',
+    catalog: {
+      id: 1,
+      uuid: '0fc18295-e1a2-4c3c-b72a-894725c12488',
+      created_at: '2023-08-21T16:48:51.146121+00:00',
+      updated_at: '2023-08-21T16:48:51.146122+00:00',
+      extra_params: {},
+      name: 'warehouse',
+    },
+    schema_: 'roads',
+    table: 'repair_orders',
+    description: 'Repair orders',
+    query: null,
+    availability: {
+      catalog: 'default',
+      categorical_partitions: [],
+      max_temporal_partition: ['2023', '01', '25'],
+      min_temporal_partition: ['2022', '01', '01'],
+      partitions: [],
+      schema_: 'foo',
+      table: 'bar',
+      temporal_partitions: [],
+      valid_through_ts: 1729667463,
+      url: 'https://www.table.com',
+      links: { dashboard: 'https://www.foobar.com/dashboard' },
+    },
+    columns: [
+      {
+        name: 'repair_order_id',
+        type: 'int',
+        attributes: [],
+        dimension: null,
+        partition: {
+          type_: 'temporal',
+          format: 'YYYYMMDD',
+          granularity: 'day',
+        },
+      },
+      {
+        name: 'municipality_id',
+        type: 'string',
+        attributes: [],
+        dimension: null,
+        partition: null,
+      },
+      {
+        name: 'hard_hat_id',
+        type: 'int',
+        attributes: [],
+        dimension: null,
+        partition: null,
+      },
+    ],
+    updated_at: '2023-08-21T16:48:52.880498+00:00',
+    materializations: [
+      {
+        name: 'mat1',
+        config: {},
+        schedule: 'string',
+        job: 'string',
+        backfills: [
+          {
+            spec: [
+              {
+                column_name: 'string',
+                values: ['string'],
+                range: ['string'],
+              },
+            ],
+            urls: ['string'],
+          },
+        ],
+        strategy: 'string',
+        output_tables: ['string'],
+        urls: ['https://example.com/'],
+      },
+    ],
+    parents: [],
+    dimension_links: [
+      {
+        dimension: {
+          name: 'default.contractor',
+        },
+        join_type: 'left',
+        join_sql:
+          'default.contractor.contractor_id = default.repair_orders.contractor_id',
+        join_cardinality: 'one_to_one',
+        role: 'contractor',
+      },
+    ],
+  };
+
+  beforeEach(() => {
+    mockDjClient.materializations.mockReset();
+  });
+
+  it('renders NodeMaterializationTab tab correctly', async () => {
+    mockDjClient.materializations.mockReturnValue(mockMaterializations);
+
+    render(<NodeMaterializationTab node={mockNode} djClient={mockDjClient} />);
+    await waitFor(() => {
+      const link = screen.getByText('dashboard').closest('a');
+      expect(link).toHaveAttribute('href', `https://www.foobar.com/dashboard`);
+    });
+  });
+});

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

@@ -23,12 +23,15 @@ describe('<NodePage />', () => {
       DataJunctionAPI: {
         node: jest.fn(),
         metric: jest.fn(),
+        getMetric: jest.fn(),
+        revalidate: jest.fn().mockReturnValue({ status: 'valid' }),
         node_dag: jest.fn().mockReturnValue(mocks.mockNodeDAG),
         clientCode: jest.fn().mockReturnValue('dj_client = DJClient()'),
         columns: jest.fn(),
         history: jest.fn(),
         revisions: jest.fn(),
         materializations: jest.fn(),
+        materializationInfo: jest.fn(),
         sql: jest.fn(),
         cube: jest.fn(),
         compiledSql: jest.fn(),
@@ -38,6 +41,8 @@ describe('<NodePage />', () => {
         dimensions: jest.fn(),
         setPartition: jest.fn(),
         engines: jest.fn(),
+        streamNodeData: jest.fn(),
+        nodeDimensions: jest.fn(),
       },
     };
   };
@@ -68,6 +73,7 @@ describe('<NodePage />', () => {
       query:
         'SELECT  avg(price) default_DOT_avg_repair_price \n FROM default.repair_order_details\n\n',
       availability: null,
+      dimension_links: [],
       columns: [
         {
           name: 'default_DOT_avg_repair_price',
@@ -87,6 +93,7 @@ describe('<NodePage />', () => {
       created_at: '2023-08-21T16:48:56.932162+00:00',
       tags: [{ name: 'purpose', display_name: 'Purpose' }],
       primary_key: [],
+      incompatible_druid_functions: ['IF'],
       createNodeClientCode:
         'dj = DJBuilder(DJ_URL)\n\navg_repair_price = dj.create_metric(\n    description="Average repair price",\n    display_name="Default: Avg Repair Price",\n    name="default.avg_repair_price",\n    primary_key=[],\n    query="""SELECT  avg(price) default_DOT_avg_repair_price \n FROM default.repair_order_details\n\n"""\n)',
       dimensions: [
@@ -270,19 +277,21 @@ describe('<NodePage />', () => {
     },
   };
 
-  it('renders the NodeInfo tab correctly', async () => {
+  it('renders the NodeInfo tab correctly for a metric node', async () => {
     const djClient = mockDJClient();
     djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
-    djClient.DataJunctionAPI.metric.mockReturnValue(mocks.mockMetricNode);
+    djClient.DataJunctionAPI.getMetric.mockReturnValue(
+      mocks.mockMetricNodeJson,
+    );
     const element = (
       <DJClientContext.Provider value={djClient}>
         <NodePage {...defaultProps} />
       </DJClientContext.Provider>
     );
     const { container } = render(
-      <MemoryRouter initialEntries={['/nodes/default.num_repair_orders']}>
+      <MemoryRouter initialEntries={['/nodes/default.num_repair_orders/info']}>
         <Routes>
-          <Route path="nodes/:name" element={element} />
+          <Route path="nodes/:name/:tab" element={element} />
         </Routes>
       </MemoryRouter>,
     );
@@ -291,7 +300,6 @@ describe('<NodePage />', () => {
       expect(djClient.DataJunctionAPI.node).toHaveBeenCalledWith(
         'default.num_repair_orders',
       );
-      userEvent.click(screen.getByRole('button', { name: 'Info' }));
 
       expect(
         screen.getByRole('dialog', { name: 'NodeName' }),
@@ -315,8 +323,8 @@ describe('<NodePage />', () => {
       );
 
       expect(
-        screen.getByRole('dialog', { name: 'PrimaryKey' }),
-      ).toHaveTextContent('repair_order_id, country');
+        screen.getByRole('dialog', { name: 'RequiredDimensions' }),
+      ).toHaveTextContent('');
 
       expect(
         screen.getByRole('dialog', { name: 'DisplayName' }),
@@ -394,7 +402,9 @@ describe('<NodePage />', () => {
   it('renders the NodeColumns tab correctly', async () => {
     const djClient = mockDJClient();
     djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
-    djClient.DataJunctionAPI.metric.mockReturnValue(mocks.mockMetricNode);
+    djClient.DataJunctionAPI.getMetric.mockReturnValue(
+      mocks.mockMetricNodeJson,
+    );
     djClient.DataJunctionAPI.columns.mockReturnValue(mocks.metricNodeColumns);
     djClient.DataJunctionAPI.attributes.mockReturnValue(mocks.attributes);
     djClient.DataJunctionAPI.dimensions.mockReturnValue(mocks.dimensions);
@@ -410,14 +420,15 @@ describe('<NodePage />', () => {
       </DJClientContext.Provider>
     );
     render(
-      <MemoryRouter initialEntries={['/nodes/default.num_repair_orders']}>
+      <MemoryRouter
+        initialEntries={['/nodes/default.num_repair_orders/columns']}
+      >
         <Routes>
-          <Route path="nodes/:name" element={element} />
+          <Route path="nodes/:name/:tab" element={element} />
         </Routes>
       </MemoryRouter>,
     );
     await waitFor(() => {
-      fireEvent.click(screen.getByRole('button', { name: 'Columns' }));
       expect(djClient.DataJunctionAPI.columns).toHaveBeenCalledWith(
         mocks.mockMetricNode,
       );
@@ -464,13 +475,15 @@ describe('<NodePage />', () => {
       fireEvent.click(savePartition);
       expect(screen.getByText('Saved!'));
     });
-  });
+  }, 60000);
   // check compiled SQL on nodeInfo page
 
   it('renders the NodeHistory tab correctly', async () => {
     const djClient = mockDJClient();
     djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
-    djClient.DataJunctionAPI.metric.mockReturnValue(mocks.mockMetricNode);
+    djClient.DataJunctionAPI.getMetric.mockReturnValue(
+      mocks.mockMetricNodeJson,
+    );
     djClient.DataJunctionAPI.columns.mockReturnValue(mocks.metricNodeColumns);
     djClient.DataJunctionAPI.history.mockReturnValue(mocks.metricNodeHistory);
     djClient.DataJunctionAPI.revisions.mockReturnValue(
@@ -483,9 +496,11 @@ describe('<NodePage />', () => {
       </DJClientContext.Provider>
     );
     const { container } = render(
-      <MemoryRouter initialEntries={['/nodes/default.num_repair_orders']}>
+      <MemoryRouter
+        initialEntries={['/nodes/default.num_repair_orders/history']}
+      >
         <Routes>
-          <Route path="nodes/:name" element={element} />
+          <Route path="nodes/:name/:tab" element={element} />
         </Routes>
       </MemoryRouter>,
     );
@@ -498,15 +513,9 @@ describe('<NodePage />', () => {
         'node',
         mocks.mockMetricNode.name,
       );
-      expect(djClient.DataJunctionAPI.revisions).toHaveBeenCalledWith(
-        mocks.mockMetricNode.name,
-      );
       expect(
-        screen.getByRole('table', { name: 'Revisions' }),
-      ).toMatchSnapshot();
-      expect(screen.getByRole('table', { name: 'Activity' })).toHaveTextContent(
-        'ActivityTypeNameUserTimestampDetailscreatenodedefault.avg_repair_priceunknown2023-08-21T16:48:56.950482+00:00',
-      );
+        screen.getByRole('list', { name: 'Activity' }),
+      ).toBeInTheDocument();
       screen
         .queryAllByRole('cell', {
           name: 'HistoryAttribute',
@@ -542,14 +551,12 @@ describe('<NodePage />', () => {
             'Status changed from valid to invalid Caused by a change in upstream default.repair_order_details',
           ),
         );
-      screen.debug();
     });
   });
 
   it('renders compiled sql correctly', async () => {
     const djClient = mockDJClient();
-    djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
-    djClient.DataJunctionAPI.metric.mockReturnValue(mocks.mockMetricNode);
+    djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockTransformNode);
     djClient.DataJunctionAPI.columns.mockReturnValue(mocks.metricNodeColumns);
     djClient.DataJunctionAPI.compiledSql.mockReturnValue('select 1');
 
@@ -559,7 +566,7 @@ describe('<NodePage />', () => {
       </DJClientContext.Provider>
     );
     render(
-      <MemoryRouter initialEntries={['/nodes/default.num_repair_orders']}>
+      <MemoryRouter initialEntries={[`/nodes/${mocks.mockTransformNode.name}`]}>
         <Routes>
           <Route path="nodes/:name" element={element} />
         </Routes>
@@ -568,7 +575,7 @@ describe('<NodePage />', () => {
     await waitFor(() => {
       fireEvent.click(screen.getByRole('checkbox', { name: 'ToggleSwitch' }));
       expect(djClient.DataJunctionAPI.compiledSql).toHaveBeenCalledWith(
-        mocks.mockMetricNode.name,
+        mocks.mockTransformNode.name,
       );
     });
   });
@@ -576,7 +583,9 @@ describe('<NodePage />', () => {
   it('renders an empty NodeMaterialization tab correctly', async () => {
     const djClient = mockDJClient();
     djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
-    djClient.DataJunctionAPI.metric.mockReturnValue(mocks.mockMetricNode);
+    djClient.DataJunctionAPI.getMetric.mockReturnValue(
+      mocks.mockMetricNodeJson,
+    );
     djClient.DataJunctionAPI.columns.mockReturnValue(mocks.metricNodeColumns);
     djClient.DataJunctionAPI.materializations.mockReturnValue([]);
 
@@ -586,9 +595,11 @@ describe('<NodePage />', () => {
       </DJClientContext.Provider>
     );
     render(
-      <MemoryRouter initialEntries={['/nodes/default.num_repair_orders']}>
+      <MemoryRouter
+        initialEntries={['/nodes/default.num_repair_orders/materializations']}
+      >
         <Routes>
-          <Route path="nodes/:name" element={element} />
+          <Route path="nodes/:name/:tab" element={element} />
         </Routes>
       </MemoryRouter>,
     );
@@ -606,22 +617,32 @@ describe('<NodePage />', () => {
 
   it('renders the NodeMaterialization tab with materializations correctly', async () => {
     const djClient = mockDJClient();
-    djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
-    djClient.DataJunctionAPI.metric.mockReturnValue(mocks.mockMetricNode);
+    djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockTransformNode);
+    djClient.DataJunctionAPI.getMetric.mockReturnValue(
+      mocks.mockMetricNodeJson,
+    );
     djClient.DataJunctionAPI.columns.mockReturnValue(mocks.metricNodeColumns);
     djClient.DataJunctionAPI.materializations.mockReturnValue(
       mocks.nodeMaterializations,
     );
 
+    djClient.DataJunctionAPI.materializationInfo.mockReturnValue(
+      mocks.materializationInfo,
+    );
+
     const element = (
       <DJClientContext.Provider value={djClient}>
         <NodePage />
       </DJClientContext.Provider>
     );
     render(
-      <MemoryRouter initialEntries={['/nodes/default.num_repair_orders']}>
+      <MemoryRouter
+        initialEntries={[
+          '/nodes/default.repair_order_transform/materializations',
+        ]}
+      >
         <Routes>
-          <Route path="nodes/:name" element={element} />
+          <Route path="nodes/:name/:tab" element={element} />
         </Routes>
       </MemoryRouter>,
     );
@@ -631,52 +652,129 @@ describe('<NodePage />', () => {
           screen.getByRole('button', { name: 'Materializations' }),
         );
         expect(djClient.DataJunctionAPI.node).toHaveBeenCalledWith(
-          mocks.mockMetricNode.name,
+          mocks.mockTransformNode.name,
         );
         expect(djClient.DataJunctionAPI.materializations).toHaveBeenCalledWith(
-          mocks.mockMetricNode.name,
+          mocks.mockTransformNode.name,
         );
-
-        expect(
-          screen.getByRole('table', { name: 'Materializations' }),
-        ).toMatchSnapshot();
       },
       { timeout: 3000 },
     );
   }, 60000);
 
-  it('renders the NodeSQL tab', async () => {
+  it('renders the NodeValidate tab', async () => {
     const djClient = mockDJClient();
+    window.scrollTo = jest.fn();
     djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
-    djClient.DataJunctionAPI.metric.mockReturnValue(mocks.mockMetricNode);
+    djClient.DataJunctionAPI.nodeDimensions.mockReturnValue([]);
+    djClient.DataJunctionAPI.getMetric.mockReturnValue(
+      mocks.mockMetricNodeJson,
+    );
     djClient.DataJunctionAPI.columns.mockReturnValue(mocks.metricNodeColumns);
-    djClient.DataJunctionAPI.sql.mockReturnValue(mocks.metricNodeColumns);
+    djClient.DataJunctionAPI.sql.mockReturnValue({
+      sql: 'SELECT * FROM testNode',
+    });
+    const streamNodeData = {
+      onmessage: jest.fn(),
+      onerror: jest.fn(),
+      close: jest.fn(),
+    };
+    djClient.DataJunctionAPI.streamNodeData.mockResolvedValue(streamNodeData);
+    djClient.DataJunctionAPI.streamNodeData.mockResolvedValueOnce({
+      state: 'FINISHED',
+      results: [
+        {
+          columns: [{ name: 'column1' }, { name: 'column2' }],
+          rows: [
+            [1, 'value1'],
+            [2, 'value2'],
+          ],
+        },
+      ],
+    });
+
     const element = (
       <DJClientContext.Provider value={djClient}>
         <NodePage />
       </DJClientContext.Provider>
     );
     render(
-      <MemoryRouter initialEntries={['/nodes/default.num_repair_orders']}>
+      <MemoryRouter
+        initialEntries={['/nodes/default.num_repair_orders/validate']}
+      >
         <Routes>
-          <Route path="nodes/:name" element={element} />
+          <Route path="nodes/:name/:tab" element={element} />
         </Routes>
       </MemoryRouter>,
     );
+
+    await waitFor(() => {
+      expect(screen.getByText('Group By')).toBeInTheDocument();
+      expect(screen.getByText('Add Filters')).toBeInTheDocument();
+      expect(screen.getByText('Generated Query')).toBeInTheDocument();
+      expect(screen.getByText('Results')).toBeInTheDocument();
+    });
+    // Click on the 'Validate' tab
+    fireEvent.click(screen.getByRole('button', { name: '► Validate' }));
+
     await waitFor(() => {
-      const sqlButton = screen.getByRole('button', { name: 'SQL' });
-      sqlButton.click();
+      expect(djClient.DataJunctionAPI.node).toHaveBeenCalledWith(
+        mocks.mockMetricNode.name,
+      );
       expect(djClient.DataJunctionAPI.sql).toHaveBeenCalledWith(
-        'default.num_repair_orders',
+        mocks.mockMetricNode.name,
+        { dimensions: [], filters: [] },
+      );
+      expect(djClient.DataJunctionAPI.nodeDimensions).toHaveBeenCalledWith(
+        mocks.mockMetricNode.name,
+      );
+    });
+
+    // Click on 'Run' to run the node query
+    const runButton = screen.getByText('► Run');
+    fireEvent.click(runButton);
+
+    await waitFor(() => {
+      expect(djClient.DataJunctionAPI.streamNodeData).toHaveBeenCalledWith(
+        mocks.mockMetricNode.name,
         { dimensions: [], filters: [] },
       );
+      expect(streamNodeData.onmessage).toBeDefined();
+      expect(streamNodeData.onerror).toBeDefined();
+    });
+
+    const infoTab = screen.getByRole('button', { name: 'QueryInfo' });
+    const resultsTab = screen.getByText('Results');
+
+    // Initially, the Results tab should be active
+    expect(resultsTab).toHaveClass('active');
+    expect(infoTab).not.toHaveClass('active');
+
+    // Click on the Info tab first
+    fireEvent.click(infoTab);
+
+    await waitFor(() => {
+      // Now, the Info tab should be active
+      expect(infoTab).toHaveClass('active');
+      expect(resultsTab).not.toHaveClass('active');
+    });
+
+    // Click on the Results tab
+    fireEvent.click(resultsTab);
+
+    await waitFor(() => {
+      // Now, the Results tab should be active again
+      expect(resultsTab).toHaveClass('active');
+      expect(infoTab).not.toHaveClass('active');
     });
   });
 
   it('renders a NodeColumnLineage tab correctly', async () => {
     const djClient = mockDJClient();
     djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
-    djClient.DataJunctionAPI.metric.mockReturnValue(mocks.mockMetricNodeJson);
+    djClient.DataJunctionAPI.getMetric.mockReturnValue(
+      mocks.mockMetricNodeJson,
+    );
     djClient.DataJunctionAPI.columns.mockReturnValue(mocks.metricNodeColumns);
     djClient.DataJunctionAPI.node_lineage.mockReturnValue(
       mocks.mockNodeLineage,
@@ -688,9 +786,11 @@ describe('<NodePage />', () => {
       </DJClientContext.Provider>
     );
     render(
-      <MemoryRouter initialEntries={['/nodes/default.num_repair_orders']}>
+      <MemoryRouter
+        initialEntries={['/nodes/default.num_repair_orders/lineage']}
+      >
         <Routes>
-          <Route path="nodes/:name" element={element} />
+          <Route path="nodes/:name/:tab" element={element} />
         </Routes>
       </MemoryRouter>,
     );
@@ -705,7 +805,9 @@ describe('<NodePage />', () => {
   it('renders a NodeGraph tab correctly', async () => {
     const djClient = mockDJClient();
     djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
-    djClient.DataJunctionAPI.metric.mockReturnValue(mocks.mockMetricNodeJson);
+    djClient.DataJunctionAPI.getMetric.mockReturnValue(
+      mocks.mockMetricNodeJson,
+    );
     djClient.DataJunctionAPI.columns.mockReturnValue(mocks.metricNodeColumns);
 
     const element = (
@@ -714,9 +816,9 @@ describe('<NodePage />', () => {
       </DJClientContext.Provider>
     );
     render(
-      <MemoryRouter initialEntries={['/nodes/default.num_repair_orders']}>
+      <MemoryRouter initialEntries={['/nodes/default.num_repair_orders/graph']}>
         <Routes>
-          <Route path="nodes/:name" element={element} />
+          <Route path="nodes/:name/:tab" element={element} />
         </Routes>
       </MemoryRouter>,
     );
@@ -741,9 +843,9 @@ describe('<NodePage />', () => {
       </DJClientContext.Provider>
     );
     render(
-      <MemoryRouter initialEntries={['/nodes/default.dispatcher']}>
+      <MemoryRouter initialEntries={['/nodes/default.dispatcher/linked']}>
         <Routes>
-          <Route path="nodes/:name" element={element} />
+          <Route path="nodes/:name/:tab" element={element} />
         </Routes>
       </MemoryRouter>,
     );