@semiont/react-ui 0.2.36 → 0.2.37

package/src/components/__tests__/ResizeHandle.test.tsx

@@ -0,0 +1,165 @@
+import { describe, it, expect, vi } from 'vitest';
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ResizeHandle } from '../ResizeHandle';
+
+describe('ResizeHandle', () => {
+  const defaultProps = {
+    onResize: vi.fn(),
+    minWidth: 200,
+    maxWidth: 800,
+  };
+
+  describe('rendering', () => {
+    it('renders with role="separator" and aria-orientation="vertical"', () => {
+      render(<ResizeHandle {...defaultProps} />);
+
+      const handle = screen.getByRole('separator');
+      expect(handle).toBeInTheDocument();
+      expect(handle).toHaveAttribute('aria-orientation', 'vertical');
+    });
+
+    it('uses custom ariaLabel', () => {
+      render(<ResizeHandle {...defaultProps} ariaLabel="Resize sidebar" />);
+
+      const handle = screen.getByRole('separator');
+      expect(handle).toHaveAttribute('aria-label', 'Resize sidebar');
+    });
+
+    it('uses default ariaLabel when not specified', () => {
+      render(<ResizeHandle {...defaultProps} />);
+
+      const handle = screen.getByRole('separator');
+      expect(handle).toHaveAttribute('aria-label', 'Resize panel');
+    });
+
+    it('has tabIndex 0 for keyboard focus', () => {
+      render(<ResizeHandle {...defaultProps} />);
+
+      const handle = screen.getByRole('separator');
+      expect(handle).toHaveAttribute('tabindex', '0');
+    });
+  });
+
+  describe('keyboard resize with left position', () => {
+    it('calls onResize on ArrowLeft (wider) for left position', () => {
+      const onResize = vi.fn();
+      const { container } = render(
+        <div style={{ width: '400px' }}>
+          <ResizeHandle onResize={onResize} minWidth={200} maxWidth={800} position="left" />
+        </div>
+      );
+
+      // Mock offsetWidth on the parent div
+      Object.defineProperty(container.firstChild, 'offsetWidth', { value: 400 });
+
+      const handle = screen.getByRole('separator');
+      fireEvent.keyDown(handle, { key: 'ArrowLeft' });
+
+      expect(onResize).toHaveBeenCalledWith(410); // 400 + 10
+    });
+
+    it('calls onResize on ArrowRight (narrower) for left position', () => {
+      const onResize = vi.fn();
+      const { container } = render(
+        <div style={{ width: '400px' }}>
+          <ResizeHandle onResize={onResize} minWidth={200} maxWidth={800} position="left" />
+        </div>
+      );
+
+      Object.defineProperty(container.firstChild, 'offsetWidth', { value: 400 });
+
+      const handle = screen.getByRole('separator');
+      fireEvent.keyDown(handle, { key: 'ArrowRight' });
+
+      expect(onResize).toHaveBeenCalledWith(390); // 400 - 10
+    });
+  });
+
+  describe('keyboard resize with right position', () => {
+    it('calls onResize on ArrowRight (wider) for right position', () => {
+      const onResize = vi.fn();
+      const { container } = render(
+        <div style={{ width: '400px' }}>
+          <ResizeHandle onResize={onResize} minWidth={200} maxWidth={800} position="right" />
+        </div>
+      );
+
+      Object.defineProperty(container.firstChild, 'offsetWidth', { value: 400 });
+
+      const handle = screen.getByRole('separator');
+      fireEvent.keyDown(handle, { key: 'ArrowRight' });
+
+      expect(onResize).toHaveBeenCalledWith(410); // 400 + 10
+    });
+
+    it('calls onResize on ArrowLeft (narrower) for right position', () => {
+      const onResize = vi.fn();
+      const { container } = render(
+        <div style={{ width: '400px' }}>
+          <ResizeHandle onResize={onResize} minWidth={200} maxWidth={800} position="right" />
+        </div>
+      );
+
+      Object.defineProperty(container.firstChild, 'offsetWidth', { value: 400 });
+
+      const handle = screen.getByRole('separator');
+      fireEvent.keyDown(handle, { key: 'ArrowLeft' });
+
+      expect(onResize).toHaveBeenCalledWith(390); // 400 - 10
+    });
+  });
+
+  describe('constraints', () => {
+    it('respects minWidth constraint on keyboard resize', () => {
+      const onResize = vi.fn();
+      const { container } = render(
+        <div style={{ width: '210px' }}>
+          <ResizeHandle onResize={onResize} minWidth={200} maxWidth={800} position="left" />
+        </div>
+      );
+
+      Object.defineProperty(container.firstChild, 'offsetWidth', { value: 210 });
+
+      const handle = screen.getByRole('separator');
+      fireEvent.keyDown(handle, { key: 'ArrowRight' }); // narrower for left position
+
+      expect(onResize).toHaveBeenCalledWith(200); // clamped to minWidth
+    });
+
+    it('respects maxWidth constraint on keyboard resize', () => {
+      const onResize = vi.fn();
+      const { container } = render(
+        <div style={{ width: '795px' }}>
+          <ResizeHandle onResize={onResize} minWidth={200} maxWidth={800} position="left" />
+        </div>
+      );
+
+      Object.defineProperty(container.firstChild, 'offsetWidth', { value: 795 });
+
+      const handle = screen.getByRole('separator');
+      fireEvent.keyDown(handle, { key: 'ArrowLeft' }); // wider for left position
+
+      expect(onResize).toHaveBeenCalledWith(800); // clamped to maxWidth
+    });
+  });
+
+  describe('shift key step', () => {
+    it('Shift+Arrow uses 50px step instead of 10px', () => {
+      const onResize = vi.fn();
+      const { container } = render(
+        <div style={{ width: '400px' }}>
+          <ResizeHandle onResize={onResize} minWidth={200} maxWidth={800} position="left" />
+        </div>
+      );
+
+      Object.defineProperty(container.firstChild, 'offsetWidth', { value: 400 });
+
+      const handle = screen.getByRole('separator');
+      fireEvent.keyDown(handle, { key: 'ArrowLeft', shiftKey: true });
+
+      expect(onResize).toHaveBeenCalledWith(450); // 400 + 50
+    });
+  });
+});

