datajunction-ui 0.0.15 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {

package/src/app/components/__tests__/NodeMaterializationDelete.test.jsx

@@ -0,0 +1,263 @@
+import React from 'react';
+import { render, fireEvent, waitFor, act } from '@testing-library/react';
+import NodeMaterializationDelete from '../NodeMaterializationDelete';
+import DJClientContext from '../../providers/djclient';
+
+// Mock window.location.reload
+delete window.location;
+window.location = { reload: jest.fn() };
+
+// Mock window.confirm
+window.confirm = jest.fn();
+
+const mockDjClient = {
+  DataJunctionAPI: {
+    deleteMaterialization: jest.fn(),
+  },
+};
+
+describe('<NodeMaterializationDelete />', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    window.confirm.mockReturnValue(true);
+  });
+
+  const defaultProps = {
+    nodeName: 'default.test_node',
+    materializationName: 'test_materialization',
+    nodeVersion: 'v1.0',
+  };
+
+  it('renders delete button', () => {
+    const { container } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <NodeMaterializationDelete {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    const deleteButton = container.querySelector('button[type="submit"]');
+    expect(deleteButton).toBeInTheDocument();
+  });
+
+  it('renders with null nodeVersion', () => {
+    const { container } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <NodeMaterializationDelete
+          nodeName="default.test_node"
+          materializationName="test_materialization"
+          nodeVersion={null}
+        />
+      </DJClientContext.Provider>,
+    );
+
+    const deleteButton = container.querySelector('button[type="submit"]');
+    expect(deleteButton).toBeInTheDocument();
+  });
+
+  it('shows confirm dialog when delete button is clicked', async () => {
+    const { container } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <NodeMaterializationDelete {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    const deleteButton = container.querySelector('button[type="submit"]');
+
+    await act(async () => {
+      fireEvent.click(deleteButton);
+    });
+
+    expect(window.confirm).toHaveBeenCalledWith(
+      expect.stringContaining(
+        'Deleting materialization job test_materialization',
+      ),
+    );
+  });
+
+  it('does not call deleteMaterialization when user cancels confirm', async () => {
+    window.confirm.mockReturnValueOnce(false);
+
+    const { container } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <NodeMaterializationDelete {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    const deleteButton = container.querySelector('button[type="submit"]');
+
+    await act(async () => {
+      fireEvent.click(deleteButton);
+    });
+
+    expect(window.confirm).toHaveBeenCalled();
+    expect(
+      mockDjClient.DataJunctionAPI.deleteMaterialization,
+    ).not.toHaveBeenCalled();
+  });
+
+  it('calls deleteMaterialization with correct params on success - status 200', async () => {
+    mockDjClient.DataJunctionAPI.deleteMaterialization.mockResolvedValue({
+      status: 200,
+      json: { message: 'Deleted successfully' },
+    });
+
+    const { container, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <NodeMaterializationDelete {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    const deleteButton = container.querySelector('button[type="submit"]');
+
+    await act(async () => {
+      fireEvent.click(deleteButton);
+    });
+
+    await waitFor(() => {
+      expect(
+        mockDjClient.DataJunctionAPI.deleteMaterialization,
+      ).toHaveBeenCalledWith(
+        'default.test_node',
+        'test_materialization',
+        'v1.0',
+      );
+      expect(
+        getByText(/Successfully deleted materialization job/),
+      ).toBeInTheDocument();
+      expect(window.location.reload).toHaveBeenCalled();
+    });
+  });
+
+  it('calls deleteMaterialization with correct params on success - status 201', async () => {
+    mockDjClient.DataJunctionAPI.deleteMaterialization.mockResolvedValue({
+      status: 201,
+      json: { message: 'Deleted successfully' },
+    });
+
+    const { container } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <NodeMaterializationDelete {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    const deleteButton = container.querySelector('button[type="submit"]');
+
+    await act(async () => {
+      fireEvent.click(deleteButton);
+    });
+
+    await waitFor(() => {
+      expect(
+        mockDjClient.DataJunctionAPI.deleteMaterialization,
+      ).toHaveBeenCalled();
+      expect(window.location.reload).toHaveBeenCalled();
+    });
+  });
+
+  it('calls deleteMaterialization with correct params on success - status 204', async () => {
+    mockDjClient.DataJunctionAPI.deleteMaterialization.mockResolvedValue({
+      status: 204,
+      json: {},
+    });
+
+    const { container } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <NodeMaterializationDelete {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    const deleteButton = container.querySelector('button[type="submit"]');
+
+    await act(async () => {
+      fireEvent.click(deleteButton);
+    });
+
+    await waitFor(() => {
+      expect(
+        mockDjClient.DataJunctionAPI.deleteMaterialization,
+      ).toHaveBeenCalled();
+      expect(window.location.reload).toHaveBeenCalled();
+    });
+  });
+
+  it('displays error message when deletion fails', async () => {
+    mockDjClient.DataJunctionAPI.deleteMaterialization.mockResolvedValue({
+      status: 500,
+      json: { message: 'Internal server error' },
+    });
+
+    const { container, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <NodeMaterializationDelete {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    const deleteButton = container.querySelector('button[type="submit"]');
+
+    await act(async () => {
+      fireEvent.click(deleteButton);
+    });
+
+    await waitFor(() => {
+      expect(
+        mockDjClient.DataJunctionAPI.deleteMaterialization,
+      ).toHaveBeenCalled();
+      expect(getByText('Internal server error')).toBeInTheDocument();
+      expect(window.location.reload).not.toHaveBeenCalled();
+    });
+  });
+
+  it('hides delete button after successful deletion', async () => {
+    mockDjClient.DataJunctionAPI.deleteMaterialization.mockResolvedValue({
+      status: 200,
+      json: { message: 'Deleted successfully' },
+    });
+
+    const { container } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <NodeMaterializationDelete {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    const deleteButton = container.querySelector('button[type="submit"]');
+    expect(deleteButton).toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(deleteButton);
+    });
+
+    await waitFor(() => {
+      expect(
+        mockDjClient.DataJunctionAPI.deleteMaterialization,
+      ).toHaveBeenCalled();
+    });
+  });
+
+  it('passes null nodeVersion to deleteMaterialization when not provided', async () => {
+    mockDjClient.DataJunctionAPI.deleteMaterialization.mockResolvedValue({
+      status: 200,
+      json: { message: 'Deleted successfully' },
+    });
+
+    const { container } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <NodeMaterializationDelete
+          nodeName="default.test_node"
+          materializationName="test_mat"
+        />
+      </DJClientContext.Provider>,
+    );
+
+    const deleteButton = container.querySelector('button[type="submit"]');
+
+    await act(async () => {
+      fireEvent.click(deleteButton);
+    });
+
+    await waitFor(() => {
+      expect(
+        mockDjClient.DataJunctionAPI.deleteMaterialization,
+      ).toHaveBeenCalledWith('default.test_node', 'test_mat', null);
+    });
+  });
+});

package/src/app/components/__tests__/QueryInfo.test.jsx

@@ -1,55 +1,183 @@
-import * as React from 'react';
-import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { render } from '@testing-library/react';
 import QueryInfo from '../QueryInfo';
 
 describe('<QueryInfo />', () => {
   const defaultProps = {
-    id: '123',
-    state: 'Running',
-    engine_name: 'Spark SQL',
-    engine_version: '1.0',
-    errors: ['Error 1', 'Error 2'],
-    links: ['http://example.com', 'http://example2.com'],
-    output_table: 'table1',
-    scheduled: '2023-09-06',
-    started: '2023-09-07',
+    id: 'query-123',
+    state: 'completed',
+    engine_name: 'spark',
+    engine_version: '3.2.0',
+    errors: [],
+    links: [],
+    output_table: 'output.table',
+    scheduled: '2024-01-01 10:00:00',
+    started: '2024-01-01 10:05:00',
+    finished: '2024-01-01 10:15:00',
     numRows: 1000,
+    isList: false,
   };
 
-  it('renders without crashing', () => {
-    render(<QueryInfo {...defaultProps} />);
-  });
-
-  it('displays correct query information', () => {
-    render(<QueryInfo {...defaultProps} />);
-
-    expect(screen.getByText(defaultProps.id)).toBeInTheDocument();
-    expect(
-      screen.getByText(
-        `${defaultProps.engine_name} - ${defaultProps.engine_version}`,
-      ),
-    ).toBeInTheDocument();
-    expect(screen.getByText(defaultProps.state)).toBeInTheDocument();
-    expect(screen.getByText(defaultProps.scheduled)).toBeInTheDocument();
-    expect(screen.getByText(defaultProps.started)).toBeInTheDocument();
-    expect(screen.getByText(defaultProps.output_table)).toBeInTheDocument();
-    expect(screen.getByText(String(defaultProps.numRows))).toBeInTheDocument();
-    defaultProps.errors.forEach(error => {
-      expect(screen.getByText(error)).toBeInTheDocument();
-    });
-    defaultProps.links.forEach(link => {
-      expect(screen.getByText(link)).toHaveAttribute('href', link);
-    });
-  });
-
-  it('does not render errors and links when they are not provided', () => {
-    render(<QueryInfo {...defaultProps} errors={[]} links={[]} />);
-
-    defaultProps.errors.forEach(error => {
-      expect(screen.queryByText(error)).not.toBeInTheDocument();
-    });
-    defaultProps.links.forEach(link => {
-      expect(screen.queryByText(link)).not.toBeInTheDocument();
-    });
+  it('renders table view when isList is false', () => {
+    const { getByText, container } = render(<QueryInfo {...defaultProps} />);
+
+    expect(getByText('Query ID')).toBeInTheDocument();
+    expect(getByText('query-123')).toBeInTheDocument();
+    expect(container.textContent).toContain('spark');
+    expect(getByText('completed')).toBeInTheDocument();
+  });
+
+  it('renders list view when isList is true', () => {
+    const { getByText } = render(<QueryInfo {...defaultProps} isList={true} />);
+
+    expect(getByText('Query ID')).toBeInTheDocument();
+    expect(getByText('State')).toBeInTheDocument();
+    expect(getByText('Engine')).toBeInTheDocument();
+  });
+
+  it('displays errors in table view', () => {
+    const propsWithErrors = {
+      ...defaultProps,
+      errors: ['Error 1', 'Error 2'],
+    };
+
+    const { getByText } = render(<QueryInfo {...propsWithErrors} />);
+
+    expect(getByText('Error 1')).toBeInTheDocument();
+    expect(getByText('Error 2')).toBeInTheDocument();
+  });
+
+  it('displays links in table view', () => {
+    const propsWithLinks = {
+      ...defaultProps,
+      links: ['https://example.com/query1', 'https://example.com/query2'],
+    };
+
+    const { getByText } = render(<QueryInfo {...propsWithLinks} />);
+
+    expect(getByText('https://example.com/query1')).toBeInTheDocument();
+    expect(getByText('https://example.com/query2')).toBeInTheDocument();
+  });
+
+  it('renders empty state when no errors', () => {
+    const { container } = render(<QueryInfo {...defaultProps} />);
+
+    const errorCell = container.querySelector('td:nth-child(6)');
+    expect(errorCell).toBeInTheDocument();
+  });
+
+  it('renders empty state when no links', () => {
+    const { container } = render(<QueryInfo {...defaultProps} />);
+
+    const linksCell = container.querySelector('td:nth-child(7)');
+    expect(linksCell).toBeInTheDocument();
+  });
+
+  it('displays all query information in table view', () => {
+    const { getByText } = render(<QueryInfo {...defaultProps} />);
+
+    expect(getByText('output.table')).toBeInTheDocument();
+    expect(getByText('1000')).toBeInTheDocument();
+    expect(getByText('2024-01-01 10:00:00')).toBeInTheDocument();
+    expect(getByText('2024-01-01 10:05:00')).toBeInTheDocument();
+  });
+
+  it('renders list view with query ID link when links present', () => {
+    const propsWithLinks = {
+      ...defaultProps,
+      links: ['https://example.com/query'],
+      isList: true,
+    };
+
+    const { container } = render(<QueryInfo {...propsWithLinks} />);
+
+    const link = container.querySelector('a[href="https://example.com/query"]');
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveTextContent('query-123');
+  });
+
+  it('renders list view with query ID as text when no links', () => {
+    const propsNoLinks = {
+      ...defaultProps,
+      links: [],
+      isList: true,
+    };
+
+    const { getByText } = render(<QueryInfo {...propsNoLinks} />);
+
+    expect(getByText('query-123')).toBeInTheDocument();
+  });
+
+  it('displays errors with syntax highlighter in list view', () => {
+    const propsWithErrors = {
+      ...defaultProps,
+      errors: ['Syntax error on line 5', 'Connection timeout'],
+      isList: true,
+    };
+
+    const { getByText } = render(<QueryInfo {...propsWithErrors} />);
+
+    expect(getByText('Logs')).toBeInTheDocument();
+  });
+
+  it('displays finished timestamp in list view', () => {
+    const { getByText } = render(<QueryInfo {...defaultProps} isList={true} />);
+
+    expect(getByText('Finished')).toBeInTheDocument();
+    expect(getByText('2024-01-01 10:15:00')).toBeInTheDocument();
+  });
+
+  it('displays output table and row count in list view', () => {
+    const { getByText } = render(<QueryInfo {...defaultProps} isList={true} />);
+
+    expect(getByText('Output Table:')).toBeInTheDocument();
+    expect(getByText('output.table')).toBeInTheDocument();
+    expect(getByText('Rows:')).toBeInTheDocument();
+    expect(getByText('1000')).toBeInTheDocument();
+  });
+
+  it('displays multiple links in list view', () => {
+    const propsWithLinks = {
+      ...defaultProps,
+      links: ['https://link1.com', 'https://link2.com', 'https://link3.com'],
+      isList: true,
+    };
+
+    const { getByText } = render(<QueryInfo {...propsWithLinks} />);
+
+    expect(getByText('https://link1.com')).toBeInTheDocument();
+    expect(getByText('https://link2.com')).toBeInTheDocument();
+    expect(getByText('https://link3.com')).toBeInTheDocument();
+  });
+
+  it('renders empty logs section when no errors in list view', () => {
+    const { getByText } = render(<QueryInfo {...defaultProps} isList={true} />);
+
+    expect(getByText('Logs')).toBeInTheDocument();
+  });
+
+  it('displays engine name and version correctly', () => {
+    const { container } = render(<QueryInfo {...defaultProps} />);
+
+    const badges = container.querySelectorAll('.badge');
+    const engineBadge = Array.from(badges).find(b =>
+      b.textContent.includes('spark'),
+    );
+    expect(engineBadge).toBeTruthy();
+    expect(engineBadge.textContent).toContain('3.2.0');
+  });
+
+  it('handles undefined optional props', () => {
+    const minimalProps = {
+      id: 'query-456',
+      state: 'running',
+      engine_name: 'trino',
+      engine_version: '1.0',
+    };
+
+    const { getByText } = render(<QueryInfo {...minimalProps} />);
+
+    expect(getByText('query-456')).toBeInTheDocument();
+    expect(getByText('running')).toBeInTheDocument();
   });
 });