@semiont/react-ui 0.2.35 → 0.2.37

package/src/components/resource/panels/__tests__/StatisticsPanel.test.tsx

@@ -0,0 +1,271 @@
+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';
+import type { components } from '@semiont/core';
+
+type Annotation = components['schemas']['Annotation'];
+
+// Stable mock functions defined outside vi.mock to avoid re-render loops
+const mockIsBodyResolved = vi.fn();
+const mockGetEntityTypes = vi.fn();
+
+vi.mock('@semiont/api-client', async () => {
+  const actual = await vi.importActual('@semiont/api-client');
+  return {
+    ...actual,
+    isBodyResolved: (...args: unknown[]) => mockIsBodyResolved(...args),
+  };
+});
+
+vi.mock('@semiont/ontology', () => ({
+  getEntityTypes: (...args: unknown[]) => mockGetEntityTypes(...args),
+}));
+
+import { StatisticsPanel } from '../StatisticsPanel';
+
+const createMockAnnotation = (overrides?: Partial<Annotation>): Annotation => ({
+  '@context': 'http://www.w3.org/ns/anno.jsonld',
+  id: 'http://example.com/annotations/1',
+  type: 'Annotation',
+  motivation: 'linking',
+  created: '2024-06-15T12:00:00Z',
+  modified: '2024-06-15T12:00:00Z',
+  target: {
+    source: 'http://example.com/resources/1',
+    selector: {
+      type: 'TextQuoteSelector',
+      exact: 'some text',
+    },
+  },
+  ...overrides,
+});
+
+describe('StatisticsPanel', () => {
+  const emptyProps = {
+    highlights: [] as Annotation[],
+    comments: [] as Annotation[],
+    assessments: [] as Annotation[],
+    references: [] as Annotation[],
+    tags: [] as Annotation[],
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockIsBodyResolved.mockReturnValue(false);
+    mockGetEntityTypes.mockReturnValue([]);
+  });
+
+  describe('Rendering counts', () => {
+    it('should render zero counts for all categories when empty', () => {
+      renderWithProviders(<StatisticsPanel {...emptyProps} />);
+
+      // Title
+      expect(screen.getByText('StatisticsPanel.title')).toBeInTheDocument();
+
+      // All counts should be 0
+      const values = screen.getAllByText('0');
+      // highlights, comments, assessments, tags, references, stub, resolved = 7 zeros
+      expect(values.length).toBe(7);
+    });
+
+    it('should render correct highlight count', () => {
+      const props = {
+        ...emptyProps,
+        highlights: [createMockAnnotation({ id: 'h1' }), createMockAnnotation({ id: 'h2' }), createMockAnnotation({ id: 'h3' })],
+      };
+
+      renderWithProviders(<StatisticsPanel {...props} />);
+
+      expect(screen.getByText('StatisticsPanel.highlights')).toBeInTheDocument();
+      expect(screen.getByText('3')).toBeInTheDocument();
+    });
+
+    it('should render correct comment count', () => {
+      const props = {
+        ...emptyProps,
+        comments: [createMockAnnotation({ id: 'c1' }), createMockAnnotation({ id: 'c2' })],
+      };
+
+      renderWithProviders(<StatisticsPanel {...props} />);
+
+      expect(screen.getByText('StatisticsPanel.comments')).toBeInTheDocument();
+      expect(screen.getByText('2')).toBeInTheDocument();
+    });
+
+    it('should render correct assessment count', () => {
+      const props = {
+        ...emptyProps,
+        assessments: [createMockAnnotation({ id: 'a1' })],
+      };
+
+      renderWithProviders(<StatisticsPanel {...props} />);
+
+      expect(screen.getByText('StatisticsPanel.assessments')).toBeInTheDocument();
+      expect(screen.getByText('1')).toBeInTheDocument();
+    });
+
+    it('should render correct tag count', () => {
+      const props = {
+        ...emptyProps,
+        tags: [
+          createMockAnnotation({ id: 't1' }),
+          createMockAnnotation({ id: 't2' }),
+          createMockAnnotation({ id: 't3' }),
+          createMockAnnotation({ id: 't4' }),
+        ],
+      };
+
+      renderWithProviders(<StatisticsPanel {...props} />);
+
+      expect(screen.getByText('StatisticsPanel.tags')).toBeInTheDocument();
+      expect(screen.getByText('4')).toBeInTheDocument();
+    });
+
+    it('should render correct total reference count', () => {
+      const refs = [createMockAnnotation({ id: 'r1' }), createMockAnnotation({ id: 'r2' })];
+
+      const { container } = renderWithProviders(<StatisticsPanel {...emptyProps} references={refs} />);
+
+      expect(screen.getByText('StatisticsPanel.references')).toBeInTheDocument();
+      // The references item has the total count as its direct .semiont-statistics-panel__value child
+      const referencesItem = screen.getByText('StatisticsPanel.references').closest('.semiont-statistics-panel__item');
+      const totalValue = referencesItem!.querySelector(':scope > .semiont-statistics-panel__value');
+      expect(totalValue!.textContent).toBe('2');
+    });
+  });
+
+  describe('Reference sub-categories', () => {
+    it('should show stub and resolved counts', () => {
+      const refs = [
+        createMockAnnotation({ id: 'r1' }),
+        createMockAnnotation({ id: 'r2' }),
+        createMockAnnotation({ id: 'r3' }),
+      ];
+
+      // r1 resolved, r2 and r3 are stubs
+      mockIsBodyResolved.mockImplementation((body: unknown) => {
+        // We can distinguish by the call order
+        return false;
+      });
+
+      // Make first call return true, rest false
+      mockIsBodyResolved
+        .mockReturnValueOnce(true)  // r1 stub check
+        .mockReturnValueOnce(false) // r2 stub check
+        .mockReturnValueOnce(false) // r3 stub check
+        .mockReturnValueOnce(true)  // r1 resolved check
+        .mockReturnValueOnce(false) // r2 resolved check
+        .mockReturnValueOnce(false); // r3 resolved check
+
+      renderWithProviders(<StatisticsPanel {...emptyProps} references={refs} />);
+
+      expect(screen.getByText('StatisticsPanel.stub')).toBeInTheDocument();
+      expect(screen.getByText('StatisticsPanel.resolved')).toBeInTheDocument();
+    });
+
+    it('should count all as resolved when isBodyResolved returns true', () => {
+      const refs = [
+        createMockAnnotation({ id: 'r1' }),
+        createMockAnnotation({ id: 'r2' }),
+      ];
+
+      mockIsBodyResolved.mockReturnValue(true);
+
+      renderWithProviders(<StatisticsPanel {...emptyProps} references={refs} />);
+
+      // stub count = 0, resolved count = 2
+      expect(screen.getByText('StatisticsPanel.stub')).toBeInTheDocument();
+      expect(screen.getByText('StatisticsPanel.resolved')).toBeInTheDocument();
+    });
+
+    it('should count all as stubs when isBodyResolved returns false', () => {
+      const refs = [
+        createMockAnnotation({ id: 'r1' }),
+        createMockAnnotation({ id: 'r2' }),
+      ];
+
+      mockIsBodyResolved.mockReturnValue(false);
+
+      renderWithProviders(<StatisticsPanel {...emptyProps} references={refs} />);
+
+      expect(screen.getByText('StatisticsPanel.stub')).toBeInTheDocument();
+      expect(screen.getByText('StatisticsPanel.resolved')).toBeInTheDocument();
+    });
+  });
+
+  describe('Entity types', () => {
+    it('should not render entity types section when no entity types exist', () => {
+      mockGetEntityTypes.mockReturnValue([]);
+
+      const { container } = renderWithProviders(<StatisticsPanel {...emptyProps} />);
+
+      expect(container.querySelector('.semiont-statistics-panel__entity-types')).not.toBeInTheDocument();
+    });
+
+    it('should render entity types with counts', () => {
+      const refs = [
+        createMockAnnotation({ id: 'r1' }),
+        createMockAnnotation({ id: 'r2' }),
+        createMockAnnotation({ id: 'r3' }),
+      ];
+
+      mockGetEntityTypes
+        .mockReturnValueOnce(['Person', 'Organization'])
+        .mockReturnValueOnce(['Person'])
+        .mockReturnValueOnce(['Location']);
+
+      renderWithProviders(<StatisticsPanel {...emptyProps} references={refs} />);
+
+      expect(screen.getByText('StatisticsPanel.entityTypes')).toBeInTheDocument();
+      expect(screen.getByText('Person')).toBeInTheDocument();
+      expect(screen.getByText('Organization')).toBeInTheDocument();
+      expect(screen.getByText('Location')).toBeInTheDocument();
+    });
+
+    it('should sort entity types by count descending', () => {
+      const refs = [
+        createMockAnnotation({ id: 'r1' }),
+        createMockAnnotation({ id: 'r2' }),
+        createMockAnnotation({ id: 'r3' }),
+      ];
+
+      // Person appears 3 times, Location 1 time
+      mockGetEntityTypes
+        .mockReturnValueOnce(['Person'])
+        .mockReturnValueOnce(['Person'])
+        .mockReturnValueOnce(['Person', 'Location']);
+
+      const { container } = renderWithProviders(<StatisticsPanel {...emptyProps} references={refs} />);
+
+      const entityItems = container.querySelectorAll('.semiont-statistics-panel__entity-item');
+      expect(entityItems.length).toBe(2);
+
+      // First should be Person (count 3), second Location (count 1)
+      expect(entityItems[0].querySelector('.semiont-statistics-panel__entity-name')!.textContent).toBe('Person');
+      expect(entityItems[1].querySelector('.semiont-statistics-panel__entity-name')!.textContent).toBe('Location');
+    });
+  });
+
+  describe('Mixed annotation counts', () => {
+    it('should render all categories with their respective counts simultaneously', () => {
+      const props = {
+        highlights: [createMockAnnotation({ id: 'h1' })],
+        comments: [createMockAnnotation({ id: 'c1' }), createMockAnnotation({ id: 'c2' })],
+        assessments: [createMockAnnotation({ id: 'a1' }), createMockAnnotation({ id: 'a2' }), createMockAnnotation({ id: 'a3' })],
+        references: [createMockAnnotation({ id: 'r1' })],
+        tags: [createMockAnnotation({ id: 't1' }), createMockAnnotation({ id: 't2' })],
+      };
+
+      renderWithProviders(<StatisticsPanel {...props} />);
+
+      // Check that labels are present
+      expect(screen.getByText('StatisticsPanel.highlights')).toBeInTheDocument();
+      expect(screen.getByText('StatisticsPanel.comments')).toBeInTheDocument();
+      expect(screen.getByText('StatisticsPanel.assessments')).toBeInTheDocument();
+      expect(screen.getByText('StatisticsPanel.references')).toBeInTheDocument();
+      expect(screen.getByText('StatisticsPanel.tags')).toBeInTheDocument();
+    });
+  });
+});