package/src/components/__tests__/SessionExpiryBanner.test.tsx

@@ -0,0 +1,123 @@
+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 } from '../../test-utils';
+
+// Mock the hooks and utilities that SessionExpiryBanner imports from @semiont/react-ui
+vi.mock('@semiont/react-ui', async () => {
+  const actual = await vi.importActual('@semiont/react-ui');
+  return {
+    ...actual,
+    useSessionExpiry: vi.fn(),
+    formatTime: vi.fn(),
+  };
+});
+
+import { useSessionExpiry, formatTime } from '@semiont/react-ui';
+import type { MockedFunction } from 'vitest';
+import { SessionExpiryBanner } from '../SessionExpiryBanner';
+
+const mockUseSessionExpiry = useSessionExpiry as MockedFunction<typeof useSessionExpiry>;
+const mockFormatTime = formatTime as MockedFunction<typeof formatTime>;
+
+describe('SessionExpiryBanner', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should return null when session is not expiring soon', () => {
+    mockUseSessionExpiry.mockReturnValue({
+      timeRemaining: 600000,
+      isExpiringSoon: false,
+    });
+    mockFormatTime.mockReturnValue('10m');
+
+    const { container } = renderWithProviders(<SessionExpiryBanner />);
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should return null when formatTime returns null', () => {
+    mockUseSessionExpiry.mockReturnValue({
+      timeRemaining: 0,
+      isExpiringSoon: true,
+    });
+    mockFormatTime.mockReturnValue(null);
+
+    const { container } = renderWithProviders(<SessionExpiryBanner />);
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should render banner with time remaining when expiring soon', () => {
+    mockUseSessionExpiry.mockReturnValue({
+      timeRemaining: 180000,
+      isExpiringSoon: true,
+    });
+    mockFormatTime.mockReturnValue('3m');
+
+    renderWithProviders(<SessionExpiryBanner />);
+
+    expect(screen.getByText(/Session expiring soon/)).toBeInTheDocument();
+    expect(screen.getByText(/3m remaining/)).toBeInTheDocument();
+  });
+
+  it('should hide banner when dismiss button is clicked', () => {
+    mockUseSessionExpiry.mockReturnValue({
+      timeRemaining: 180000,
+      isExpiringSoon: true,
+    });
+    mockFormatTime.mockReturnValue('3m');
+
+    renderWithProviders(<SessionExpiryBanner />);
+
+    // Banner is visible
+    expect(screen.getByText(/Session expiring soon/)).toBeInTheDocument();
+
+    // Click dismiss
+    const dismissButton = screen.getByLabelText('Dismiss warning');
+    fireEvent.click(dismissButton);
+
+    // Banner should be gone
+    expect(screen.queryByText(/Session expiring soon/)).not.toBeInTheDocument();
+  });
+
+  it('should have role="alert"', () => {
+    mockUseSessionExpiry.mockReturnValue({
+      timeRemaining: 180000,
+      isExpiringSoon: true,
+    });
+    mockFormatTime.mockReturnValue('3m');
+
+    renderWithProviders(<SessionExpiryBanner />);
+
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+  });
+
+  it('should have aria-live="polite"', () => {
+    mockUseSessionExpiry.mockReturnValue({
+      timeRemaining: 180000,
+      isExpiringSoon: true,
+    });
+    mockFormatTime.mockReturnValue('3m');
+
+    renderWithProviders(<SessionExpiryBanner />);
+
+    const banner = screen.getByRole('alert');
+    expect(banner).toHaveAttribute('aria-live', 'polite');
+  });
+
+  it('should have data-visible attribute when shown', () => {
+    mockUseSessionExpiry.mockReturnValue({
+      timeRemaining: 60000,
+      isExpiringSoon: true,
+    });
+    mockFormatTime.mockReturnValue('1m');
+
+    renderWithProviders(<SessionExpiryBanner />);
+
+    const banner = screen.getByRole('alert');
+    expect(banner).toHaveAttribute('data-visible', 'true');
+  });
+});

