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

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

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

@@ -0,0 +1,241 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import UserMenu from '../UserMenu';
+import DJClientContext from '../../providers/djclient';
+
+describe('<UserMenu />', () => {
+  const createMockDjClient = (overrides = {}) => ({
+    whoami: jest.fn().mockResolvedValue({
+      id: 1,
+      username: 'testuser',
+      email: 'test@example.com',
+    }),
+    logout: jest.fn().mockResolvedValue({}),
+    ...overrides,
+  });
+
+  const renderWithContext = (mockDjClient: any, props = {}) => {
+    return render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <UserMenu {...props} />
+      </DJClientContext.Provider>,
+    );
+  };
+
+  // Mock window.location.reload
+  const originalLocation = window.location;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    delete (window as any).location;
+    (window as any).location = { ...originalLocation, reload: jest.fn() };
+  });
+
+  afterEach(() => {
+    (window as any).location = originalLocation;
+  });
+
+  it('renders the avatar button', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveClass('avatar-button');
+  });
+
+  it('shows "?" before user is loaded', () => {
+    const mockDjClient = createMockDjClient({
+      whoami: jest.fn().mockImplementation(
+        () => new Promise(() => {}), // Never resolves
+      ),
+    });
+    renderWithContext(mockDjClient);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveTextContent('?');
+  });
+
+  it('displays initials from username (first two letters uppercase)', async () => {
+    const mockDjClient = createMockDjClient({
+      whoami: jest.fn().mockResolvedValue({
+        id: 1,
+        username: 'johndoe',
+        email: 'john@example.com',
+      }),
+    });
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    const button = await screen.findByText('JO');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('displays initials from name when available', async () => {
+    const mockDjClient = createMockDjClient({
+      whoami: jest.fn().mockResolvedValue({
+        id: 1,
+        username: 'johndoe',
+        email: 'john@example.com',
+        name: 'John Doe',
+      }),
+    });
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    const button = await screen.findByText('JD');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('opens dropdown when avatar is clicked', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+  });
+
+  it('shows Settings and Logout links in dropdown', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    const settingsLink = screen.getByText('Settings');
+    expect(settingsLink).toHaveAttribute('href', '/settings');
+
+    const logoutLink = screen.getByText('Logout');
+    expect(logoutLink).toHaveAttribute('href', '/');
+  });
+
+  it('calls logout and reloads page when Logout is clicked', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    const logoutLink = screen.getByText('Logout');
+    fireEvent.click(logoutLink);
+
+    expect(mockDjClient.logout).toHaveBeenCalled();
+  });
+
+  it('calls onDropdownToggle when dropdown is opened', async () => {
+    const mockDjClient = createMockDjClient();
+    const onDropdownToggle = jest.fn();
+    renderWithContext(mockDjClient, { onDropdownToggle });
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).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 }}
+      >
+        <UserMenu forceClose={false} />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    // Open the dropdown
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    // Verify dropdown is open
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+
+    // Rerender with forceClose=true
+    rerender(
+      <DJClientContext.Provider
+        value={{ DataJunctionAPI: mockDjClient as any }}
+      >
+        <UserMenu forceClose={true} />
+      </DJClientContext.Provider>,
+    );
+
+    // Dropdown should be closed
+    expect(screen.queryByText('Settings')).not.toBeInTheDocument();
+  });
+
+  it('closes dropdown when clicking outside', async () => {
+    const mockDjClient = createMockDjClient();
+    const onDropdownToggle = jest.fn();
+    renderWithContext(mockDjClient, { onDropdownToggle });
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    // Open the dropdown
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    // Verify dropdown is open
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+
+    // Click outside
+    fireEvent.click(document.body);
+
+    // Dropdown should be closed
+    expect(screen.queryByText('Settings')).not.toBeInTheDocument();
+
+    // onDropdownToggle should be called with false
+    expect(onDropdownToggle).toHaveBeenCalledWith(false);
+  });
+
+  it('toggles dropdown closed when clicking avatar again', async () => {
+    const mockDjClient = createMockDjClient();
+    const onDropdownToggle = jest.fn();
+    renderWithContext(mockDjClient, { onDropdownToggle });
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+
+    // Open
+    fireEvent.click(button);
+    expect(onDropdownToggle).toHaveBeenCalledWith(true);
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+
+    // Close by clicking again
+    fireEvent.click(button);
+    expect(onDropdownToggle).toHaveBeenCalledWith(false);
+  });
+});

package/src/app/components/__tests__/__snapshots__/ListGroupItem.test.tsx.snap

@@ -14,11 +14,16 @@ exports[`<ListGroupItem /> should render and match the snapshot 1`] = `
         Name
       </h6>
       <p
+        aria-hidden="false"
+        aria-label="Name"
         className="mb-0 opacity-75"
+        role="dialog"
       >
-        <span>
-          Something
-        </span>
+        <Markdown>
+          <span>
+            Something
+          </span>
+        </Markdown>
       </p>
     </div>
   </div>

package/src/app/components/__tests__/__snapshots__/NamespaceHeader.test.jsx.snap

@@ -8,25 +8,9 @@ exports[`<NamespaceHeader /> should render and match the snapshot 1`] = `
     className="breadcrumb-item"
   >
     <a
-      href="/namespaces/"
+      href="/"
     >
-      <svg
-        className="bi bi-house-door-fill"
-        fill="currentColor"
-        height="16"
-        style={
-          Object {
-            "paddingBottom": "0.2rem",
-          }
-        }
-        viewBox="0 0 16 16"
-        width="16"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z"
-        />
-      </svg>
+      <HorizontalHierarchyIcon />
     </a>
   </li>
   <li