@semiont/react-ui 0.2.35 → 0.2.37

package/src/components/modals/__tests__/ProposeEntitiesModal.test.tsx

@@ -0,0 +1,129 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import React from 'react';
+import { screen, fireEvent } from '@testing-library/react';
+import { renderWithProviders } from '../../../test-utils';
+import '@testing-library/jest-dom';
+import { ProposeEntitiesModal } from '../ProposeEntitiesModal';
+
+// Mock HeadlessUI to avoid jsdom OOM issues
+vi.mock('@headlessui/react', () => ({
+  Dialog: ({ children, onClose, ...props }: any) => <div role="dialog" {...props}>{typeof children === 'function' ? children({ open: true }) : children}</div>,
+  DialogPanel: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+  DialogTitle: ({ children, ...props }: any) => <h2 {...props}>{children}</h2>,
+  DialogDescription: ({ children, ...props }: any) => <p {...props}>{children}</p>,
+  Transition: ({ show, children }: any) => show ? <>{children}</> : null,
+  TransitionChild: ({ children }: any) => <>{children}</>,
+}));
+
+// Stable entity types array to avoid infinite re-render loops
+const mockEntityTypes = ['Person', 'Organization', 'Location'];
+const stableQueryResult = { data: { entityTypes: mockEntityTypes } };
+
+vi.mock('../../../lib/api-hooks', () => ({
+  useEntityTypes: vi.fn(() => ({
+    list: {
+      useQuery: () => stableQueryResult,
+    },
+  })),
+}));
+
+describe('ProposeEntitiesModal', () => {
+  const defaultProps = {
+    isOpen: true,
+    onConfirm: vi.fn(),
+    onCancel: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    sessionStorage.clear();
+  });
+
+  it('renders modal title when open', () => {
+    renderWithProviders(<ProposeEntitiesModal {...defaultProps} />);
+    expect(screen.getByText('Detect Entity References')).toBeInTheDocument();
+  });
+
+  it('does not render when closed', () => {
+    renderWithProviders(
+      <ProposeEntitiesModal {...defaultProps} isOpen={false} />
+    );
+    expect(screen.queryByText('Detect Entity References')).not.toBeInTheDocument();
+  });
+
+  it('renders available entity type buttons', () => {
+    renderWithProviders(<ProposeEntitiesModal {...defaultProps} />);
+    expect(screen.getByText('Person')).toBeInTheDocument();
+    expect(screen.getByText('Organization')).toBeInTheDocument();
+    expect(screen.getByText('Location')).toBeInTheDocument();
+  });
+
+  it('toggles entity type selection on click', () => {
+    renderWithProviders(<ProposeEntitiesModal {...defaultProps} />);
+
+    fireEvent.click(screen.getByText('Person'));
+    expect(screen.getByText('1 type selected')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('Organization'));
+    expect(screen.getByText('2 types selected')).toBeInTheDocument();
+
+    // Deselect
+    fireEvent.click(screen.getByText('Person'));
+    expect(screen.getByText('1 type selected')).toBeInTheDocument();
+  });
+
+  it('disables confirm button when no types selected', () => {
+    renderWithProviders(<ProposeEntitiesModal {...defaultProps} />);
+    const buttons = screen.getAllByRole('button');
+    const confirmButton = buttons.find(b => b.textContent?.includes('Detect Entity'));
+    expect(confirmButton).toBeDisabled();
+  });
+
+  it('enables confirm button when types are selected', () => {
+    renderWithProviders(<ProposeEntitiesModal {...defaultProps} />);
+    fireEvent.click(screen.getByText('Person'));
+
+    const buttons = screen.getAllByRole('button');
+    const confirmButton = buttons.find(b => b.textContent?.includes('Detect Entity'));
+    expect(confirmButton).not.toBeDisabled();
+  });
+
+  it('calls onConfirm with selected types', () => {
+    const onConfirm = vi.fn();
+    renderWithProviders(
+      <ProposeEntitiesModal {...defaultProps} onConfirm={onConfirm} />
+    );
+
+    fireEvent.click(screen.getByText('Person'));
+    fireEvent.click(screen.getByText('Location'));
+
+    const buttons = screen.getAllByRole('button');
+    const confirmButton = buttons.find(b => b.textContent?.includes('Detect Entity'));
+    fireEvent.click(confirmButton!);
+
+    expect(onConfirm).toHaveBeenCalledWith(['Person', 'Location']);
+  });
+
+  it('calls onCancel when cancel button is clicked', () => {
+    const onCancel = vi.fn();
+    renderWithProviders(
+      <ProposeEntitiesModal {...defaultProps} onCancel={onCancel} />
+    );
+    fireEvent.click(screen.getByText('Cancel'));
+    expect(onCancel).toHaveBeenCalled();
+  });
+
+  it('saves preferences to sessionStorage on confirm', () => {
+    renderWithProviders(<ProposeEntitiesModal {...defaultProps} />);
+
+    fireEvent.click(screen.getByText('Person'));
+
+    const buttons = screen.getAllByRole('button');
+    const confirmButton = buttons.find(b => b.textContent?.includes('Detect Entity'));
+    fireEvent.click(confirmButton!);
+
+    expect(sessionStorage.getItem('userPreferredEntityTypes')).toBe(
+      JSON.stringify(['Person'])
+    );
+  });
+});

