@semiont/react-ui 0.2.36 → 0.2.37

package/src/components/resource/__tests__/event-formatting.test.ts

@@ -0,0 +1,273 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import {
+  formatEventType,
+  getEventEmoji,
+  formatRelativeTime,
+  getEventDisplayContent,
+  getEventEntityTypes,
+  getResourceCreationDetails,
+} from '../event-formatting';
+
+// Mock api-client functions
+vi.mock('@semiont/api-client', () => ({
+  getExactText: vi.fn((selector: any) => selector?.exact ?? null),
+  getTargetSelector: vi.fn((target: any) => target?.selector ?? null),
+}));
+
+const t = vi.fn((key: string, params?: Record<string, string | number>) => {
+  if (params) return `${key}(${JSON.stringify(params)})`;
+  return key;
+});
+
+describe('event-formatting', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('formatEventType', () => {
+    it('returns translation key for resource events', () => {
+      expect(formatEventType('resource.created', t)).toBe('resourceCreated');
+      expect(formatEventType('resource.cloned', t)).toBe('resourceCloned');
+      expect(formatEventType('resource.archived', t)).toBe('resourceArchived');
+      expect(formatEventType('resource.unarchived', t)).toBe('resourceUnarchived');
+    });
+
+    it('returns motivation-specific key for annotation.added', () => {
+      expect(formatEventType('annotation.added', t, { annotation: { motivation: 'highlighting' } })).toBe('highlightAdded');
+      expect(formatEventType('annotation.added', t, { annotation: { motivation: 'linking' } })).toBe('referenceCreated');
+      expect(formatEventType('annotation.added', t, { annotation: { motivation: 'assessing' } })).toBe('assessmentAdded');
+      expect(formatEventType('annotation.added', t, { annotation: { motivation: 'commenting' } })).toBe('annotationAdded');
+    });
+
+    it('returns annotationRemoved for annotation.removed', () => {
+      expect(formatEventType('annotation.removed', t)).toBe('annotationRemoved');
+    });
+
+    it('returns annotationBodyUpdated for annotation.body.updated', () => {
+      expect(formatEventType('annotation.body.updated', t)).toBe('annotationBodyUpdated');
+    });
+
+    it('returns entitytag keys', () => {
+      expect(formatEventType('entitytag.added', t)).toBe('entitytagAdded');
+      expect(formatEventType('entitytag.removed', t)).toBe('entitytagRemoved');
+    });
+
+    it('returns jobEvent for job types', () => {
+      expect(formatEventType('job.completed', t)).toBe('jobEvent');
+      expect(formatEventType('job.started', t)).toBe('jobEvent');
+      expect(formatEventType('job.failed', t)).toBe('jobEvent');
+    });
+
+    it('returns representationEvent for representation types', () => {
+      expect(formatEventType('representation.added', t)).toBe('representationEvent');
+      expect(formatEventType('representation.removed', t)).toBe('representationEvent');
+    });
+
+    it('returns raw type for unknown event types', () => {
+      expect(formatEventType('custom.event' as any, t)).toBe('custom.event');
+    });
+  });
+
+  describe('getEventEmoji', () => {
+    it('returns document emoji for resource events', () => {
+      expect(getEventEmoji('resource.created')).toBe('📄');
+      expect(getEventEmoji('resource.cloned')).toBe('📄');
+    });
+
+    it('returns motivation-specific emoji for annotation.added', () => {
+      expect(getEventEmoji('annotation.added', { annotation: { motivation: 'highlighting' } })).toBe('🟡');
+      expect(getEventEmoji('annotation.added', { annotation: { motivation: 'linking' } })).toBeTruthy();
+      expect(getEventEmoji('annotation.added', { annotation: { motivation: 'assessing' } })).toBe('🔴');
+    });
+
+    it('returns trash emoji for annotation.removed', () => {
+      expect(getEventEmoji('annotation.removed')).toBe('🗑️');
+    });
+
+    it('returns pencil emoji for annotation.body.updated', () => {
+      expect(getEventEmoji('annotation.body.updated')).toBe('✏️');
+    });
+
+    it('returns tag emoji for entitytag events', () => {
+      expect(getEventEmoji('entitytag.added')).toBe('🏷️');
+      expect(getEventEmoji('entitytag.removed')).toBe('🏷️');
+    });
+
+    it('returns appropriate emoji for job events', () => {
+      expect(getEventEmoji('job.completed')).toBe('🔗');
+      expect(getEventEmoji('job.started')).toBe('⚙️');
+      expect(getEventEmoji('job.failed')).toBe('❌');
+    });
+
+    it('returns default emoji for unknown', () => {
+      expect(getEventEmoji('unknown' as any)).toBe('📝');
+    });
+  });
+
+  describe('formatRelativeTime', () => {
+    it('returns justNow for recent timestamps', () => {
+      const now = new Date().toISOString();
+      expect(formatRelativeTime(now, t)).toBe('justNow');
+    });
+
+    it('returns minutesAgo for timestamps within an hour', () => {
+      const fiveMinAgo = new Date(Date.now() - 5 * 60 * 1000).toISOString();
+      const result = formatRelativeTime(fiveMinAgo, t);
+      expect(result).toContain('minutesAgo');
+    });
+
+    it('returns hoursAgo for timestamps within a day', () => {
+      const threeHoursAgo = new Date(Date.now() - 3 * 3600 * 1000).toISOString();
+      const result = formatRelativeTime(threeHoursAgo, t);
+      expect(result).toContain('hoursAgo');
+    });
+
+    it('returns daysAgo for timestamps within a week', () => {
+      const twoDaysAgo = new Date(Date.now() - 2 * 86400 * 1000).toISOString();
+      const result = formatRelativeTime(twoDaysAgo, t);
+      expect(result).toContain('daysAgo');
+    });
+
+    it('returns formatted date for older timestamps', () => {
+      const oldDate = new Date(Date.now() - 30 * 86400 * 1000).toISOString();
+      const result = formatRelativeTime(oldDate, t);
+      // Should be a locale date string, not a translation key
+      expect(result).not.toContain('Ago');
+    });
+  });
+
+  describe('getEventDisplayContent', () => {
+    it('returns resource name for resource.created', () => {
+      const event = {
+        event: { type: 'resource.created' as const, payload: { name: 'My Document' }, userId: 'u1', timestamp: '' },
+      } as any;
+      const result = getEventDisplayContent(event, [], []);
+      expect(result).toEqual({ exact: 'My Document', isQuoted: false, isTag: false });
+    });
+
+    it('returns resource name for resource.cloned', () => {
+      const event = {
+        event: { type: 'resource.cloned' as const, payload: { name: 'Cloned Doc' }, userId: 'u1', timestamp: '' },
+      } as any;
+      const result = getEventDisplayContent(event, [], []);
+      expect(result).toEqual({ exact: 'Cloned Doc', isQuoted: false, isTag: false });
+    });
+
+    it('returns entity type for entitytag events', () => {
+      const event = {
+        event: { type: 'entitytag.added' as const, payload: { entityType: 'Person' }, userId: 'u1', timestamp: '' },
+      } as any;
+      const result = getEventDisplayContent(event, [], []);
+      expect(result).toEqual({ exact: 'Person', isQuoted: false, isTag: true });
+    });
+
+    it('returns null for job.started', () => {
+      const event = {
+        event: { type: 'job.started' as const, payload: {}, userId: 'u1', timestamp: '' },
+      } as any;
+      expect(getEventDisplayContent(event, [], [])).toBeNull();
+    });
+
+    it('returns null for representation events', () => {
+      const event = {
+        event: { type: 'representation.added' as const, payload: {}, userId: 'u1', timestamp: '' },
+      } as any;
+      expect(getEventDisplayContent(event, [], [])).toBeNull();
+    });
+  });
+
+  describe('getEventEntityTypes', () => {
+    it('returns entity types from annotation.added with linking motivation', () => {
+      const event = {
+        event: {
+          type: 'annotation.added' as const,
+          payload: {
+            annotation: {
+              motivation: 'linking',
+              body: { entityTypes: ['Person', 'Place'] },
+            },
+          },
+        },
+      } as any;
+      expect(getEventEntityTypes(event)).toEqual(['Person', 'Place']);
+    });
+
+    it('returns empty array for non-linking annotations', () => {
+      const event = {
+        event: {
+          type: 'annotation.added' as const,
+          payload: {
+            annotation: { motivation: 'highlighting', body: null },
+          },
+        },
+      } as any;
+      expect(getEventEntityTypes(event)).toEqual([]);
+    });
+
+    it('returns empty array for non-annotation events', () => {
+      const event = {
+        event: { type: 'resource.created' as const, payload: { name: 'test' } },
+      } as any;
+      expect(getEventEntityTypes(event)).toEqual([]);
+    });
+  });
+
+  describe('getResourceCreationDetails', () => {
+    it('returns created details for resource.created', () => {
+      const event = {
+        event: {
+          type: 'resource.created' as const,
+          payload: { name: 'Doc', creationMethod: 'upload' },
+          userId: 'user-1',
+          timestamp: '',
+        },
+      } as any;
+      const result = getResourceCreationDetails(event);
+      expect(result).toEqual({
+        type: 'created',
+        method: 'upload',
+        userId: 'user-1',
+        metadata: undefined,
+      });
+    });
+
+    it('returns cloned details for resource.cloned', () => {
+      const event = {
+        event: {
+          type: 'resource.cloned' as const,
+          payload: { name: 'Clone', creationMethod: 'clone', parentResourceId: 'parent-1' },
+          userId: 'user-2',
+          timestamp: '',
+        },
+      } as any;
+      const result = getResourceCreationDetails(event);
+      expect(result).toEqual({
+        type: 'cloned',
+        method: 'clone',
+        userId: 'user-2',
+        sourceDocId: 'parent-1',
+        parentResourceId: 'parent-1',
+        metadata: undefined,
+      });
+    });
+
+    it('uses fallback method when creationMethod missing', () => {
+      const event = {
+        event: {
+          type: 'resource.created' as const,
+          payload: { name: 'Doc' },
+          userId: 'u1',
+          timestamp: '',
+        },
+      } as any;
+      expect(getResourceCreationDetails(event)?.method).toBe('unknown');
+    });
+
+    it('returns null for non-creation events', () => {
+      const event = {
+        event: { type: 'annotation.added' as const, payload: {} },
+      } as any;
+      expect(getResourceCreationDetails(event)).toBeNull();
+    });
+  });
+});

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