package/src/components/resource/panels/__tests__/TagEntry.test.tsx

@@ -0,0 +1,210 @@
+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, resetEventBusForTesting } from '../../../../test-utils';
+import userEvent from '@testing-library/user-event';
+import type { components } from '@semiont/core';
+
+type Annotation = components['schemas']['Annotation'];
+
+// Mock @semiont/api-client
+vi.mock('@semiont/api-client', async () => {
+  const actual = await vi.importActual('@semiont/api-client');
+  return {
+    ...actual,
+    getAnnotationExactText: vi.fn(),
+  };
+});
+
+// Mock @semiont/ontology
+vi.mock('@semiont/ontology', () => ({
+  getTagCategory: vi.fn(),
+  getTagSchemaId: vi.fn(),
+}));
+
+// Mock tag-schemas
+vi.mock('../../../../lib/tag-schemas', () => ({
+  getTagSchema: vi.fn(),
+}));
+
+import { getAnnotationExactText } from '@semiont/api-client';
+import { getTagCategory, getTagSchemaId } from '@semiont/ontology';
+import { getTagSchema } from '../../../../lib/tag-schemas';
+import type { MockedFunction } from 'vitest';
+import { TagEntry } from '../TagEntry';
+
+const mockGetAnnotationExactText = getAnnotationExactText as MockedFunction<typeof getAnnotationExactText>;
+const mockGetTagCategory = getTagCategory as MockedFunction<typeof getTagCategory>;
+const mockGetTagSchemaId = getTagSchemaId as MockedFunction<typeof getTagSchemaId>;
+const mockGetTagSchema = getTagSchema as MockedFunction<typeof getTagSchema>;
+
+const createMockTag = (overrides?: Partial<Annotation>): Annotation => ({
+  '@context': 'http://www.w3.org/ns/anno.jsonld',
+  id: 'tag-1',
+  type: 'Annotation',
+  motivation: 'tagging',
+  creator: {
+    name: 'tagger@example.com',
+  },
+  created: '2024-06-15T12:00:00Z',
+  modified: '2024-06-15T12:00:00Z',
+  target: {
+    source: 'resource-1',
+    selector: {
+      type: 'TextPositionSelector',
+      start: 10,
+      end: 30,
+    },
+  },
+  body: {
+    type: 'TextualBody',
+    value: 'Person',
+    purpose: 'tagging',
+  },
+  ...overrides,
+});
+
+describe('TagEntry', () => {
+  const defaultProps = {
+    tag: createMockTag(),
+    isFocused: false,
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    resetEventBusForTesting();
+    mockGetAnnotationExactText.mockReturnValue('Tagged text content');
+    mockGetTagCategory.mockReturnValue('Entity');
+    mockGetTagSchemaId.mockReturnValue(null);
+    mockGetTagSchema.mockReturnValue(null);
+  });
+
+  describe('Rendering', () => {
+    it('should render the category badge', () => {
+      renderWithProviders(<TagEntry {...defaultProps} />);
+
+      expect(screen.getByText('Entity')).toBeInTheDocument();
+    });
+
+    it('should render the selected text in quotes', () => {
+      renderWithProviders(<TagEntry {...defaultProps} />);
+
+      expect(screen.getByText(/Tagged text content/)).toBeInTheDocument();
+    });
+
+    it('should truncate text over 150 characters', () => {
+      const longText = 'C'.repeat(200);
+      mockGetAnnotationExactText.mockReturnValue(longText);
+
+      renderWithProviders(<TagEntry {...defaultProps} />);
+
+      expect(screen.getByText(new RegExp(`"${'C'.repeat(150)}`))).toBeInTheDocument();
+      expect(screen.getByText(/\.\.\./)).toBeInTheDocument();
+    });
+
+    it('should not truncate text at exactly 150 characters', () => {
+      const exactText = 'D'.repeat(150);
+      mockGetAnnotationExactText.mockReturnValue(exactText);
+
+      const { container } = renderWithProviders(<TagEntry {...defaultProps} />);
+
+      const quote = container.querySelector('.semiont-annotation-entry__quote');
+      expect(quote).toBeInTheDocument();
+      expect(quote!.textContent).not.toContain('...');
+    });
+
+    it('should render schema name when available', () => {
+      mockGetTagSchemaId.mockReturnValue('schema-ner-v1');
+      mockGetTagSchema.mockReturnValue({
+        id: 'schema-ner-v1',
+        name: 'Named Entity Recognition',
+        domain: 'nlp',
+        version: '1.0',
+        categories: [],
+      });
+
+      renderWithProviders(<TagEntry {...defaultProps} />);
+
+      expect(screen.getByText('Named Entity Recognition')).toBeInTheDocument();
+    });
+
+    it('should not render schema name when schema is not found', () => {
+      mockGetTagSchemaId.mockReturnValue('unknown-schema');
+      mockGetTagSchema.mockReturnValue(null);
+
+      const { container } = renderWithProviders(<TagEntry {...defaultProps} />);
+
+      expect(container.querySelector('.semiont-annotation-entry__meta')).not.toBeInTheDocument();
+    });
+
+    it('should render category badge with correct data-variant', () => {
+      const { container } = renderWithProviders(<TagEntry {...defaultProps} />);
+
+      const badge = container.querySelector('.semiont-tag-badge');
+      expect(badge).toBeInTheDocument();
+      expect(badge).toHaveAttribute('data-variant', 'tag');
+    });
+  });
+
+  describe('Interactions', () => {
+    it('should emit browse:click on click', async () => {
+      const clickHandler = vi.fn();
+
+      const { container, eventBus } = renderWithProviders(
+        <TagEntry {...defaultProps} />,
+        { returnEventBus: true }
+      );
+
+      const subscription = eventBus!.get('browse:click').subscribe(clickHandler);
+
+      const entry = container.firstChild as HTMLElement;
+      await userEvent.click(entry);
+
+      expect(clickHandler).toHaveBeenCalledWith({
+        annotationId: 'tag-1',
+        motivation: 'tagging',
+      });
+
+      subscription.unsubscribe();
+    });
+  });
+
+  describe('Hover state', () => {
+    it('should apply pulse class when isHovered is true', () => {
+      const { container } = renderWithProviders(
+        <TagEntry {...defaultProps} isHovered={true} />
+      );
+
+      const entry = container.firstChild as HTMLElement;
+      expect(entry).toHaveClass('semiont-annotation-pulse');
+    });
+
+    it('should not apply pulse class when isHovered is false', () => {
+      const { container } = renderWithProviders(
+        <TagEntry {...defaultProps} isHovered={false} />
+      );
+
+      const entry = container.firstChild as HTMLElement;
+      expect(entry).not.toHaveClass('semiont-annotation-pulse');
+    });
+  });
+
+  describe('Focus state', () => {
+    it('should set data-focused to true when focused', () => {
+      const { container } = renderWithProviders(
+        <TagEntry {...defaultProps} isFocused={true} />
+      );
+
+      const entry = container.firstChild as HTMLElement;
+      expect(entry).toHaveAttribute('data-focused', 'true');
+    });
+
+    it('should set data-type to tag', () => {
+      const { container } = renderWithProviders(<TagEntry {...defaultProps} />);
+
+      const entry = container.firstChild as HTMLElement;
+      expect(entry).toHaveAttribute('data-type', 'tag');
+    });
+  });
+});

