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

package/src/app/components/__tests__/NotificationBell.test.tsx

@@ -0,0 +1,302 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import NotificationBell from '../NotificationBell';
+import DJClientContext from '../../providers/djclient';
+
+describe('<NotificationBell />', () => {
+  const mockNotifications = [
+    {
+      id: 1,
+      entity_type: 'node',
+      entity_name: 'default.metrics.revenue',
+      node: 'default.metrics.revenue',
+      activity_type: 'update',
+      user: 'alice',
+      created_at: new Date().toISOString(),
+      details: { version: 'v2' },
+    },
+    {
+      id: 2,
+      entity_type: 'node',
+      entity_name: 'default.dimensions.country',
+      node: 'default.dimensions.country',
+      activity_type: 'create',
+      user: 'bob',
+      created_at: new Date(Date.now() - 3600000).toISOString(), // 1 hour ago
+      details: { version: 'v1' },
+    },
+  ];
+
+  const mockNodes = [
+    {
+      name: 'default.metrics.revenue',
+      type: 'metric',
+      current: { displayName: 'Revenue Metric' },
+    },
+    {
+      name: 'default.dimensions.country',
+      type: 'dimension',
+      current: { displayName: 'Country' },
+    },
+  ];
+
+  const createMockDjClient = (overrides = {}) => ({
+    whoami: jest.fn().mockResolvedValue({
+      id: 1,
+      username: 'testuser',
+      last_viewed_notifications_at: null,
+    }),
+    getSubscribedHistory: jest.fn().mockResolvedValue(mockNotifications),
+    getNodesByNames: jest.fn().mockResolvedValue(mockNodes),
+    markNotificationsRead: jest.fn().mockResolvedValue({}),
+    ...overrides,
+  });
+
+  const renderWithContext = (mockDjClient: any) => {
+    return render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <NotificationBell />
+      </DJClientContext.Provider>,
+    );
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the notification bell button', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('shows unread badge when there are unread notifications', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    // Wait for notifications to load
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    // Badge should show count of 2 (all notifications are unread since last_viewed is null)
+    const badge = await screen.findByText('2');
+    expect(badge).toHaveClass('notification-badge');
+  });
+
+  it('does not show badge when all notifications have been viewed', async () => {
+    const mockDjClient = createMockDjClient({
+      whoami: jest.fn().mockResolvedValue({
+        id: 1,
+        username: 'testuser',
+        // Set last_viewed to future date so all notifications are "read"
+        last_viewed_notifications_at: new Date(
+          Date.now() + 10000,
+        ).toISOString(),
+      }),
+    });
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    // Badge should not be present (no unread count shown)
+    const badge = document.querySelector('.notification-badge');
+    expect(badge).toBeNull();
+  });
+
+  it('opens dropdown when bell is clicked', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(screen.getByText('Updates')).toBeInTheDocument();
+  });
+
+  it('displays notifications in the dropdown', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    // Check that display names are shown
+    expect(screen.getByText('Revenue Metric')).toBeInTheDocument();
+    expect(screen.getByText('Country')).toBeInTheDocument();
+
+    // Check that entity names are shown below
+    expect(screen.getByText('default.metrics.revenue')).toBeInTheDocument();
+    expect(screen.getByText('default.dimensions.country')).toBeInTheDocument();
+  });
+
+  it('shows empty state when no notifications', async () => {
+    const mockDjClient = createMockDjClient({
+      getSubscribedHistory: jest.fn().mockResolvedValue([]),
+    });
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(screen.getByText('No updates on watched nodes')).toBeInTheDocument();
+  });
+
+  it('marks notifications as read when dropdown is opened', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(mockDjClient.markNotificationsRead).toHaveBeenCalled();
+  });
+
+  it('does not mark as read if already all read', async () => {
+    const mockDjClient = createMockDjClient({
+      whoami: jest.fn().mockResolvedValue({
+        id: 1,
+        username: 'testuser',
+        last_viewed_notifications_at: new Date(
+          Date.now() + 10000,
+        ).toISOString(),
+      }),
+    });
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    // Should not call markNotificationsRead since unreadCount is 0
+    expect(mockDjClient.markNotificationsRead).not.toHaveBeenCalled();
+  });
+
+  it('shows View all link when there are notifications', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    const viewAllLink = screen.getByText('View all');
+    expect(viewAllLink).toHaveAttribute('href', '/notifications');
+  });
+
+  it('calls onDropdownToggle when dropdown state changes', async () => {
+    const mockDjClient = createMockDjClient();
+    const onDropdownToggle = jest.fn();
+
+    render(
+      <DJClientContext.Provider
+        value={{ DataJunctionAPI: mockDjClient as any }}
+      >
+        <NotificationBell onDropdownToggle={onDropdownToggle} />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(onDropdownToggle).toHaveBeenCalledWith(true);
+  });
+
+  it('closes dropdown when forceClose becomes true', async () => {
+    const mockDjClient = createMockDjClient();
+
+    const { rerender } = render(
+      <DJClientContext.Provider
+        value={{ DataJunctionAPI: mockDjClient as any }}
+      >
+        <NotificationBell forceClose={false} />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    // Open the dropdown
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    // Verify dropdown is open
+    expect(screen.getByText('Updates')).toBeInTheDocument();
+
+    // Rerender with forceClose=true
+    rerender(
+      <DJClientContext.Provider
+        value={{ DataJunctionAPI: mockDjClient as any }}
+      >
+        <NotificationBell forceClose={true} />
+      </DJClientContext.Provider>,
+    );
+
+    // Dropdown should be closed
+    expect(screen.queryByText('Updates')).not.toBeInTheDocument();
+  });
+
+  it('closes dropdown when clicking outside', async () => {
+    const mockDjClient = createMockDjClient();
+    const onDropdownToggle = jest.fn();
+
+    render(
+      <DJClientContext.Provider
+        value={{ DataJunctionAPI: mockDjClient as any }}
+      >
+        <NotificationBell onDropdownToggle={onDropdownToggle} />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.getSubscribedHistory).toHaveBeenCalled();
+    });
+
+    // Open the dropdown
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    // Verify dropdown is open
+    expect(screen.getByText('Updates')).toBeInTheDocument();
+
+    // Click outside the dropdown
+    fireEvent.click(document.body);
+
+    // Dropdown should be closed
+    expect(screen.queryByText('Updates')).not.toBeInTheDocument();
+
+    // onDropdownToggle should have been called with false
+    expect(onDropdownToggle).toHaveBeenCalledWith(false);
+  });
+});

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();
+  });
+});