package/src/components/__tests__/StatusDisplay.test.tsx

@@ -0,0 +1,160 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import React from 'react';
+import { screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { renderWithProviders } from '../../test-utils';
+
+// Mock api-hooks
+vi.mock('../../lib/api-hooks', () => ({
+  useHealth: vi.fn(),
+}));
+
+import { useHealth } from '../../lib/api-hooks';
+import type { MockedFunction } from 'vitest';
+import { StatusDisplay } from '../StatusDisplay';
+
+const mockUseHealth = useHealth as MockedFunction<typeof useHealth>;
+
+function createMockHealth(queryResult: { data?: unknown; isLoading?: boolean; error?: unknown }) {
+  return {
+    check: {
+      useQuery: vi.fn(),
+    },
+    status: {
+      useQuery: vi.fn().mockReturnValue({
+        data: queryResult.data ?? undefined,
+        isLoading: queryResult.isLoading ?? false,
+        error: queryResult.error ?? undefined,
+      }),
+    },
+  };
+}
+
+describe('StatusDisplay', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should show "Authentication required" when not fully authenticated', () => {
+    mockUseHealth.mockReturnValue(createMockHealth({ data: undefined, isLoading: false }) as ReturnType<typeof useHealth>);
+
+    renderWithProviders(
+      <StatusDisplay isFullyAuthenticated={false} isAuthenticated={false} />
+    );
+
+    expect(screen.getByText(/Authentication required/)).toBeInTheDocument();
+  });
+
+  it('should show "Connecting..." when loading', () => {
+    mockUseHealth.mockReturnValue(createMockHealth({ isLoading: true }) as ReturnType<typeof useHealth>);
+
+    renderWithProviders(
+      <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidBackendToken={true} />
+    );
+
+    expect(screen.getByText(/Connecting\.\.\./)).toBeInTheDocument();
+  });
+
+  it('should show status when data is available', () => {
+    mockUseHealth.mockReturnValue(createMockHealth({
+      data: { status: 'healthy', version: '1.2.3' },
+    }) as ReturnType<typeof useHealth>);
+
+    renderWithProviders(
+      <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidBackendToken={true} />
+    );
+
+    expect(screen.getByText(/healthy/)).toBeInTheDocument();
+    expect(screen.getByText(/v1\.2\.3/)).toBeInTheDocument();
+  });
+
+  it('should show "Connection failed" on error', () => {
+    mockUseHealth.mockReturnValue(createMockHealth({
+      error: new Error('Network error'),
+    }) as ReturnType<typeof useHealth>);
+
+    renderWithProviders(
+      <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidBackendToken={true} />
+    );
+
+    expect(screen.getByText(/Connection failed/)).toBeInTheDocument();
+  });
+
+  it('should show re-login message for 401 errors', () => {
+    mockUseHealth.mockReturnValue(createMockHealth({
+      error: new Error('401 Unauthorized'),
+    }) as ReturnType<typeof useHealth>);
+
+    renderWithProviders(
+      <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidBackendToken={true} />
+    );
+
+    expect(screen.getByText(/sign out and sign in again/i)).toBeInTheDocument();
+  });
+
+  it('should show warning for authenticated users missing backend token', () => {
+    mockUseHealth.mockReturnValue(createMockHealth({ data: undefined }) as ReturnType<typeof useHealth>);
+
+    renderWithProviders(
+      <StatusDisplay isFullyAuthenticated={false} isAuthenticated={true} hasValidBackendToken={false} />
+    );
+
+    expect(screen.getByText(/sign out and sign in again to reconnect/i)).toBeInTheDocument();
+  });
+
+  it('should have role="status"', () => {
+    mockUseHealth.mockReturnValue(createMockHealth({ data: undefined }) as ReturnType<typeof useHealth>);
+
+    renderWithProviders(
+      <StatusDisplay isFullyAuthenticated={false} isAuthenticated={false} />
+    );
+
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+
+  it('should have aria-live="polite"', () => {
+    mockUseHealth.mockReturnValue(createMockHealth({ data: undefined }) as ReturnType<typeof useHealth>);
+
+    renderWithProviders(
+      <StatusDisplay isFullyAuthenticated={false} isAuthenticated={false} />
+    );
+
+    const status = screen.getByRole('status');
+    expect(status).toHaveAttribute('aria-live', 'polite');
+  });
+
+  it('should show sign-in hint when not authenticated', () => {
+    mockUseHealth.mockReturnValue(createMockHealth({ data: undefined }) as ReturnType<typeof useHealth>);
+
+    renderWithProviders(
+      <StatusDisplay isFullyAuthenticated={false} isAuthenticated={false} />
+    );
+
+    expect(screen.getByText('Sign in to view backend status')).toBeInTheDocument();
+  });
+
+  it('should show error hint when there is an error', () => {
+    mockUseHealth.mockReturnValue(createMockHealth({
+      error: new Error('Connection refused'),
+    }) as ReturnType<typeof useHealth>);
+
+    renderWithProviders(
+      <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidBackendToken={true} />
+    );
+
+    expect(screen.getByText(/Check that the backend server is running/)).toBeInTheDocument();
+  });
+
+  it('should set data-status attribute based on state', () => {
+    mockUseHealth.mockReturnValue(createMockHealth({
+      data: { status: 'healthy', version: '1.0.0' },
+    }) as ReturnType<typeof useHealth>);
+
+    renderWithProviders(
+      <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidBackendToken={true} />
+    );
+
+    const status = screen.getByRole('status');
+    expect(status).toHaveAttribute('data-status', 'success');
+  });
+});

