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

package/src/app/pages/SettingsPage/__tests__/CreateServiceAccountModal.test.jsx

@@ -0,0 +1,318 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { CreateServiceAccountModal } from '../CreateServiceAccountModal';
+
+describe('CreateServiceAccountModal', () => {
+  const mockOnClose = jest.fn();
+  const mockOnCreate = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('does not render when isOpen is false', () => {
+    render(
+      <CreateServiceAccountModal
+        isOpen={false}
+        onClose={mockOnClose}
+        onCreate={mockOnCreate}
+      />,
+    );
+
+    expect(
+      screen.queryByText('Create Service Account'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders modal when isOpen is true', () => {
+    render(
+      <CreateServiceAccountModal
+        isOpen={true}
+        onClose={mockOnClose}
+        onCreate={mockOnCreate}
+      />,
+    );
+
+    expect(screen.getByText('Create Service Account')).toBeInTheDocument();
+    expect(screen.getByLabelText('Name')).toBeInTheDocument();
+    expect(screen.getByText('Cancel')).toBeInTheDocument();
+    expect(screen.getByText('Create')).toBeInTheDocument();
+  });
+
+  it('calls onClose when close button is clicked', () => {
+    render(
+      <CreateServiceAccountModal
+        isOpen={true}
+        onClose={mockOnClose}
+        onCreate={mockOnCreate}
+      />,
+    );
+
+    fireEvent.click(screen.getByTitle('Close'));
+
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+
+  it('calls onClose when Cancel button is clicked', () => {
+    render(
+      <CreateServiceAccountModal
+        isOpen={true}
+        onClose={mockOnClose}
+        onCreate={mockOnCreate}
+      />,
+    );
+
+    fireEvent.click(screen.getByText('Cancel'));
+
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+
+  it('calls onClose when overlay is clicked', () => {
+    render(
+      <CreateServiceAccountModal
+        isOpen={true}
+        onClose={mockOnClose}
+        onCreate={mockOnCreate}
+      />,
+    );
+
+    // Click on overlay (modal-overlay class)
+    const overlay = document.querySelector('.modal-overlay');
+    fireEvent.click(overlay);
+
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+
+  it('does not close when modal content is clicked', () => {
+    render(
+      <CreateServiceAccountModal
+        isOpen={true}
+        onClose={mockOnClose}
+        onCreate={mockOnCreate}
+      />,
+    );
+
+    const content = document.querySelector('.modal-content');
+    fireEvent.click(content);
+
+    expect(mockOnClose).not.toHaveBeenCalled();
+  });
+
+  it('disables Create button when name is empty', () => {
+    render(
+      <CreateServiceAccountModal
+        isOpen={true}
+        onClose={mockOnClose}
+        onCreate={mockOnCreate}
+      />,
+    );
+
+    const createButton = screen.getByText('Create');
+    expect(createButton).toBeDisabled();
+  });
+
+  it('enables Create button when name is entered', () => {
+    render(
+      <CreateServiceAccountModal
+        isOpen={true}
+        onClose={mockOnClose}
+        onCreate={mockOnCreate}
+      />,
+    );
+
+    const input = screen.getByLabelText('Name');
+    fireEvent.change(input, { target: { value: 'my-new-account' } });
+
+    const createButton = screen.getByText('Create');
+    expect(createButton).not.toBeDisabled();
+  });
+
+  it('calls onCreate with trimmed name on submit', async () => {
+    mockOnCreate.mockResolvedValue({ client_id: 'test-id' });
+
+    render(
+      <CreateServiceAccountModal
+        isOpen={true}
+        onClose={mockOnClose}
+        onCreate={mockOnCreate}
+      />,
+    );
+
+    const input = screen.getByLabelText('Name');
+    fireEvent.change(input, { target: { value: '  my-account  ' } });
+    fireEvent.click(screen.getByText('Create'));
+
+    await waitFor(() => {
+      expect(mockOnCreate).toHaveBeenCalledWith('my-account');
+    });
+  });
+
+  it('shows credentials after successful creation', async () => {
+    const credentials = {
+      name: 'my-account',
+      client_id: 'abc-123',
+      client_secret: 'secret-xyz',
+    };
+    mockOnCreate.mockResolvedValue(credentials);
+
+    render(
+      <CreateServiceAccountModal
+        isOpen={true}
+        onClose={mockOnClose}
+        onCreate={mockOnCreate}
+      />,
+    );
+
+    const input = screen.getByLabelText('Name');
+    fireEvent.change(input, { target: { value: 'my-account' } });
+    fireEvent.click(screen.getByText('Create'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Service Account Created!')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('abc-123')).toBeInTheDocument();
+    expect(screen.getByText('secret-xyz')).toBeInTheDocument();
+    expect(
+      screen.getByText(/client secret will not be shown again/i),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Done')).toBeInTheDocument();
+  });
+
+  it('shows alert when creation returns error message', async () => {
+    window.alert = jest.fn();
+    mockOnCreate.mockResolvedValue({ message: 'Account already exists' });
+
+    render(
+      <CreateServiceAccountModal
+        isOpen={true}
+        onClose={mockOnClose}
+        onCreate={mockOnCreate}
+      />,
+    );
+
+    const input = screen.getByLabelText('Name');
+    fireEvent.change(input, { target: { value: 'my-account' } });
+    fireEvent.click(screen.getByText('Create'));
+
+    await waitFor(() => {
+      expect(window.alert).toHaveBeenCalledWith('Account already exists');
+    });
+  });
+
+  it('shows alert when creation throws error', async () => {
+    window.alert = jest.fn();
+    mockOnCreate.mockRejectedValue(new Error('Network error'));
+
+    render(
+      <CreateServiceAccountModal
+        isOpen={true}
+        onClose={mockOnClose}
+        onCreate={mockOnCreate}
+      />,
+    );
+
+    const input = screen.getByLabelText('Name');
+    fireEvent.change(input, { target: { value: 'my-account' } });
+    fireEvent.click(screen.getByText('Create'));
+
+    await waitFor(() => {
+      expect(window.alert).toHaveBeenCalledWith(
+        'Failed to create service account',
+      );
+    });
+  });
+
+  it('shows Creating... while request is in progress', async () => {
+    let resolveCreate;
+    mockOnCreate.mockImplementation(
+      () => new Promise(resolve => (resolveCreate = resolve)),
+    );
+
+    render(
+      <CreateServiceAccountModal
+        isOpen={true}
+        onClose={mockOnClose}
+        onCreate={mockOnCreate}
+      />,
+    );
+
+    const input = screen.getByLabelText('Name');
+    fireEvent.change(input, { target: { value: 'my-account' } });
+    fireEvent.click(screen.getByText('Create'));
+
+    expect(screen.getByText('Creating...')).toBeInTheDocument();
+
+    // Resolve the promise
+    resolveCreate({ client_id: 'test' });
+
+    await waitFor(() => {
+      expect(screen.queryByText('Creating...')).not.toBeInTheDocument();
+    });
+  });
+
+  it('closes and resets state when Done is clicked after creation', async () => {
+    const credentials = {
+      name: 'my-account',
+      client_id: 'abc-123',
+      client_secret: 'secret-xyz',
+    };
+    mockOnCreate.mockResolvedValue(credentials);
+
+    render(
+      <CreateServiceAccountModal
+        isOpen={true}
+        onClose={mockOnClose}
+        onCreate={mockOnCreate}
+      />,
+    );
+
+    const input = screen.getByLabelText('Name');
+    fireEvent.change(input, { target: { value: 'my-account' } });
+    fireEvent.click(screen.getByText('Create'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Done')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByText('Done'));
+
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+
+  it('copies client ID to clipboard when copy button is clicked', async () => {
+    const credentials = {
+      name: 'my-account',
+      client_id: 'abc-123',
+      client_secret: 'secret-xyz',
+    };
+    mockOnCreate.mockResolvedValue(credentials);
+
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: jest.fn().mockResolvedValue(),
+      },
+    });
+
+    render(
+      <CreateServiceAccountModal
+        isOpen={true}
+        onClose={mockOnClose}
+        onCreate={mockOnCreate}
+      />,
+    );
+
+    const input = screen.getByLabelText('Name');
+    fireEvent.change(input, { target: { value: 'my-account' } });
+    fireEvent.click(screen.getByText('Create'));
+
+    await waitFor(() => {
+      expect(screen.getByText('abc-123')).toBeInTheDocument();
+    });
+
+    const copyButtons = screen.getAllByTitle('Copy');
+    fireEvent.click(copyButtons[0]);
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('abc-123');
+  });
+});

package/src/app/pages/SettingsPage/__tests__/NotificationSubscriptionsSection.test.jsx

@@ -0,0 +1,233 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { NotificationSubscriptionsSection } from '../NotificationSubscriptionsSection';
+
+describe('NotificationSubscriptionsSection', () => {
+  const mockOnUpdate = jest.fn();
+  const mockOnUnsubscribe = jest.fn();
+
+  const mockSubscriptions = [
+    {
+      entity_name: 'default.orders_count',
+      entity_type: 'node',
+      node_type: 'metric',
+      activity_types: ['update', 'delete'],
+      status: 'valid',
+    },
+    {
+      entity_name: 'default.dim_customers',
+      entity_type: 'node',
+      node_type: 'dimension',
+      activity_types: ['create'],
+      status: 'invalid',
+    },
+  ];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders empty state when no subscriptions', () => {
+    render(
+      <NotificationSubscriptionsSection
+        subscriptions={[]}
+        onUpdate={mockOnUpdate}
+        onUnsubscribe={mockOnUnsubscribe}
+      />,
+    );
+
+    expect(screen.getByText(/not watching any nodes/i)).toBeInTheDocument();
+  });
+
+  it('renders subscriptions list', () => {
+    render(
+      <NotificationSubscriptionsSection
+        subscriptions={mockSubscriptions}
+        onUpdate={mockOnUpdate}
+        onUnsubscribe={mockOnUnsubscribe}
+      />,
+    );
+
+    expect(screen.getByText('default.orders_count')).toBeInTheDocument();
+    expect(screen.getByText('default.dim_customers')).toBeInTheDocument();
+    expect(screen.getByText('METRIC')).toBeInTheDocument();
+    expect(screen.getByText('DIMENSION')).toBeInTheDocument();
+  });
+
+  it('shows invalid badge for invalid status', () => {
+    render(
+      <NotificationSubscriptionsSection
+        subscriptions={mockSubscriptions}
+        onUpdate={mockOnUpdate}
+        onUnsubscribe={mockOnUnsubscribe}
+      />,
+    );
+
+    expect(screen.getByText('INVALID')).toBeInTheDocument();
+  });
+
+  it('displays activity types as badges', () => {
+    render(
+      <NotificationSubscriptionsSection
+        subscriptions={mockSubscriptions}
+        onUpdate={mockOnUpdate}
+        onUnsubscribe={mockOnUnsubscribe}
+      />,
+    );
+
+    expect(screen.getByText('update')).toBeInTheDocument();
+    expect(screen.getByText('delete')).toBeInTheDocument();
+    expect(screen.getByText('create')).toBeInTheDocument();
+  });
+
+  it('enters edit mode when edit button is clicked', () => {
+    render(
+      <NotificationSubscriptionsSection
+        subscriptions={mockSubscriptions}
+        onUpdate={mockOnUpdate}
+        onUnsubscribe={mockOnUnsubscribe}
+      />,
+    );
+
+    const editButtons = screen.getAllByTitle('Edit subscription');
+    fireEvent.click(editButtons[0]);
+
+    expect(screen.getByText('Save')).toBeInTheDocument();
+    expect(screen.getByText('Cancel')).toBeInTheDocument();
+    expect(screen.getByLabelText('Update')).toBeInTheDocument();
+  });
+
+  it('cancels editing when cancel button is clicked', () => {
+    render(
+      <NotificationSubscriptionsSection
+        subscriptions={mockSubscriptions}
+        onUpdate={mockOnUpdate}
+        onUnsubscribe={mockOnUnsubscribe}
+      />,
+    );
+
+    const editButtons = screen.getAllByTitle('Edit subscription');
+    fireEvent.click(editButtons[0]);
+
+    expect(screen.getByText('Cancel')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('Cancel'));
+
+    expect(screen.queryByText('Cancel')).not.toBeInTheDocument();
+  });
+
+  it('calls onUnsubscribe when unsubscribe is confirmed', async () => {
+    window.confirm = jest.fn().mockReturnValue(true);
+    mockOnUnsubscribe.mockResolvedValue();
+
+    render(
+      <NotificationSubscriptionsSection
+        subscriptions={mockSubscriptions}
+        onUpdate={mockOnUpdate}
+        onUnsubscribe={mockOnUnsubscribe}
+      />,
+    );
+
+    const unsubscribeButtons = screen.getAllByTitle('Unsubscribe');
+    fireEvent.click(unsubscribeButtons[0]);
+
+    expect(window.confirm).toHaveBeenCalledWith(
+      'Unsubscribe from notifications for "default.orders_count"?',
+    );
+    expect(mockOnUnsubscribe).toHaveBeenCalledWith(mockSubscriptions[0]);
+  });
+
+  it('does not call onUnsubscribe when unsubscribe is cancelled', () => {
+    window.confirm = jest.fn().mockReturnValue(false);
+
+    render(
+      <NotificationSubscriptionsSection
+        subscriptions={mockSubscriptions}
+        onUpdate={mockOnUpdate}
+        onUnsubscribe={mockOnUnsubscribe}
+      />,
+    );
+
+    const unsubscribeButtons = screen.getAllByTitle('Unsubscribe');
+    fireEvent.click(unsubscribeButtons[0]);
+
+    expect(mockOnUnsubscribe).not.toHaveBeenCalled();
+  });
+
+  it('shows alert when trying to save with no activity types', () => {
+    window.alert = jest.fn();
+
+    render(
+      <NotificationSubscriptionsSection
+        subscriptions={mockSubscriptions}
+        onUpdate={mockOnUpdate}
+        onUnsubscribe={mockOnUnsubscribe}
+      />,
+    );
+
+    const editButtons = screen.getAllByTitle('Edit subscription');
+    fireEvent.click(editButtons[0]);
+
+    // Uncheck all activity types
+    const updateCheckbox = screen.getByLabelText('Update');
+    const deleteCheckbox = screen.getByLabelText('Delete');
+    fireEvent.click(updateCheckbox);
+    fireEvent.click(deleteCheckbox);
+
+    fireEvent.click(screen.getByText('Save'));
+
+    expect(window.alert).toHaveBeenCalledWith(
+      'Please select at least one activity type',
+    );
+    expect(mockOnUpdate).not.toHaveBeenCalled();
+  });
+
+  it('calls onUpdate with new activity types when saved', async () => {
+    mockOnUpdate.mockResolvedValue();
+
+    render(
+      <NotificationSubscriptionsSection
+        subscriptions={mockSubscriptions}
+        onUpdate={mockOnUpdate}
+        onUnsubscribe={mockOnUnsubscribe}
+      />,
+    );
+
+    const editButtons = screen.getAllByTitle('Edit subscription');
+    fireEvent.click(editButtons[0]);
+
+    // Add 'create' activity type
+    const createCheckbox = screen.getByLabelText('Create');
+    fireEvent.click(createCheckbox);
+
+    fireEvent.click(screen.getByText('Save'));
+
+    await waitFor(() => {
+      expect(mockOnUpdate).toHaveBeenCalledWith(mockSubscriptions[0], [
+        'update',
+        'delete',
+        'create',
+      ]);
+    });
+  });
+
+  it('renders entity type badge when node_type is not available', () => {
+    const subscriptionsWithoutNodeType = [
+      {
+        entity_name: 'some_entity',
+        entity_type: 'namespace',
+        activity_types: ['create'],
+      },
+    ];
+
+    render(
+      <NotificationSubscriptionsSection
+        subscriptions={subscriptionsWithoutNodeType}
+        onUpdate={mockOnUpdate}
+        onUnsubscribe={mockOnUnsubscribe}
+      />,
+    );
+
+    expect(screen.getByText('namespace')).toBeInTheDocument();
+  });
+});

package/src/app/pages/SettingsPage/__tests__/ProfileSection.test.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ProfileSection } from '../ProfileSection';
+
+describe('ProfileSection', () => {
+  it('renders user initials from name', () => {
+    const user = {
+      name: 'John Doe',
+      username: 'johndoe',
+      email: 'john@example.com',
+    };
+
+    render(<ProfileSection user={user} />);
+
+    expect(screen.getByText('JD')).toBeInTheDocument();
+    expect(screen.getByText('johndoe')).toBeInTheDocument();
+    expect(screen.getByText('john@example.com')).toBeInTheDocument();
+  });
+
+  it('renders initials from username when name is not available', () => {
+    const user = {
+      username: 'alice',
+      email: 'alice@example.com',
+    };
+
+    render(<ProfileSection user={user} />);
+
+    expect(screen.getByText('AL')).toBeInTheDocument();
+  });
+
+  it('renders fallback when no user info available', () => {
+    render(<ProfileSection user={null} />);
+
+    expect(screen.getByText('?')).toBeInTheDocument();
+    expect(screen.getAllByText('-')).toHaveLength(2);
+  });
+
+  it('renders section title', () => {
+    render(<ProfileSection user={null} />);
+
+    expect(screen.getByText('Profile')).toBeInTheDocument();
+  });
+
+  it('handles single name', () => {
+    const user = {
+      name: 'Alice',
+      username: 'alice',
+    };
+
+    render(<ProfileSection user={user} />);
+
+    expect(screen.getByText('A')).toBeInTheDocument();
+  });
+
+  it('handles multi-word name and takes only first two initials', () => {
+    const user = {
+      name: 'John Paul Smith',
+      username: 'jps',
+    };
+
+    render(<ProfileSection user={user} />);
+
+    expect(screen.getByText('JP')).toBeInTheDocument();
+  });
+});