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

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import fetchMock from 'jest-fetch-mock';
+import userEvent from '@testing-library/user-event';
+import { render } from '../../../setupTests';
+import DJClientContext from '../../providers/djclient';
+import NodeListActions from '../NodeListActions';
+
+describe('<NodeListActions />', () => {
+  beforeEach(() => {
+    fetchMock.resetMocks();
+    jest.clearAllMocks();
+    window.scrollTo = jest.fn();
+  });
+
+  const renderElement = djClient => {
+    return render(
+      <DJClientContext.Provider value={djClient}>
+        <NodeListActions nodeName="default.hard_hat" />
+      </DJClientContext.Provider>,
+    );
+  };
+
+  const initializeMockDJClient = () => {
+    return {
+      DataJunctionAPI: {
+        deactivate: jest.fn(),
+      },
+    };
+  };
+
+  it('deletes a node when clicked', async () => {
+    global.confirm = () => true;
+    const mockDjClient = initializeMockDJClient();
+    mockDjClient.DataJunctionAPI.deactivate.mockReturnValue({
+      status: 204,
+      json: { name: 'source.warehouse.schema.some_table' },
+    });
+
+    renderElement(mockDjClient);
+
+    await userEvent.click(screen.getByRole('button'));
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.deactivate).toBeCalled();
+      expect(mockDjClient.DataJunctionAPI.deactivate).toBeCalledWith(
+        'default.hard_hat',
+      );
+    });
+    expect(
+      screen.getByText('Successfully deleted node default.hard_hat'),
+    ).toBeInTheDocument();
+  }, 60000);
+
+  it('skips a node deletion during confirm', async () => {
+    global.confirm = () => false;
+    const mockDjClient = initializeMockDJClient();
+    mockDjClient.DataJunctionAPI.deactivate.mockReturnValue({
+      status: 204,
+      json: { name: 'source.warehouse.schema.some_table' },
+    });
+
+    renderElement(mockDjClient);
+
+    await userEvent.click(screen.getByRole('button'));
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.deactivate).not.toBeCalled();
+    });
+  }, 60000);
+
+  it('fail deleting a node when clicked', async () => {
+    global.confirm = () => true;
+    const mockDjClient = initializeMockDJClient();
+    mockDjClient.DataJunctionAPI.deactivate.mockReturnValue({
+      status: 777,
+      json: { message: 'source.warehouse.schema.some_table' },
+    });
+
+    renderElement(mockDjClient);
+
+    await userEvent.click(screen.getByRole('button'));
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.deactivate).toBeCalled();
+      expect(mockDjClient.DataJunctionAPI.deactivate).toBeCalledWith(
+        'default.hard_hat',
+      );
+    });
+    expect(
+      screen.getByText('source.warehouse.schema.some_table'),
+    ).toBeInTheDocument();
+  }, 60000);
+});

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__/NotificationBell.test.tsx

@@ -0,0 +1,313 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import NotificationBell from '../NotificationBell';
+import DJClientContext from '../../providers/djclient';
+import { UserProvider } from '../../providers/UserProvider';
+
+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, props = {}) => {
+    return render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <UserProvider>
+          <NotificationBell {...props} />
+        </UserProvider>
+      </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 }}
+      >
+        <UserProvider>
+          <NotificationBell onDropdownToggle={onDropdownToggle} />
+        </UserProvider>
+      </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 }}
+      >
+        <UserProvider>
+          <NotificationBell forceClose={false} />
+        </UserProvider>
+      </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 }}
+      >
+        <UserProvider>
+          <NotificationBell forceClose={true} />
+        </UserProvider>
+      </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 }}
+      >
+        <UserProvider>
+          <NotificationBell onDropdownToggle={onDropdownToggle} />
+        </UserProvider>
+      </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);
+  });
+});