datajunction-ui 0.0.1-rc.9 → 0.0.2-3.dev1

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

@@ -0,0 +1,183 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import QueryInfo from '../QueryInfo';
+
+describe('<QueryInfo />', () => {
+  const defaultProps = {
+    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 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();
+  });
+});

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

@@ -0,0 +1,307 @@
+import React from 'react';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
+import Search from '../Search';
+import DJClientContext from '../../providers/djclient';
+
+const mockDjClient = {
+  DataJunctionAPI: {
+    nodeDetails: jest.fn(),
+    listTags: jest.fn(),
+  },
+};
+
+describe('<Search />', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const mockNodes = [
+    {
+      name: 'default.test_node',
+      display_name: 'Test Node',
+      description: 'A test node for testing',
+      type: 'transform',
+    },
+    {
+      name: 'default.another_node',
+      display_name: 'Another Node',
+      description: null, // Test null description
+      type: 'metric',
+    },
+    {
+      name: 'default.long_description_node',
+      display_name: 'Long Description',
+      description:
+        'This is a very long description that exceeds 100 characters and should be truncated to prevent display issues in the search results interface',
+      type: 'dimension',
+    },
+  ];
+
+  const mockTags = [
+    {
+      name: 'test_tag',
+      display_name: 'Test Tag',
+      description: 'A test tag',
+      tag_type: 'business',
+    },
+  ];
+
+  it('renders search input', async () => {
+    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(mockNodes);
+    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue(mockTags);
+
+    const { getByPlaceholderText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <Search />
+      </DJClientContext.Provider>,
+    );
+
+    expect(getByPlaceholderText('Search')).toBeInTheDocument();
+  });
+
+  it('fetches and initializes search data on mount', async () => {
+    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(mockNodes);
+    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue(mockTags);
+
+    render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <Search />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
+      expect(mockDjClient.DataJunctionAPI.listTags).toHaveBeenCalled();
+    });
+  });
+
+  it('displays search results when typing', async () => {
+    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(mockNodes);
+    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue(mockTags);
+
+    const { getByPlaceholderText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <Search />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
+    });
+
+    const searchInput = getByPlaceholderText('Search');
+    fireEvent.change(searchInput, { target: { value: 'test' } });
+
+    await waitFor(() => {
+      expect(getByText(/Test Node/)).toBeInTheDocument();
+    });
+  });
+
+  it('displays nodes with correct URLs', async () => {
+    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(mockNodes);
+    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue(mockTags);
+
+    const { getByPlaceholderText, container } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <Search />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
+    });
+
+    const searchInput = getByPlaceholderText('Search');
+    fireEvent.change(searchInput, { target: { value: 'node' } });
+
+    await waitFor(() => {
+      const links = container.querySelectorAll('a[href^="/nodes/"]');
+      expect(links.length).toBeGreaterThan(0);
+    });
+  });
+
+  it('displays tags with correct URLs', async () => {
+    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue([]);
+    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue(mockTags);
+
+    const { getByPlaceholderText, container } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <Search />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.listTags).toHaveBeenCalled();
+    });
+
+    const searchInput = getByPlaceholderText('Search');
+    fireEvent.change(searchInput, { target: { value: 'tag' } });
+
+    await waitFor(() => {
+      const links = container.querySelectorAll('a[href^="/tags/"]');
+      expect(links.length).toBeGreaterThan(0);
+    });
+  });
+
+  it('truncates long descriptions', async () => {
+    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(mockNodes);
+    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue([]);
+
+    const { getByPlaceholderText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <Search />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
+    });
+
+    const searchInput = getByPlaceholderText('Search');
+    fireEvent.change(searchInput, { target: { value: 'long' } });
+
+    await waitFor(() => {
+      expect(getByText(/\.\.\./)).toBeInTheDocument();
+    });
+  });
+
+  it('handles null descriptions', async () => {
+    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(mockNodes);
+    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue([]);
+
+    const { getByPlaceholderText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <Search />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
+    });
+
+    const searchInput = getByPlaceholderText('Search');
+    fireEvent.change(searchInput, { target: { value: 'another' } });
+
+    await waitFor(() => {
+      expect(getByText(/Another Node/)).toBeInTheDocument();
+    });
+  });
+
+  it('limits search results to 20 items', async () => {
+    const manyNodes = Array.from({ length: 30 }, (_, i) => ({
+      name: `default.node${i}`,
+      display_name: `Node ${i}`,
+      description: `Description ${i}`,
+      type: 'transform',
+    }));
+
+    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(manyNodes);
+    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue([]);
+
+    const { getByPlaceholderText, container } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <Search />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
+    });
+
+    const searchInput = getByPlaceholderText('Search');
+    fireEvent.change(searchInput, { target: { value: 'node' } });
+
+    await waitFor(() => {
+      const results = container.querySelectorAll('.search-result-item');
+      expect(results.length).toBeLessThanOrEqual(20);
+    });
+  });
+
+  it('handles error when fetching nodes', async () => {
+    const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
+    mockDjClient.DataJunctionAPI.nodeDetails.mockRejectedValue(
+      new Error('Network error'),
+    );
+    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue([]);
+
+    render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <Search />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(consoleErrorSpy).toHaveBeenCalledWith(
+        'Error fetching nodes or tags:',
+        expect.any(Error),
+      );
+    });
+
+    consoleErrorSpy.mockRestore();
+  });
+
+  it('prevents form submission', async () => {
+    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue([]);
+    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue([]);
+
+    const { container } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <Search />
+      </DJClientContext.Provider>,
+    );
+
+    const form = container.querySelector('form');
+
+    const submitEvent = new Event('submit', {
+      bubbles: true,
+      cancelable: true,
+    });
+    const preventDefaultSpy = jest.spyOn(submitEvent, 'preventDefault');
+
+    form.dispatchEvent(submitEvent);
+
+    expect(preventDefaultSpy).toHaveBeenCalled();
+  });
+
+  it('handles empty tags array', async () => {
+    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(mockNodes);
+    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue(null);
+
+    const { getByPlaceholderText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <Search />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.listTags).toHaveBeenCalled();
+    });
+
+    // Should not throw an error
+    const searchInput = getByPlaceholderText('Search');
+    expect(searchInput).toBeInTheDocument();
+  });
+
+  it('shows description separator correctly', async () => {
+    mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue(mockNodes);
+    mockDjClient.DataJunctionAPI.listTags.mockResolvedValue([]);
+
+    const { getByPlaceholderText, container } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <Search />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.nodeDetails).toHaveBeenCalled();
+    });
+
+    const searchInput = getByPlaceholderText('Search');
+    fireEvent.change(searchInput, { target: { value: 'test' } });
+
+    await waitFor(() => {
+      const results = container.querySelector('.search-result-item');
+      expect(results).toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+
+import Tab from '../Tab';
+
+describe('<Tab />', () => {
+  it('renders without crashing', () => {
+    render(<Tab />);
+  });
+
+  it('has the active class when selectedTab matches id', () => {
+    const { container } = render(<Tab id="1" selectedTab="1" />);
+    expect(container.querySelector('.col')).toHaveClass('active');
+  });
+
+  it('does not have the active class when selectedTab does not match id', () => {
+    const { container } = render(<Tab id="1" selectedTab="2" />);
+    expect(container.querySelector('.col')).not.toHaveClass('active');
+  });
+
+  it('calls onClick when the button is clicked', () => {
+    const onClickMock = jest.fn();
+    const { getByRole } = render(<Tab id="1" onClick={onClickMock} />);
+    fireEvent.click(getByRole('button'));
+    expect(onClickMock).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import ToggleSwitch from '../ToggleSwitch';
+
+describe('<ToggleSwitch />', () => {
+  const defaultProps = {
+    checked: false,
+    onChange: jest.fn(),
+    toggleName: 'Toggle Switch',
+  };
+
+  it('renders without crashing', () => {
+    render(<ToggleSwitch {...defaultProps} />);
+  });
+
+  it('displays the correct toggle name', () => {
+    render(<ToggleSwitch {...defaultProps} />);
+    expect(screen.getByText(defaultProps.toggleName)).toBeInTheDocument();
+  });
+
+  it('reflects the checked state correctly', () => {
+    render(<ToggleSwitch {...defaultProps} checked={true} />);
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toBeChecked();
+  });
+
+  it('calls onChange with the correct value when toggled', () => {
+    render(<ToggleSwitch {...defaultProps} />);
+    const checkbox = screen.getByRole('checkbox');
+
+    fireEvent.click(checkbox);
+    expect(defaultProps.onChange).toHaveBeenCalledWith(true);
+
+    fireEvent.click(checkbox);
+    expect(checkbox).not.toBeChecked();
+  });
+
+  it('is unchecked by default if no checked prop is provided', () => {
+    render(<ToggleSwitch onChange={jest.fn()} toggleName="Test Toggle" />);
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).not.toBeChecked();
+  });
+});