@semiont/react-ui 0.2.35 → 0.2.37

package/src/components/annotation-popups/__tests__/JsonLdView.test.tsx

@@ -0,0 +1,285 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import React from 'react';
+import { screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import type { components } from '@semiont/core';
+
+type Annotation = components['schemas']['Annotation'];
+
+// Mock CodeMirror modules
+vi.mock('@codemirror/view', () => {
+  class MockEditorView {
+    destroy = vi.fn();
+    constructor(_config: any) {}
+    static editable = { of: vi.fn() };
+    static theme = vi.fn(() => ({}));
+  }
+
+  return {
+    EditorView: MockEditorView,
+    lineNumbers: vi.fn(),
+  };
+});
+
+vi.mock('@codemirror/state', () => ({
+  EditorState: {
+    create: vi.fn(() => ({})),
+    readOnly: { of: vi.fn() },
+  },
+}));
+
+vi.mock('@codemirror/lang-json', () => ({
+  json: vi.fn(),
+}));
+
+vi.mock('@codemirror/theme-one-dark', () => ({
+  oneDark: {},
+}));
+
+vi.mock('@codemirror/language', () => ({
+  syntaxHighlighting: vi.fn(),
+  HighlightStyle: {
+    define: vi.fn(() => ({})),
+  },
+}));
+
+vi.mock('../../../lib/codemirror-json-theme', () => ({
+  jsonLightTheme: {},
+  jsonLightHighlightStyle: {},
+}));
+
+vi.mock('@/hooks/useLineNumbers');
+
+import { useLineNumbers } from '@/hooks/useLineNumbers';
+import { renderWithProviders } from '../../../test-utils';
+import { JsonLdView } from '../JsonLdView';
+
+const createMockAnnotation = (overrides?: Partial<Annotation>): Annotation => ({
+  '@context': 'http://www.w3.org/ns/anno.jsonld',
+  id: 'anno-1',
+  type: 'Annotation',
+  motivation: 'highlighting',
+  creator: { name: 'user@example.com' },
+  created: '2024-01-01T10:00:00Z',
+  target: {
+    source: 'resource-1',
+    selector: {
+      type: 'TextPositionSelector',
+      start: 0,
+      end: 10,
+    },
+  },
+  body: [],
+  ...overrides,
+});
+
+describe('JsonLdView', () => {
+  let mockClipboard: { writeText: ReturnType<typeof vi.fn> };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    mockClipboard = {
+      writeText: vi.fn().mockResolvedValue(undefined),
+    };
+    Object.defineProperty(navigator, 'clipboard', {
+      value: mockClipboard,
+      writable: true,
+      configurable: true,
+    });
+
+    Object.defineProperty(document.documentElement, 'classList', {
+      value: {
+        contains: vi.fn().mockReturnValue(false),
+      },
+      writable: true,
+      configurable: true,
+    });
+
+    vi.mocked(useLineNumbers).mockReturnValue({
+      showLineNumbers: false,
+      toggleLineNumbers: vi.fn(),
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render the JSON-LD title', () => {
+      const annotation = createMockAnnotation();
+      renderWithProviders(<JsonLdView annotation={annotation} onBack={vi.fn()} />);
+
+      expect(screen.getByText('JSON-LD')).toBeInTheDocument();
+    });
+
+    it('should render the back button', () => {
+      const annotation = createMockAnnotation();
+      renderWithProviders(<JsonLdView annotation={annotation} onBack={vi.fn()} />);
+
+      const backButton = screen.getByTitle('Go back (Escape)');
+      expect(backButton).toBeInTheDocument();
+    });
+
+    it('should render the copy button', () => {
+      const annotation = createMockAnnotation();
+      renderWithProviders(<JsonLdView annotation={annotation} onBack={vi.fn()} />);
+
+      expect(screen.getByText(/Copy/)).toBeInTheDocument();
+    });
+
+    it('should render editor container', () => {
+      const annotation = createMockAnnotation();
+      const { container } = renderWithProviders(
+        <JsonLdView annotation={annotation} onBack={vi.fn()} />
+      );
+
+      const editorDiv = container.querySelector('.semiont-jsonld-view__editor');
+      expect(editorDiv).toBeInTheDocument();
+    });
+  });
+
+  describe('Back button', () => {
+    it('should call onBack when back button is clicked', async () => {
+      const onBack = vi.fn();
+      const annotation = createMockAnnotation();
+      renderWithProviders(<JsonLdView annotation={annotation} onBack={onBack} />);
+
+      const backButton = screen.getByTitle('Go back (Escape)');
+      await userEvent.click(backButton);
+
+      expect(onBack).toHaveBeenCalledOnce();
+    });
+
+    it('should call onBack when Escape key is pressed', () => {
+      const onBack = vi.fn();
+      const annotation = createMockAnnotation();
+      renderWithProviders(<JsonLdView annotation={annotation} onBack={onBack} />);
+
+      fireEvent.keyDown(window, { key: 'Escape' });
+
+      expect(onBack).toHaveBeenCalledOnce();
+    });
+
+    it('should not call onBack for non-Escape keys', () => {
+      const onBack = vi.fn();
+      const annotation = createMockAnnotation();
+      renderWithProviders(<JsonLdView annotation={annotation} onBack={onBack} />);
+
+      fireEvent.keyDown(window, { key: 'Enter' });
+
+      expect(onBack).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Copy to clipboard', () => {
+    it('should copy annotation JSON to clipboard when copy button is clicked', async () => {
+      const annotation = createMockAnnotation();
+      renderWithProviders(<JsonLdView annotation={annotation} onBack={vi.fn()} />);
+
+      const copyButton = screen.getByText(/Copy/);
+      await userEvent.click(copyButton);
+
+      expect(mockClipboard.writeText).toHaveBeenCalledOnce();
+      const copiedText = mockClipboard.writeText.mock.calls[0][0];
+      expect(copiedText).toBe(JSON.stringify(annotation, null, 2));
+    });
+
+    it('should copy formatted JSON with indentation', async () => {
+      const annotation = createMockAnnotation();
+      renderWithProviders(<JsonLdView annotation={annotation} onBack={vi.fn()} />);
+
+      const copyButton = screen.getByText(/Copy/);
+      await userEvent.click(copyButton);
+
+      const copiedText = mockClipboard.writeText.mock.calls[0][0];
+      expect(copiedText).toContain('\n');
+      expect(copiedText).toContain('  ');
+      expect(() => JSON.parse(copiedText)).not.toThrow();
+    });
+
+    it('should handle clipboard API errors gracefully', async () => {
+      const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      mockClipboard.writeText.mockRejectedValue(new Error('Clipboard error'));
+
+      const annotation = createMockAnnotation();
+      renderWithProviders(<JsonLdView annotation={annotation} onBack={vi.fn()} />);
+
+      const copyButton = screen.getByText(/Copy/);
+      await userEvent.click(copyButton);
+
+      await waitFor(() => {
+        expect(consoleErrorSpy).toHaveBeenCalledWith(
+          'Failed to copy JSON-LD:',
+          expect.any(Error)
+        );
+      });
+
+      consoleErrorSpy.mockRestore();
+    });
+  });
+
+  describe('Styling', () => {
+    it('should have proper view structure', () => {
+      const annotation = createMockAnnotation();
+      const { container } = renderWithProviders(
+        <JsonLdView annotation={annotation} onBack={vi.fn()} />
+      );
+
+      const view = container.firstChild as HTMLElement;
+      expect(view).toHaveClass('semiont-jsonld-view');
+    });
+
+    it('should have proper header class', () => {
+      const annotation = createMockAnnotation();
+      const { container } = renderWithProviders(
+        <JsonLdView annotation={annotation} onBack={vi.fn()} />
+      );
+
+      const header = container.querySelector('.semiont-jsonld-view__header');
+      expect(header).toBeInTheDocument();
+    });
+
+    it('should have proper back button class', () => {
+      const annotation = createMockAnnotation();
+      renderWithProviders(<JsonLdView annotation={annotation} onBack={vi.fn()} />);
+
+      const backButton = screen.getByTitle('Go back (Escape)');
+      expect(backButton).toHaveClass('semiont-jsonld-view__back-button');
+    });
+
+    it('should have proper copy button class', () => {
+      const annotation = createMockAnnotation();
+      renderWithProviders(<JsonLdView annotation={annotation} onBack={vi.fn()} />);
+
+      const copyButton = screen.getByTitle('Copy to clipboard');
+      expect(copyButton).toHaveClass('semiont-jsonld-view__copy-button');
+    });
+  });
+
+  describe('Cleanup', () => {
+    it('should remove keydown listener on unmount', () => {
+      const onBack = vi.fn();
+      const annotation = createMockAnnotation();
+      const { unmount } = renderWithProviders(
+        <JsonLdView annotation={annotation} onBack={onBack} />
+      );
+
+      unmount();
+
+      fireEvent.keyDown(window, { key: 'Escape' });
+      expect(onBack).not.toHaveBeenCalled();
+    });
+
+    it('should unmount without errors', () => {
+      const annotation = createMockAnnotation();
+      const { unmount } = renderWithProviders(
+        <JsonLdView annotation={annotation} onBack={vi.fn()} />
+      );
+
+      expect(() => unmount()).not.toThrow();
+    });
+  });
+});

package/src/components/annotation-popups/__tests__/SharedPopupElements.test.tsx

@@ -0,0 +1,273 @@
+import { describe, it, expect, vi } from 'vitest';
+import React from 'react';
+import { screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { renderWithProviders } from '../../../test-utils';
+import {
+  SelectedTextDisplay,
+  EntityTypeBadges,
+  PopupHeader,
+  PopupContainer,
+} from '../SharedPopupElements';
+
+// 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>,
+  Transition: ({ show, children }: any) => (show ? <>{children}</> : null),
+  TransitionChild: ({ children }: any) => <>{children}</>,
+}));
+
+describe('SelectedTextDisplay', () => {
+  it('should render the selected text with quotes', () => {
+    renderWithProviders(<SelectedTextDisplay exact="hello world" />);
+
+    expect(screen.getByText(/"hello world"/)).toBeInTheDocument();
+  });
+
+  it('should render the label', () => {
+    renderWithProviders(<SelectedTextDisplay exact="test" />);
+
+    expect(screen.getByText('Selected text:')).toBeInTheDocument();
+  });
+
+  it('should have proper container class', () => {
+    const { container } = renderWithProviders(<SelectedTextDisplay exact="test" />);
+
+    expect(container.querySelector('.semiont-selected-text-display')).toBeInTheDocument();
+  });
+
+  it('should have proper label class', () => {
+    const { container } = renderWithProviders(<SelectedTextDisplay exact="test" />);
+
+    expect(container.querySelector('.semiont-selected-text-display__label')).toBeInTheDocument();
+  });
+
+  it('should have proper content class', () => {
+    const { container } = renderWithProviders(<SelectedTextDisplay exact="test" />);
+
+    expect(container.querySelector('.semiont-selected-text-display__content')).toBeInTheDocument();
+  });
+
+  it('should handle empty string', () => {
+    renderWithProviders(<SelectedTextDisplay exact="" />);
+
+    expect(screen.getByText('Selected text:')).toBeInTheDocument();
+  });
+
+  it('should handle special characters in text', () => {
+    renderWithProviders(<SelectedTextDisplay exact="<script>alert('xss')</script>" />);
+
+    expect(screen.getByText('Selected text:')).toBeInTheDocument();
+  });
+});
+
+describe('EntityTypeBadges', () => {
+  it('should render a single entity type badge', () => {
+    renderWithProviders(<EntityTypeBadges entityTypes="Person" />);
+
+    expect(screen.getByText('Person')).toBeInTheDocument();
+  });
+
+  it('should render multiple comma-separated entity types as badges', () => {
+    renderWithProviders(<EntityTypeBadges entityTypes="Person,Organization,Place" />);
+
+    expect(screen.getByText('Person')).toBeInTheDocument();
+    expect(screen.getByText('Organization')).toBeInTheDocument();
+    expect(screen.getByText('Place')).toBeInTheDocument();
+  });
+
+  it('should trim whitespace from entity types', () => {
+    renderWithProviders(<EntityTypeBadges entityTypes="Person , Organization , Place" />);
+
+    expect(screen.getByText('Person')).toBeInTheDocument();
+    expect(screen.getByText('Organization')).toBeInTheDocument();
+    expect(screen.getByText('Place')).toBeInTheDocument();
+  });
+
+  it('should return null for empty string', () => {
+    const { container } = renderWithProviders(<EntityTypeBadges entityTypes="" />);
+
+    expect(container.querySelector('.semiont-entity-type-badges')).not.toBeInTheDocument();
+  });
+
+  it('should have proper container class', () => {
+    const { container } = renderWithProviders(<EntityTypeBadges entityTypes="Person" />);
+
+    expect(container.querySelector('.semiont-entity-type-badges')).toBeInTheDocument();
+  });
+
+  it('should have proper badge class on each badge', () => {
+    const { container } = renderWithProviders(
+      <EntityTypeBadges entityTypes="Person,Organization" />
+    );
+
+    const badges = container.querySelectorAll('.semiont-entity-type-badges__badge');
+    expect(badges).toHaveLength(2);
+  });
+});
+
+describe('PopupHeader', () => {
+  it('should render the title', () => {
+    renderWithProviders(
+      <PopupHeader title="Annotation Details" onClose={vi.fn()} />
+    );
+
+    expect(screen.getByText('Annotation Details')).toBeInTheDocument();
+  });
+
+  it('should render selected text when provided', () => {
+    renderWithProviders(
+      <PopupHeader title="Details" selectedText="highlighted text" onClose={vi.fn()} />
+    );
+
+    expect(screen.getByText(/highlighted text/)).toBeInTheDocument();
+  });
+
+  it('should not render selected text subtitle when not provided', () => {
+    const { container } = renderWithProviders(
+      <PopupHeader title="Details" onClose={vi.fn()} />
+    );
+
+    expect(container.querySelector('.semiont-popup-header__subtitle')).not.toBeInTheDocument();
+  });
+
+  it('should render close button', () => {
+    renderWithProviders(
+      <PopupHeader title="Details" onClose={vi.fn()} />
+    );
+
+    const closeButton = screen.getByRole('button');
+    expect(closeButton).toBeInTheDocument();
+  });
+
+  it('should call onClose when close button is clicked', () => {
+    const onClose = vi.fn();
+    renderWithProviders(<PopupHeader title="Details" onClose={onClose} />);
+
+    const closeButton = screen.getByRole('button');
+    fireEvent.click(closeButton);
+
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it('should have proper header class', () => {
+    const { container } = renderWithProviders(
+      <PopupHeader title="Details" onClose={vi.fn()} />
+    );
+
+    expect(container.querySelector('.semiont-popup-header')).toBeInTheDocument();
+  });
+
+  it('should have proper title class', () => {
+    const { container } = renderWithProviders(
+      <PopupHeader title="Details" onClose={vi.fn()} />
+    );
+
+    expect(container.querySelector('.semiont-popup-header__title')).toBeInTheDocument();
+  });
+
+  it('should have proper close button class', () => {
+    const { container } = renderWithProviders(
+      <PopupHeader title="Details" onClose={vi.fn()} />
+    );
+
+    expect(container.querySelector('.semiont-popup-header__close-button')).toBeInTheDocument();
+  });
+});
+
+describe('PopupContainer', () => {
+  const defaultProps = {
+    position: { x: 100, y: 200 },
+    onClose: vi.fn(),
+    isOpen: true,
+  };
+
+  it('should render children when open', () => {
+    renderWithProviders(
+      <PopupContainer {...defaultProps}>
+        <div>Popup content</div>
+      </PopupContainer>
+    );
+
+    expect(screen.getByText('Popup content')).toBeInTheDocument();
+  });
+
+  it('should not render children when closed', () => {
+    renderWithProviders(
+      <PopupContainer {...defaultProps} isOpen={false}>
+        <div>Popup content</div>
+      </PopupContainer>
+    );
+
+    expect(screen.queryByText('Popup content')).not.toBeInTheDocument();
+  });
+
+  it('should render with dialog role', () => {
+    renderWithProviders(
+      <PopupContainer {...defaultProps}>
+        <div>Content</div>
+      </PopupContainer>
+    );
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+
+  it('should render backdrop element', () => {
+    const { container } = renderWithProviders(
+      <PopupContainer {...defaultProps}>
+        <div>Content</div>
+      </PopupContainer>
+    );
+
+    expect(container.querySelector('.semiont-popup-backdrop')).toBeInTheDocument();
+  });
+
+  it('should set data-wide to false by default', () => {
+    const { container } = renderWithProviders(
+      <PopupContainer {...defaultProps}>
+        <div>Content</div>
+      </PopupContainer>
+    );
+
+    const panel = container.querySelector('.semiont-popup-panel');
+    expect(panel).toHaveAttribute('data-wide', 'false');
+  });
+
+  it('should set data-wide to true when wide prop is true', () => {
+    const { container } = renderWithProviders(
+      <PopupContainer {...defaultProps} wide>
+        <div>Content</div>
+      </PopupContainer>
+    );
+
+    const panel = container.querySelector('.semiont-popup-panel');
+    expect(panel).toHaveAttribute('data-wide', 'true');
+  });
+
+  it('should have data-annotation-ui attribute', () => {
+    const { container } = renderWithProviders(
+      <PopupContainer {...defaultProps}>
+        <div>Content</div>
+      </PopupContainer>
+    );
+
+    const panel = container.querySelector('[data-annotation-ui]');
+    expect(panel).toBeInTheDocument();
+  });
+
+  it('should position popup with fixed positioning', () => {
+    const { container } = renderWithProviders(
+      <PopupContainer {...defaultProps}>
+        <div>Content</div>
+      </PopupContainer>
+    );
+
+    const panel = container.querySelector('.semiont-popup-panel') as HTMLElement;
+    expect(panel?.style.position).toBe('fixed');
+  });
+});

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

@@ -0,0 +1,90 @@
+import { describe, it, expect, 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 { KeyboardShortcutsHelpModal } from '../KeyboardShortcutsHelpModal';
+
+// 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}</>,
+}));
+
+describe('KeyboardShortcutsHelpModal', () => {
+  const defaultProps = {
+    isOpen: true,
+    onClose: vi.fn(),
+  };
+
+  it('renders modal title when open', () => {
+    renderWithProviders(<KeyboardShortcutsHelpModal {...defaultProps} />);
+    expect(screen.getByText('KeyboardShortcuts.title')).toBeInTheDocument();
+  });
+
+  it('does not render content when closed', () => {
+    renderWithProviders(
+      <KeyboardShortcutsHelpModal {...defaultProps} isOpen={false} />
+    );
+    expect(screen.queryByText('KeyboardShortcuts.title')).not.toBeInTheDocument();
+  });
+
+  it('renders all shortcut groups', () => {
+    renderWithProviders(<KeyboardShortcutsHelpModal {...defaultProps} />);
+    expect(screen.getByText('KeyboardShortcuts.navigationTitle')).toBeInTheDocument();
+    expect(screen.getByText('KeyboardShortcuts.sidebarTitle')).toBeInTheDocument();
+    expect(screen.getByText('KeyboardShortcuts.annotationsTitle')).toBeInTheDocument();
+    expect(screen.getByText('KeyboardShortcuts.listsTitle')).toBeInTheDocument();
+    expect(screen.getByText('KeyboardShortcuts.searchModalTitle')).toBeInTheDocument();
+    expect(screen.getByText('KeyboardShortcuts.modalTitle')).toBeInTheDocument();
+    expect(screen.getByText('KeyboardShortcuts.accessibilityTitle')).toBeInTheDocument();
+  });
+
+  it('renders keyboard shortcut descriptions', () => {
+    renderWithProviders(<KeyboardShortcutsHelpModal {...defaultProps} />);
+    expect(screen.getByText('KeyboardShortcuts.navOpenSearch')).toBeInTheDocument();
+    expect(screen.getByText('KeyboardShortcuts.annotHighlight')).toBeInTheDocument();
+  });
+
+  it('renders kbd elements for shortcuts', () => {
+    renderWithProviders(<KeyboardShortcutsHelpModal {...defaultProps} />);
+    const kbdElements = document.querySelectorAll('kbd.semiont-shortcuts__key');
+    expect(kbdElements.length).toBeGreaterThan(0);
+  });
+
+  it('renders close button with aria-label', () => {
+    renderWithProviders(<KeyboardShortcutsHelpModal {...defaultProps} />);
+    expect(screen.getByLabelText('KeyboardShortcuts.closeDialog')).toBeInTheDocument();
+  });
+
+  it('calls onClose when close button is clicked', () => {
+    const onClose = vi.fn();
+    renderWithProviders(
+      <KeyboardShortcutsHelpModal isOpen={true} onClose={onClose} />
+    );
+    fireEvent.click(screen.getByLabelText('KeyboardShortcuts.closeDialog'));
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('renders footer close button', () => {
+    renderWithProviders(<KeyboardShortcutsHelpModal {...defaultProps} />);
+    expect(screen.getByText('KeyboardShortcuts.close')).toBeInTheDocument();
+  });
+
+  it('calls onClose when footer close button is clicked', () => {
+    const onClose = vi.fn();
+    renderWithProviders(
+      <KeyboardShortcutsHelpModal isOpen={true} onClose={onClose} />
+    );
+    fireEvent.click(screen.getByText('KeyboardShortcuts.close'));
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('renders platform note for non-Mac', () => {
+    renderWithProviders(<KeyboardShortcutsHelpModal {...defaultProps} />);
+    expect(screen.getByText('KeyboardShortcuts.windowsNote')).toBeInTheDocument();
+  });
+});