package/src/components/modals/__tests__/ResourceSearchModal.test.tsx

@@ -0,0 +1,180 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import React from 'react';
+import { screen, fireEvent } from '@testing-library/react';
+import { renderWithProviders } from '../../../test-utils';
+import '@testing-library/jest-dom';
+import { ResourceSearchModal } from '../ResourceSearchModal';
+
+// Mock HeadlessUI to avoid jsdom OOM issues
+vi.mock('@headlessui/react', () => ({
+  Dialog: ({ children, onClose, ...props }: any) => <div role="dialog" {...props}>{typeof children === 'function' ? children({ open: true }) : children}</div>,
+  DialogPanel: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+  DialogTitle: ({ children, ...props }: any) => <h2 {...props}>{children}</h2>,
+  Transition: ({ show, children }: any) => show ? <>{children}</> : null,
+  TransitionChild: ({ children }: any) => <>{children}</>,
+}));
+
+// Mock api-hooks
+const mockUseQuery = vi.fn(() => ({
+  data: null,
+  isFetching: false,
+}));
+
+vi.mock('../../../lib/api-hooks', () => ({
+  useResources: vi.fn(() => ({
+    search: {
+      useQuery: mockUseQuery,
+    },
+  })),
+}));
+
+// Mock search announcements
+vi.mock('../../../hooks/useSearchAnnouncements', () => ({
+  useSearchAnnouncements: vi.fn(() => ({
+    announceSearchResults: vi.fn(),
+    announceSearching: vi.fn(),
+    announceNavigation: vi.fn(),
+  })),
+}));
+
+describe('ResourceSearchModal', () => {
+  const defaultProps = {
+    isOpen: true,
+    onClose: vi.fn(),
+    onSelect: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUseQuery.mockReturnValue({ data: null, isFetching: false });
+  });
+
+  it('renders modal with title when open', () => {
+    renderWithProviders(<ResourceSearchModal {...defaultProps} />);
+    expect(screen.getByText('Search Resources')).toBeInTheDocument();
+  });
+
+  it('does not render when closed', () => {
+    renderWithProviders(
+      <ResourceSearchModal {...defaultProps} isOpen={false} />
+    );
+    expect(screen.queryByText('Search Resources')).not.toBeInTheDocument();
+  });
+
+  it('renders search input with placeholder', () => {
+    renderWithProviders(<ResourceSearchModal {...defaultProps} />);
+    expect(screen.getByPlaceholderText('Search for resources...')).toBeInTheDocument();
+  });
+
+  it('uses custom translations', () => {
+    renderWithProviders(
+      <ResourceSearchModal
+        {...defaultProps}
+        translations={{ title: 'Find Docs', placeholder: 'Type here...' }}
+      />
+    );
+    expect(screen.getByText('Find Docs')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Type here...')).toBeInTheDocument();
+  });
+
+  it('shows loading state when fetching', () => {
+    mockUseQuery.mockReturnValue({ data: null, isFetching: true });
+    renderWithProviders(<ResourceSearchModal {...defaultProps} />);
+    expect(screen.getByText('Searching...')).toBeInTheDocument();
+  });
+
+  it('shows no results message when search has no matches', () => {
+    mockUseQuery.mockReturnValue({
+      data: { resources: [] },
+      isFetching: false,
+    });
+
+    renderWithProviders(
+      <ResourceSearchModal {...defaultProps} searchTerm="xyz" />
+    );
+    expect(screen.getByText('No documents found')).toBeInTheDocument();
+  });
+
+  it('renders search results', () => {
+    mockUseQuery.mockReturnValue({
+      data: {
+        resources: [
+          {
+            '@id': 'res-1',
+            name: 'Test Document',
+            content: 'Some content here',
+            representations: [{ mediaType: 'text/plain' }],
+          },
+        ],
+      },
+      isFetching: false,
+    });
+
+    renderWithProviders(
+      <ResourceSearchModal {...defaultProps} searchTerm="test" />
+    );
+    expect(screen.getByText('Test Document')).toBeInTheDocument();
+  });
+
+  it('calls onSelect and onClose when a result is clicked', () => {
+    const onSelect = vi.fn();
+    const onClose = vi.fn();
+
+    mockUseQuery.mockReturnValue({
+      data: {
+        resources: [
+          {
+            '@id': 'res-1',
+            name: 'Test Document',
+            content: 'Some content',
+            representations: [{ mediaType: 'text/plain' }],
+          },
+        ],
+      },
+      isFetching: false,
+    });
+
+    renderWithProviders(
+      <ResourceSearchModal
+        {...defaultProps}
+        searchTerm="test"
+        onSelect={onSelect}
+        onClose={onClose}
+      />
+    );
+
+    fireEvent.click(screen.getByText('Test Document'));
+    expect(onSelect).toHaveBeenCalledWith('res-1');
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('shows media type for image results', () => {
+    mockUseQuery.mockReturnValue({
+      data: {
+        resources: [
+          {
+            '@id': 'res-img',
+            name: 'Photo',
+            content: 'image data',
+            representations: [{ mediaType: 'image/png' }],
+          },
+        ],
+      },
+      isFetching: false,
+    });
+
+    renderWithProviders(
+      <ResourceSearchModal {...defaultProps} searchTerm="photo" />
+    );
+    expect(screen.getByText('image/png')).toBeInTheDocument();
+  });
+
+  it('calls onClose when close button is clicked', () => {
+    const onClose = vi.fn();
+    renderWithProviders(
+      <ResourceSearchModal {...defaultProps} onClose={onClose} />
+    );
+    fireEvent.click(screen.getByLabelText('✕'));
+    expect(onClose).toHaveBeenCalled();
+  });
+});

package/src/components/navigation/__tests__/ObservableLink.test.tsx

@@ -0,0 +1,90 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import React from 'react';
+import { screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { renderWithProviders, resetEventBusForTesting } from '../../../test-utils';
+import { ObservableLink } from '../ObservableLink';
+
+describe('ObservableLink', () => {
+  beforeEach(() => {
+    resetEventBusForTesting();
+  });
+
+  it('renders anchor with href', () => {
+    renderWithProviders(
+      <ObservableLink href="/discover">Discover</ObservableLink>
+    );
+
+    const link = screen.getByRole('link', { name: 'Discover' });
+    expect(link).toHaveAttribute('href', '/discover');
+  });
+
+  it('renders children', () => {
+    renderWithProviders(
+      <ObservableLink href="/test">
+        <span data-testid="child">Click me</span>
+      </ObservableLink>
+    );
+
+    expect(screen.getByTestId('child')).toBeInTheDocument();
+    expect(screen.getByText('Click me')).toBeInTheDocument();
+  });
+
+  it('emits browse:link-clicked with href and label on click', () => {
+    const handler = vi.fn();
+
+    const { eventBus } = renderWithProviders(
+      <ObservableLink href="/discover" label="Discover">
+        Discover Resources
+      </ObservableLink>,
+      { returnEventBus: true }
+    );
+
+    const subscription = eventBus!.get('browse:link-clicked').subscribe(handler);
+
+    const link = screen.getByRole('link');
+    fireEvent.click(link);
+
+    expect(handler).toHaveBeenCalledWith({
+      href: '/discover',
+      label: 'Discover',
+    });
+
+    subscription.unsubscribe();
+  });
+
+  it('calls original onClick handler if provided', () => {
+    const onClick = vi.fn();
+
+    renderWithProviders(
+      <ObservableLink href="/test" onClick={onClick}>
+        Click
+      </ObservableLink>
+    );
+
+    const link = screen.getByRole('link');
+    fireEvent.click(link);
+
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('passes through additional anchor props', () => {
+    renderWithProviders(
+      <ObservableLink
+        href="/external"
+        className="custom-link"
+        target="_blank"
+        rel="noopener noreferrer"
+        data-testid="my-link"
+      >
+        External
+      </ObservableLink>
+    );
+
+    const link = screen.getByTestId('my-link');
+    expect(link).toHaveClass('custom-link');
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+    expect(link).toHaveAttribute('href', '/external');
+  });
+});

package/src/components/navigation/__tests__/SimpleNavigation.test.tsx

@@ -0,0 +1,169 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import React from 'react';
+import { screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { renderWithProviders, resetEventBusForTesting } from '../../../test-utils';
+import { SimpleNavigation } from '../SimpleNavigation';
+import type { SimpleNavigationItem } from '../SimpleNavigation';
+
+const MockChevronLeft = (props: any) => <span data-testid="chevron" {...props} />;
+const MockBars = (props: any) => <span data-testid="bars" {...props} />;
+
+const MockLink = ({ href, children, ...props }: any) => (
+  <a href={href} {...props}>{children}</a>
+);
+
+const MockIcon1 = (props: any) => <span data-testid="icon-1" {...props} />;
+const MockIcon2 = (props: any) => <span data-testid="icon-2" {...props} />;
+
+const defaultItems: SimpleNavigationItem[] = [
+  { name: 'Dashboard', href: '/admin/dashboard', icon: MockIcon1 },
+  { name: 'Users', href: '/admin/users', icon: MockIcon2, description: 'Manage users' },
+];
+
+const defaultProps = {
+  title: 'Administration',
+  items: defaultItems,
+  currentPath: '/admin/dashboard',
+  LinkComponent: MockLink,
+  isCollapsed: false,
+  icons: {
+    chevronLeft: MockChevronLeft,
+    bars: MockBars,
+  },
+  collapseSidebarLabel: 'Collapse sidebar',
+  expandSidebarLabel: 'Expand sidebar',
+};
+
+describe('SimpleNavigation', () => {
+  beforeEach(() => {
+    resetEventBusForTesting();
+  });
+
+  describe('title visibility', () => {
+    it('renders title when not collapsed', () => {
+      renderWithProviders(<SimpleNavigation {...defaultProps} />);
+
+      expect(screen.getByText('Administration')).toBeInTheDocument();
+    });
+
+    it('hides title when collapsed', () => {
+      renderWithProviders(
+        <SimpleNavigation {...defaultProps} isCollapsed={true} />
+      );
+
+      expect(screen.queryByText('Administration')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('navigation items', () => {
+    it('renders navigation items', () => {
+      renderWithProviders(<SimpleNavigation {...defaultProps} />);
+
+      expect(screen.getByText('Dashboard')).toBeInTheDocument();
+      expect(screen.getByText('Users')).toBeInTheDocument();
+    });
+
+    it('marks active item with aria-current="page"', () => {
+      renderWithProviders(<SimpleNavigation {...defaultProps} />);
+
+      const dashboardLink = screen.getByText('Dashboard').closest('a');
+      expect(dashboardLink).toHaveAttribute('aria-current', 'page');
+
+      const usersLink = screen.getByText('Users').closest('a');
+      expect(usersLink).not.toHaveAttribute('aria-current');
+    });
+
+    it('shows item text when not collapsed', () => {
+      renderWithProviders(<SimpleNavigation {...defaultProps} />);
+
+      expect(screen.getByText('Dashboard')).toBeInTheDocument();
+      expect(screen.getByText('Users')).toBeInTheDocument();
+    });
+
+    it('shows only icons when collapsed', () => {
+      renderWithProviders(
+        <SimpleNavigation {...defaultProps} isCollapsed={true} />
+      );
+
+      // Text spans should not be present in collapsed mode
+      expect(screen.queryByText('Dashboard')).not.toBeInTheDocument();
+      expect(screen.queryByText('Users')).not.toBeInTheDocument();
+
+      // Icons should still be rendered
+      const icons = screen.getAllByTestId(/^icon-/);
+      expect(icons.length).toBe(2);
+    });
+  });
+
+  describe('sidebar toggle', () => {
+    it('emits browse:sidebar-toggle on collapse button click', () => {
+      const handler = vi.fn();
+
+      const { eventBus } = renderWithProviders(
+        <SimpleNavigation {...defaultProps} />,
+        { returnEventBus: true }
+      );
+
+      const subscription = eventBus!.get('browse:sidebar-toggle').subscribe(handler);
+
+      const collapseButton = screen.getByLabelText('Collapse sidebar');
+      fireEvent.click(collapseButton);
+
+      expect(handler).toHaveBeenCalledWith(undefined);
+
+      subscription.unsubscribe();
+    });
+
+    it('shows expand label when collapsed', () => {
+      renderWithProviders(
+        <SimpleNavigation {...defaultProps} isCollapsed={true} />
+      );
+
+      expect(screen.getByLabelText('Expand sidebar')).toBeInTheDocument();
+    });
+  });
+
+  describe('dropdown', () => {
+    it('opens dropdown when header button clicked if dropdownContent provided', () => {
+      const dropdownContent = (onClose: () => void) => (
+        <div data-testid="dropdown-content">
+          <button onClick={onClose}>Close</button>
+        </div>
+      );
+
+      renderWithProviders(
+        <SimpleNavigation {...defaultProps} dropdownContent={dropdownContent} />
+      );
+
+      // Dropdown should not be visible initially
+      expect(screen.queryByTestId('dropdown-content')).not.toBeInTheDocument();
+
+      // Click header button to open dropdown
+      const headerButton = screen.getByRole('button', { name: /Administration/i });
+      fireEvent.click(headerButton);
+
+      expect(screen.getByTestId('dropdown-content')).toBeInTheDocument();
+    });
+
+    it('closes dropdown on outside click', () => {
+      const dropdownContent = (onClose: () => void) => (
+        <div data-testid="dropdown-content">Dropdown</div>
+      );
+
+      renderWithProviders(
+        <SimpleNavigation {...defaultProps} dropdownContent={dropdownContent} />
+      );
+
+      // Open dropdown
+      const headerButton = screen.getByRole('button', { name: /Administration/i });
+      fireEvent.click(headerButton);
+      expect(screen.getByTestId('dropdown-content')).toBeInTheDocument();
+
+      // Click outside
+      fireEvent.mouseDown(document.body);
+
+      expect(screen.queryByTestId('dropdown-content')).not.toBeInTheDocument();
+    });
+  });
+});