@@ -0,0 +1,226 @@
+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(),
+  };
+});
+
+import { getAnnotationExactText } from '@semiont/api-client';
+import type { MockedFunction } from 'vitest';
+import { AssessmentEntry } from '../AssessmentEntry';
+
+const mockGetAnnotationExactText = getAnnotationExactText as MockedFunction<typeof getAnnotationExactText>;
+
+const createMockAssessment = (overrides?: Partial<Annotation>): Annotation => ({
+  '@context': 'http://www.w3.org/ns/anno.jsonld',
+  id: 'assessment-1',
+  type: 'Annotation',
+  motivation: 'assessing',
+  creator: {
+    name: 'reviewer@example.com',
+  },
+  created: '2024-06-15T12:00:00Z',
+  modified: '2024-06-15T12:00:00Z',
+  target: {
+    source: 'resource-1',
+    selector: {
+      type: 'TextPositionSelector',
+      start: 0,
+      end: 50,
+    },
+  },
+  body: {
+    type: 'TextualBody',
+    value: 'This passage needs clarification',
+  },
+  ...overrides,
+});
+
+describe('AssessmentEntry', () => {
+  const defaultProps = {
+    assessment: createMockAssessment(),
+    isFocused: false,
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    resetEventBusForTesting();
+    mockGetAnnotationExactText.mockReturnValue('Selected passage text');
+  });
+
+  describe('Rendering', () => {
+    it('should render the selected text in quotes', () => {
+      renderWithProviders(<AssessmentEntry {...defaultProps} />);
+
+      expect(screen.getByText(/Selected passage text/)).toBeInTheDocument();
+    });
+
+    it('should render the assessment body text', () => {
+      renderWithProviders(<AssessmentEntry {...defaultProps} />);
+
+      expect(screen.getByText('This passage needs clarification')).toBeInTheDocument();
+    });
+
+    it('should handle a TextualBody directly on body', () => {
+      const assessment = createMockAssessment({
+        body: {
+          type: 'TextualBody',
+          value: 'Direct body assessment',
+        },
+      });
+
+      renderWithProviders(
+        <AssessmentEntry assessment={assessment} isFocused={false} />
+      );
+
+      expect(screen.getByText('Direct body assessment')).toBeInTheDocument();
+    });
+
+    it('should handle an array of bodies and find TextualBody', () => {
+      const assessment = createMockAssessment({
+        body: [
+          { type: 'TextualBody', value: 'Array body assessment' },
+          { type: 'TextualBody', value: 'Second body', purpose: 'tagging' },
+        ],
+      });
+
+      renderWithProviders(
+        <AssessmentEntry assessment={assessment} isFocused={false} />
+      );
+
+      expect(screen.getByText('Array body assessment')).toBeInTheDocument();
+    });
+
+    it('should truncate selected text at 100 characters', () => {
+      const longText = 'X'.repeat(150);
+      mockGetAnnotationExactText.mockReturnValue(longText);
+
+      renderWithProviders(<AssessmentEntry {...defaultProps} />);
+
+      expect(screen.getByText(new RegExp(`"${'X'.repeat(100)}`))).toBeInTheDocument();
+      expect(screen.getByText(/\.\.\./)).toBeInTheDocument();
+    });
+
+    it('should show creator name', () => {
+      renderWithProviders(<AssessmentEntry {...defaultProps} />);
+
+      expect(screen.getByText(/reviewer@example.com/)).toBeInTheDocument();
+    });
+
+    it('should show "Unknown" for missing creator', () => {
+      const assessment = createMockAssessment();
+      delete (assessment as Record<string, unknown>).creator;
+
+      renderWithProviders(
+        <AssessmentEntry assessment={assessment} isFocused={false} />
+      );
+
+      expect(screen.getByText(/Unknown/)).toBeInTheDocument();
+    });
+
+    it('should handle missing body gracefully', () => {
+      const assessment = createMockAssessment();
+      delete (assessment as Record<string, unknown>).body;
+
+      const { container } = renderWithProviders(
+        <AssessmentEntry assessment={assessment} isFocused={false} />
+      );
+
+      // Body section should not render
+      expect(container.querySelector('.semiont-annotation-entry__body')).not.toBeInTheDocument();
+    });
+
+    it('should not render quote section when selectedText is empty', () => {
+      mockGetAnnotationExactText.mockReturnValue('');
+
+      const { container } = renderWithProviders(<AssessmentEntry {...defaultProps} />);
+
+      expect(container.querySelector('.semiont-annotation-entry__quote')).not.toBeInTheDocument();
+    });
+
+    it('should format relative time for recent assessments', () => {
+      const recentAssessment = createMockAssessment({
+        created: new Date(Date.now() - 30000).toISOString(),
+      });
+
+      renderWithProviders(
+        <AssessmentEntry assessment={recentAssessment} isFocused={false} />
+      );
+
+      expect(screen.getByText(/just now/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Interactions', () => {
+    it('should emit browse:click on click', async () => {
+      const clickHandler = vi.fn();
+
+      const { container, eventBus } = renderWithProviders(
+        <AssessmentEntry {...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: 'assessment-1',
+        motivation: 'assessing',
+      });
+
+      subscription.unsubscribe();
+    });
+  });
+
+  describe('Hover state', () => {
+    it('should apply pulse class when isHovered is true', () => {
+      const { container } = renderWithProviders(
+        <AssessmentEntry {...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(
+        <AssessmentEntry {...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(
+        <AssessmentEntry {...defaultProps} isFocused={true} />
+      );
+
+      const entry = container.firstChild as HTMLElement;
+      expect(entry).toHaveAttribute('data-focused', 'true');
+    });
+
+    it('should set data-type to assessment', () => {
+      const { container } = renderWithProviders(<AssessmentEntry {...defaultProps} />);
+
+      const entry = container.firstChild as HTMLElement;
+      expect(entry).toHaveAttribute('data-type', 'assessment');
+    });
+  });
+});

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

@@ -0,0 +1,188 @@
+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 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(),
+  };
+});
+
+import { getAnnotationExactText } from '@semiont/api-client';
+import type { MockedFunction } from 'vitest';
+import { HighlightEntry } from '../HighlightEntry';
+
+const mockGetAnnotationExactText = getAnnotationExactText as MockedFunction<typeof getAnnotationExactText>;
+
+const createMockHighlight = (overrides?: Partial<Annotation>): Annotation => ({
+  '@context': 'http://www.w3.org/ns/anno.jsonld',
+  id: 'highlight-1',
+  type: 'Annotation',
+  motivation: 'highlighting',
+  creator: {
+    name: 'alice@example.com',
+  },
+  created: '2024-06-15T12:00:00Z',
+  modified: '2024-06-15T12:00:00Z',
+  target: {
+    source: 'resource-1',
+    selector: {
+      type: 'TextPositionSelector',
+      start: 0,
+      end: 50,
+    },
+  },
+  ...overrides,
+});
+
+describe('HighlightEntry', () => {
+  const defaultProps = {
+    highlight: createMockHighlight(),
+    isFocused: false,
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    resetEventBusForTesting();
+    mockGetAnnotationExactText.mockReturnValue('This is the highlighted text');
+  });
+
+  describe('Rendering', () => {
+    it('should render the selected text in quotes', () => {
+      renderWithProviders(<HighlightEntry {...defaultProps} />);
+
+      expect(screen.getByText(/This is the highlighted text/)).toBeInTheDocument();
+    });
+
+    it('should truncate text over 200 characters', () => {
+      const longText = 'A'.repeat(250);
+      mockGetAnnotationExactText.mockReturnValue(longText);
+
+      renderWithProviders(<HighlightEntry {...defaultProps} />);
+
+      // Should show first 200 chars followed by ellipsis
+      expect(screen.getByText(new RegExp(`"${'A'.repeat(200)}`))).toBeInTheDocument();
+      expect(screen.getByText(/\.\.\./)).toBeInTheDocument();
+    });
+
+    it('should not truncate text at exactly 200 characters', () => {
+      const exactText = 'B'.repeat(200);
+      mockGetAnnotationExactText.mockReturnValue(exactText);
+
+      const { container } = renderWithProviders(<HighlightEntry {...defaultProps} />);
+
+      const quote = container.querySelector('.semiont-annotation-entry__quote');
+      expect(quote).toBeInTheDocument();
+      expect(quote!.textContent).not.toContain('...');
+    });
+
+    it('should show creator name', () => {
+      renderWithProviders(<HighlightEntry {...defaultProps} />);
+
+      expect(screen.getByText(/alice@example.com/)).toBeInTheDocument();
+    });
+
+    it('should show "Unknown" for missing creator', () => {
+      const highlight = createMockHighlight();
+      delete (highlight as Record<string, unknown>).creator;
+
+      renderWithProviders(
+        <HighlightEntry highlight={highlight} isFocused={false} />
+      );
+
+      expect(screen.getByText(/Unknown/)).toBeInTheDocument();
+    });
+
+    it('should format relative time', () => {
+      const recentHighlight = createMockHighlight({
+        created: new Date(Date.now() - 30000).toISOString(),
+      });
+
+      renderWithProviders(
+        <HighlightEntry highlight={recentHighlight} isFocused={false} />
+      );
+
+      expect(screen.getByText(/just now/)).toBeInTheDocument();
+    });
+
+    it('should not render quote section when selectedText is empty', () => {
+      mockGetAnnotationExactText.mockReturnValue('');
+
+      const { container } = renderWithProviders(<HighlightEntry {...defaultProps} />);
+
+      expect(container.querySelector('.semiont-annotation-entry__quote')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Interactions', () => {
+    it('should emit browse:click on click', async () => {
+      const clickHandler = vi.fn();
+
+      const { container, eventBus } = renderWithProviders(
+        <HighlightEntry {...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: 'highlight-1',
+        motivation: 'highlighting',
+      });
+
+      subscription.unsubscribe();
+    });
+  });
+
+  describe('Hover state', () => {
+    it('should apply pulse class when isHovered is true', () => {
+      const { container } = renderWithProviders(
+        <HighlightEntry {...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(
+        <HighlightEntry {...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(
+        <HighlightEntry {...defaultProps} isFocused={true} />
+      );
+
+      const entry = container.firstChild as HTMLElement;
+      expect(entry).toHaveAttribute('data-focused', 'true');
+    });
+
+    it('should set data-focused to false when not focused', () => {
+      const { container } = renderWithProviders(
+        <HighlightEntry {...defaultProps} isFocused={false} />
+      );
+
+      const entry = container.firstChild as HTMLElement;
+      expect(entry).toHaveAttribute('data-focused', 'false');
+    });
+  });
+});