package/src/components/settings/__tests__/SettingsPanel.test.tsx

@@ -0,0 +1,190 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import React from 'react';
+import { screen, fireEvent } from '@testing-library/react';
+import { renderWithProviders, resetEventBusForTesting } from '../../../test-utils';
+import '@testing-library/jest-dom';
+import { SettingsPanel } from '../SettingsPanel';
+
+// Mock LiveRegion
+vi.mock('../../LiveRegion', () => ({
+  useLanguageChangeAnnouncements: vi.fn(() => ({
+    announceLanguageChanging: vi.fn(),
+    announceLanguageChanged: vi.fn(),
+  })),
+}));
+
+// Mock LOCALES from api-client
+vi.mock('@semiont/api-client', async () => {
+  const actual = await vi.importActual('@semiont/api-client');
+  return {
+    ...actual,
+    LOCALES: [
+      { code: 'en', nativeName: 'English' },
+      { code: 'de', nativeName: 'Deutsch' },
+      { code: 'fr', nativeName: 'Français' },
+    ],
+  };
+});
+
+describe('SettingsPanel', () => {
+  const defaultProps = {
+    showLineNumbers: true,
+    theme: 'light' as const,
+    locale: 'en',
+    hoverDelayMs: 150,
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    resetEventBusForTesting();
+  });
+
+  it('renders settings title', () => {
+    renderWithProviders(<SettingsPanel {...defaultProps} />);
+    expect(screen.getByText('Settings.title')).toBeInTheDocument();
+  });
+
+  describe('line numbers toggle', () => {
+    it('renders line numbers toggle', () => {
+      renderWithProviders(<SettingsPanel {...defaultProps} />);
+      expect(screen.getByText('Settings.lineNumbers')).toBeInTheDocument();
+    });
+
+    it('shows toggle as checked when line numbers enabled', () => {
+      renderWithProviders(<SettingsPanel {...defaultProps} showLineNumbers={true} />);
+      const toggle = screen.getByRole('switch');
+      expect(toggle).toHaveAttribute('aria-checked', 'true');
+    });
+
+    it('shows toggle as unchecked when line numbers disabled', () => {
+      renderWithProviders(<SettingsPanel {...defaultProps} showLineNumbers={false} />);
+      const toggle = screen.getByRole('switch');
+      expect(toggle).toHaveAttribute('aria-checked', 'false');
+    });
+
+    it('emits settings:line-numbers-toggled on toggle click', () => {
+      const handler = vi.fn();
+      const { eventBus } = renderWithProviders(
+        <SettingsPanel {...defaultProps} />,
+        { returnEventBus: true }
+      );
+
+      const sub = eventBus!.get('settings:line-numbers-toggled').subscribe(handler);
+      fireEvent.click(screen.getByRole('switch'));
+      expect(handler).toHaveBeenCalled();
+      sub.unsubscribe();
+    });
+  });
+
+  describe('theme selection', () => {
+    it('renders theme buttons', () => {
+      renderWithProviders(<SettingsPanel {...defaultProps} />);
+      expect(screen.getByText(/Settings.themeLight/)).toBeInTheDocument();
+      expect(screen.getByText(/Settings.themeDark/)).toBeInTheDocument();
+      expect(screen.getByText(/Settings.themeSystem/)).toBeInTheDocument();
+    });
+
+    it('marks active theme as pressed', () => {
+      renderWithProviders(<SettingsPanel {...defaultProps} theme="dark" />);
+      const darkButton = screen.getByText(/Settings.themeDark/);
+      expect(darkButton).toHaveAttribute('aria-pressed', 'true');
+
+      const lightButton = screen.getByText(/Settings.themeLight/);
+      expect(lightButton).toHaveAttribute('aria-pressed', 'false');
+    });
+
+    it('emits settings:theme-changed on theme button click', () => {
+      const handler = vi.fn();
+      const { eventBus } = renderWithProviders(
+        <SettingsPanel {...defaultProps} />,
+        { returnEventBus: true }
+      );
+
+      const sub = eventBus!.get('settings:theme-changed').subscribe(handler);
+      fireEvent.click(screen.getByText(/Settings.themeDark/));
+      expect(handler).toHaveBeenCalledWith({ theme: 'dark' });
+      sub.unsubscribe();
+    });
+  });
+
+  describe('language selection', () => {
+    it('renders language select with options', () => {
+      renderWithProviders(<SettingsPanel {...defaultProps} />);
+      const select = screen.getByLabelText('Settings.language');
+      expect(select).toBeInTheDocument();
+
+      expect(screen.getByText('English')).toBeInTheDocument();
+      expect(screen.getByText('Deutsch')).toBeInTheDocument();
+      expect(screen.getByText('Français')).toBeInTheDocument();
+    });
+
+    it('shows current locale as selected', () => {
+      renderWithProviders(<SettingsPanel {...defaultProps} locale="de" />);
+      const select = screen.getByLabelText('Settings.language') as HTMLSelectElement;
+      expect(select.value).toBe('de');
+    });
+
+    it('emits settings:locale-changed on language change', () => {
+      const handler = vi.fn();
+      const { eventBus } = renderWithProviders(
+        <SettingsPanel {...defaultProps} />,
+        { returnEventBus: true }
+      );
+
+      const sub = eventBus!.get('settings:locale-changed').subscribe(handler);
+      fireEvent.change(screen.getByLabelText('Settings.language'), {
+        target: { value: 'fr' },
+      });
+      expect(handler).toHaveBeenCalledWith({ locale: 'fr' });
+      sub.unsubscribe();
+    });
+
+    it('disables select when locale change is pending', () => {
+      renderWithProviders(
+        <SettingsPanel {...defaultProps} isPendingLocaleChange={true} />
+      );
+      const select = screen.getByLabelText('Settings.language');
+      expect(select).toBeDisabled();
+      expect(select).toHaveAttribute('aria-busy', 'true');
+    });
+
+    it('shows loading message when locale change is pending', () => {
+      renderWithProviders(
+        <SettingsPanel {...defaultProps} isPendingLocaleChange={true} />
+      );
+      expect(screen.getByText('Settings.languageChanging')).toBeInTheDocument();
+    });
+  });
+
+  describe('hover delay slider', () => {
+    it('renders hover delay slider', () => {
+      renderWithProviders(<SettingsPanel {...defaultProps} />);
+      const slider = screen.getByLabelText('Settings.hoverDelay');
+      expect(slider).toBeInTheDocument();
+      expect(slider).toHaveAttribute('type', 'range');
+      expect(slider).toHaveAttribute('min', '0');
+      expect(slider).toHaveAttribute('max', '500');
+    });
+
+    it('shows current hover delay value', () => {
+      renderWithProviders(<SettingsPanel {...defaultProps} hoverDelayMs={200} />);
+      const slider = screen.getByLabelText('Settings.hoverDelay') as HTMLInputElement;
+      expect(slider.value).toBe('200');
+    });
+
+    it('emits settings:hover-delay-changed on slider change', () => {
+      const handler = vi.fn();
+      const { eventBus } = renderWithProviders(
+        <SettingsPanel {...defaultProps} />,
+        { returnEventBus: true }
+      );
+
+      const sub = eventBus!.get('settings:hover-delay-changed').subscribe(handler);
+      fireEvent.change(screen.getByLabelText('Settings.hoverDelay'), {
+        target: { value: '300' },
+      });
+      expect(handler).toHaveBeenCalledWith({ hoverDelayMs: 300 });
+      sub.unsubscribe();
+    });
+  });
+});