package/src/components/__tests__/Toolbar.test.tsx

@@ -0,0 +1,110 @@
+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 { Toolbar } from '../Toolbar';
+
+describe('Toolbar', () => {
+  beforeEach(() => {
+    resetEventBusForTesting();
+  });
+
+  describe('document context', () => {
+    it('renders all document context buttons when not archived', () => {
+      renderWithProviders(
+        <Toolbar context="document" activePanel={null} />
+      );
+
+      expect(screen.getByLabelText('Toolbar.annotations')).toBeInTheDocument();
+      expect(screen.getByLabelText('Toolbar.resourceInfo')).toBeInTheDocument();
+      expect(screen.getByLabelText('Toolbar.history')).toBeInTheDocument();
+      expect(screen.getByLabelText('Toolbar.collaboration')).toBeInTheDocument();
+      expect(screen.getByLabelText('JSON-LD')).toBeInTheDocument();
+      expect(screen.getByLabelText('Toolbar.userAccount')).toBeInTheDocument();
+      expect(screen.getByLabelText('Toolbar.settings')).toBeInTheDocument();
+    });
+
+    it('hides annotations button when archived', () => {
+      renderWithProviders(
+        <Toolbar context="document" activePanel={null} isArchived={true} />
+      );
+
+      expect(screen.queryByLabelText('Toolbar.annotations')).not.toBeInTheDocument();
+      // Other document buttons should still be present
+      expect(screen.getByLabelText('Toolbar.resourceInfo')).toBeInTheDocument();
+      expect(screen.getByLabelText('Toolbar.history')).toBeInTheDocument();
+    });
+  });
+
+  describe('simple context', () => {
+    it('renders only user and settings in simple context', () => {
+      renderWithProviders(
+        <Toolbar context="simple" activePanel={null} />
+      );
+
+      expect(screen.getByLabelText('Toolbar.userAccount')).toBeInTheDocument();
+      expect(screen.getByLabelText('Toolbar.settings')).toBeInTheDocument();
+
+      // Document-specific buttons should not be present
+      expect(screen.queryByLabelText('Toolbar.annotations')).not.toBeInTheDocument();
+      expect(screen.queryByLabelText('Toolbar.resourceInfo')).not.toBeInTheDocument();
+      expect(screen.queryByLabelText('Toolbar.history')).not.toBeInTheDocument();
+      expect(screen.queryByLabelText('Toolbar.collaboration')).not.toBeInTheDocument();
+      expect(screen.queryByLabelText('JSON-LD')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('active panel', () => {
+    it('marks active panel button as pressed', () => {
+      renderWithProviders(
+        <Toolbar context="document" activePanel="info" />
+      );
+
+      const infoButton = screen.getByLabelText('Toolbar.resourceInfo');
+      expect(infoButton).toHaveAttribute('aria-pressed', 'true');
+
+      const historyButton = screen.getByLabelText('Toolbar.history');
+      expect(historyButton).toHaveAttribute('aria-pressed', 'false');
+    });
+  });
+
+  describe('event emission', () => {
+    it('emits browse:panel-toggle with panel name on click', () => {
+      const handler = vi.fn();
+
+      const { eventBus } = renderWithProviders(
+        <Toolbar context="document" activePanel={null} />,
+        { returnEventBus: true }
+      );
+
+      const subscription = eventBus!.get('browse:panel-toggle').subscribe(handler);
+
+      fireEvent.click(screen.getByLabelText('Toolbar.resourceInfo'));
+      expect(handler).toHaveBeenCalledWith({ panel: 'info' });
+
+      handler.mockClear();
+      fireEvent.click(screen.getByLabelText('Toolbar.annotations'));
+      expect(handler).toHaveBeenCalledWith({ panel: 'annotations' });
+
+      subscription.unsubscribe();
+    });
+  });
+
+  describe('accessibility', () => {
+    it('buttons have aria-label and aria-pressed', () => {
+      renderWithProviders(
+        <Toolbar context="document" activePanel="settings" />
+      );
+
+      const buttons = screen.getAllByRole('button');
+      buttons.forEach((button) => {
+        expect(button).toHaveAttribute('aria-label');
+        expect(button).toHaveAttribute('aria-pressed');
+      });
+
+      const settingsButton = screen.getByLabelText('Toolbar.settings');
+      expect(settingsButton).toHaveAttribute('aria-pressed', 'true');
+    });
+  });
+});