@semiont/react-ui 0.2.33-build.79 → 0.2.33-build.80

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

@@ -1,10 +1,12 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { screen, fireEvent, waitFor } from '@testing-library/react';
+import { renderWithProviders, resetEventBusForTesting } from '../../../../test-utils';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { CommentEntry } from '../CommentEntry';
 import type { components } from '@semiont/api-client';
+import type { EventBus } from '../../../../contexts/EventBusContext';
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -18,6 +20,7 @@ vi.mock('../../../../contexts/TranslationContext', () => ({
     };
     return translations[key] || key;
   }),
+  TranslationProvider: ({ children }: { children: React.ReactNode }) => children,
 }));
 
 // Mock @semiont/api-client utilities
@@ -102,6 +105,7 @@ describe('CommentEntry Component', () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
+    resetEventBusForTesting(); // Reset event bus between tests
     mockGetCommentText.mockReturnValue('This is a test comment');
     mockGetAnnotationExactText.mockReturnValue('This is th');
 
@@ -115,14 +119,14 @@ describe('CommentEntry Component', () => {
 
   describe('Rendering', () => {
     it('should render comment with text and metadata', () => {
-      render(<CommentEntry {...defaultProps} />);
+      renderWithProviders(<CommentEntry {...defaultProps} />);
 
       expect(screen.getByText('This is a test comment')).toBeInTheDocument();
       expect(screen.getByText(/user@example.com/)).toBeInTheDocument();
     });
 
     it('should render selected text quote', () => {
-      const { container } = render(<CommentEntry {...defaultProps} />);
+      const { container } = renderWithProviders(<CommentEntry {...defaultProps} />);
 
       const quote = container.querySelector('.semiont-annotation-entry__quote');
       expect(quote).toBeInTheDocument();
@@ -133,14 +137,14 @@ describe('CommentEntry Component', () => {
       const longText = 'A'.repeat(150);
       mockGetAnnotationExactText.mockReturnValue(longText);
 
-      render(<CommentEntry {...defaultProps} />);
+      renderWithProviders(<CommentEntry {...defaultProps} />);
 
       expect(screen.getByText(new RegExp(`"${'A'.repeat(100)}`))).toBeInTheDocument();
       expect(screen.getByText(/\.\.\./)).toBeInTheDocument();
     });
 
     it('should render creator name from creator object', () => {
-      render(
+      renderWithProviders(
         <CommentEntry
           {...defaultProps}
           comment={mockCommentStates.withCreatorObject}
@@ -151,7 +155,7 @@ describe('CommentEntry Component', () => {
     });
 
     it('should handle creator as object with name', () => {
-      render(<CommentEntry {...defaultProps} />);
+      renderWithProviders(<CommentEntry {...defaultProps} />);
 
       expect(screen.getByText(/user@example.com/)).toBeInTheDocument();
     });
@@ -160,7 +164,7 @@ describe('CommentEntry Component', () => {
       const { creator, ...rest } = createMockComment();
       const commentWithoutCreator = rest as Annotation;
 
-      render(
+      renderWithProviders(
         <CommentEntry
           {...defaultProps}
           comment={commentWithoutCreator}
@@ -171,7 +175,7 @@ describe('CommentEntry Component', () => {
     });
 
     it('should format relative time correctly for recent comments', () => {
-      render(
+      renderWithProviders(
         <CommentEntry
           {...defaultProps}
           comment={mockCommentStates.recentComment}
@@ -182,7 +186,7 @@ describe('CommentEntry Component', () => {
     });
 
     it('should format relative time correctly for old comments', () => {
-      render(
+      renderWithProviders(
         <CommentEntry
           {...defaultProps}
           comment={mockCommentStates.oldComment}
@@ -195,7 +199,7 @@ describe('CommentEntry Component', () => {
 
   describe('Focus State', () => {
     it('should apply focus styles when focused', () => {
-      const { container } = render(
+      const { container } = renderWithProviders(
         <CommentEntry {...defaultProps} isFocused={true} />
       );
 
@@ -205,7 +209,7 @@ describe('CommentEntry Component', () => {
     });
 
     it('should not apply focus styles when not focused', () => {
-      const { container } = render(
+      const { container } = renderWithProviders(
         <CommentEntry {...defaultProps} isFocused={false} />
       );
 
@@ -217,7 +221,7 @@ describe('CommentEntry Component', () => {
       const mockScrollIntoView = vi.fn();
       Element.prototype.scrollIntoView = mockScrollIntoView;
 
-      const { rerender } = render(
+      const { rerender } = renderWithProviders(
         <CommentEntry {...defaultProps} isFocused={false} />
       );
 
@@ -237,20 +241,31 @@ describe('CommentEntry Component', () => {
   });
 
   describe('Click Interactions', () => {
-    it('should call onClick when comment is clicked', async () => {
-      const onClick = vi.fn();
-      const { container } = render(
-        <CommentEntry {...defaultProps} onClick={onClick} />
+    it('should emit annotation:click event when comment is clicked', async () => {
+      const clickHandler = vi.fn();
+
+      const { container, eventBus } = renderWithProviders(
+        <CommentEntry {...defaultProps} />,
+        { returnEventBus: true }
       );
 
+      // Subscribe to actual event on real event bus
+      eventBus!.on('annotation:click', clickHandler);
+
       const commentDiv = container.firstChild as HTMLElement;
       await userEvent.click(commentDiv);
 
-      expect(onClick).toHaveBeenCalledOnce();
+      expect(clickHandler).toHaveBeenCalledWith({
+        annotationId: 'comment-1',
+        motivation: 'commenting'
+      });
+
+      // Clean up
+      eventBus!.off('annotation:click', clickHandler);
     });
 
     it('should be clickable with cursor-pointer class', () => {
-      const { container } = render(<CommentEntry {...defaultProps} />);
+      const { container } = renderWithProviders(<CommentEntry {...defaultProps} />);
 
       const commentDiv = container.firstChild as HTMLElement;
       expect(commentDiv).toHaveClass('semiont-annotation-entry');
@@ -258,34 +273,49 @@ describe('CommentEntry Component', () => {
   });
 
   describe('Hover Interactions', () => {
-    it('should call onCommentHover with comment id on mouse enter', () => {
-      const onCommentHover = vi.fn();
-      const { container } = render(
-        <CommentEntry {...defaultProps} onCommentHover={onCommentHover} />
+    it('should emit annotation:hover event with annotation id on mouse enter', () => {
+      const hoverHandler = vi.fn();
+
+      const { container, eventBus } = renderWithProviders(
+        <CommentEntry {...defaultProps} />,
+        { returnEventBus: true }
       );
 
+      // Subscribe to actual event
+      eventBus!.on('annotation:hover', hoverHandler);
+
       const commentDiv = container.firstChild as HTMLElement;
       fireEvent.mouseEnter(commentDiv);
 
-      expect(onCommentHover).toHaveBeenCalledWith('comment-1');
+      expect(hoverHandler).toHaveBeenCalledWith({ annotationId: 'comment-1' });
+
+      // Clean up
+      eventBus!.off('annotation:hover', hoverHandler);
     });
 
-    it('should call onCommentHover with null on mouse leave', () => {
-      const onCommentHover = vi.fn();
-      const { container } = render(
-        <CommentEntry {...defaultProps} onCommentHover={onCommentHover} />
+    it('should emit annotation:hover event with null on mouse leave', () => {
+      const hoverHandler = vi.fn();
+
+      const { container, eventBus } = renderWithProviders(
+        <CommentEntry {...defaultProps} />,
+        { returnEventBus: true }
       );
 
+      // Subscribe to actual event
+      eventBus!.on('annotation:hover', hoverHandler);
+
       const commentDiv = container.firstChild as HTMLElement;
       fireEvent.mouseLeave(commentDiv);
 
-      expect(onCommentHover).toHaveBeenCalledWith(null);
+      expect(hoverHandler).toHaveBeenCalledWith({ annotationId: null });
+
+      // Clean up
+      eventBus!.off('annotation:hover', hoverHandler);
     });
 
-    it('should not error if onCommentHover is not provided', () => {
-      const { onCommentHover, ...propsWithoutHover } = defaultProps;
-      const { container } = render(
-        <CommentEntry {...propsWithoutHover} />
+    it('should handle hover events without errors', () => {
+      const { container } = renderWithProviders(
+        <CommentEntry {...defaultProps} />
       );
 
       const commentDiv = container.firstChild as HTMLElement;
@@ -299,13 +329,13 @@ describe('CommentEntry Component', () => {
 
   describe('Edit Functionality', () => {
     it('should show edit button', () => {
-      render(<CommentEntry {...defaultProps} />);
+      renderWithProviders(<CommentEntry {...defaultProps} />);
 
       expect(screen.getByText('Edit')).toBeInTheDocument();
     });
 
     it('should enter edit mode when edit button is clicked', async () => {
-      render(<CommentEntry {...defaultProps} />);
+      renderWithProviders(<CommentEntry {...defaultProps} />);
 
       const editButton = screen.getByText('Edit');
       await userEvent.click(editButton);
@@ -318,7 +348,7 @@ describe('CommentEntry Component', () => {
     });
 
     it('should show save and cancel buttons in edit mode', async () => {
-      render(<CommentEntry {...defaultProps} />);
+      renderWithProviders(<CommentEntry {...defaultProps} />);
 
       const editButton = screen.getByText('Edit');
       await userEvent.click(editButton);
@@ -330,7 +360,7 @@ describe('CommentEntry Component', () => {
 
     it('should stop event propagation when clicking textarea in edit mode', async () => {
       const onClick = vi.fn();
-      render(<CommentEntry {...defaultProps} onClick={onClick} />);
+      renderWithProviders(<CommentEntry {...defaultProps} onClick={onClick} />);
 
       await userEvent.click(screen.getByText('Edit'));
 
@@ -345,7 +375,7 @@ describe('CommentEntry Component', () => {
     });
 
     it('should update text in textarea', async () => {
-      render(<CommentEntry {...defaultProps} />);
+      renderWithProviders(<CommentEntry {...defaultProps} />);
 
       await userEvent.click(screen.getByText('Edit'));
       const textarea = screen.getByRole('textbox');
@@ -357,7 +387,7 @@ describe('CommentEntry Component', () => {
     });
 
     it('should show character count in edit mode', async () => {
-      render(<CommentEntry {...defaultProps} />);
+      renderWithProviders(<CommentEntry {...defaultProps} />);
 
       await userEvent.click(screen.getByText('Edit'));
 
@@ -365,7 +395,7 @@ describe('CommentEntry Component', () => {
     });
 
     it('should enforce max length of 2000 characters', async () => {
-      render(<CommentEntry {...defaultProps} />);
+      renderWithProviders(<CommentEntry {...defaultProps} />);
 
       await userEvent.click(screen.getByText('Edit'));
       const textarea = screen.getByRole('textbox') as HTMLTextAreaElement;
@@ -374,7 +404,7 @@ describe('CommentEntry Component', () => {
     });
 
     it('should update textarea value and exit edit mode when save is clicked', async () => {
-      render(<CommentEntry {...defaultProps} />);
+      renderWithProviders(<CommentEntry {...defaultProps} />);
 
       await userEvent.click(screen.getByText('Edit'));
       const textarea = screen.getByRole('textbox');
@@ -393,7 +423,7 @@ describe('CommentEntry Component', () => {
     });
 
     it('should exit edit mode after save', async () => {
-      render(<CommentEntry {...defaultProps} />);
+      renderWithProviders(<CommentEntry {...defaultProps} />);
 
       await userEvent.click(screen.getByText('Edit'));
       await userEvent.click(screen.getByText('Save'));
@@ -403,7 +433,7 @@ describe('CommentEntry Component', () => {
     });
 
     it('should discard changes when cancel is clicked', async () => {
-      render(<CommentEntry {...defaultProps} />);
+      renderWithProviders(<CommentEntry {...defaultProps} />);
 
       await userEvent.click(screen.getByText('Edit'));
       const textarea = screen.getByRole('textbox');
@@ -419,7 +449,7 @@ describe('CommentEntry Component', () => {
 
     it('should not call onUpdate when cancel is clicked', async () => {
       const onUpdate = vi.fn();
-      render(<CommentEntry {...defaultProps} onUpdate={onUpdate} />);
+      renderWithProviders(<CommentEntry {...defaultProps} onUpdate={onUpdate} />);
 
       await userEvent.click(screen.getByText('Edit'));
       await userEvent.click(screen.getByText('Cancel'));
@@ -428,40 +458,18 @@ describe('CommentEntry Component', () => {
     });
   });
 
-  describe('Ref Management', () => {
-    it('should call onCommentRef with element on mount', () => {
-      const onCommentRef = vi.fn();
-      render(<CommentEntry {...defaultProps} onCommentRef={onCommentRef} />);
-
-      expect(onCommentRef).toHaveBeenCalledWith(
-        'comment-1',
-        expect.any(HTMLDivElement)
-      );
-    });
-
-    it('should call onCommentRef with null on unmount', () => {
-      const onCommentRef = vi.fn();
-      const { unmount } = render(
-        <CommentEntry {...defaultProps} onCommentRef={onCommentRef} />
-      );
-
-      onCommentRef.mockClear();
-      unmount();
-
-      expect(onCommentRef).toHaveBeenCalledWith('comment-1', null);
-    });
-  });
+  // Ref Management tests removed - CommentEntry uses forwardRef but doesn't emit ref-update events
 
   describe('Styling and Appearance', () => {
     it('should have proper border and padding styles', () => {
-      const { container } = render(<CommentEntry {...defaultProps} />);
+      const { container } = renderWithProviders(<CommentEntry {...defaultProps} />);
 
       const commentDiv = container.firstChild as HTMLElement;
       expect(commentDiv).toHaveClass('semiont-annotation-entry');
     });
 
     it('should have hover styles when not focused', () => {
-      const { container } = render(<CommentEntry {...defaultProps} />);
+      const { container } = renderWithProviders(<CommentEntry {...defaultProps} />);
 
       const commentDiv = container.firstChild as HTMLElement;
       expect(commentDiv).toHaveClass('semiont-annotation-entry');
@@ -469,7 +477,7 @@ describe('CommentEntry Component', () => {
     });
 
     it('should support dark mode classes', () => {
-      const { container } = render(<CommentEntry {...defaultProps} />);
+      const { container } = renderWithProviders(<CommentEntry {...defaultProps} />);
 
       const commentDiv = container.firstChild as HTMLElement;
       expect(commentDiv).toHaveClass('semiont-annotation-entry');
@@ -477,7 +485,7 @@ describe('CommentEntry Component', () => {
 
     it('should render comment text with whitespace preserved', () => {
       mockGetCommentText.mockReturnValue('Line 1\nLine 2\nLine 3');
-      const { container } = render(<CommentEntry {...defaultProps} />);
+      const { container } = renderWithProviders(<CommentEntry {...defaultProps} />);
 
       // Look for the comment text in the annotation entry
       const commentContent = container.querySelector('.semiont-annotation-entry__body');
@@ -488,7 +496,7 @@ describe('CommentEntry Component', () => {
   describe('Edge Cases', () => {
     it('should handle empty comment text', () => {
       mockGetCommentText.mockReturnValue('');
-      const { container } = render(<CommentEntry {...defaultProps} />);
+      const { container } = renderWithProviders(<CommentEntry {...defaultProps} />);
 
       // Check that the annotation entry exists even with empty text
       const commentDiv = container.querySelector('.semiont-annotation-entry');
@@ -499,7 +507,7 @@ describe('CommentEntry Component', () => {
       mockGetAnnotationExactText.mockReturnValue('');
 
       expect(() => {
-        render(<CommentEntry {...defaultProps} />);
+        renderWithProviders(<CommentEntry {...defaultProps} />);
       }).not.toThrow();
     });
 
@@ -508,7 +516,7 @@ describe('CommentEntry Component', () => {
       const commentWithoutTimestamp = rest as Annotation;
 
       expect(() => {
-        render(
+        renderWithProviders(
           <CommentEntry {...defaultProps} comment={commentWithoutTimestamp} />
         );
       }).not.toThrow();
@@ -518,7 +526,7 @@ describe('CommentEntry Component', () => {
       const longText = 'This is a very long comment that exceeds the typical length and should test text wrapping and display handling. '.repeat(5);
       mockGetCommentText.mockReturnValue(longText);
 
-      render(
+      renderWithProviders(
         <CommentEntry {...defaultProps} comment={mockCommentStates.withLongText} />
       );
 
@@ -529,7 +537,7 @@ describe('CommentEntry Component', () => {
     });
 
     it('should handle rapid edit/cancel cycles', async () => {
-      render(<CommentEntry {...defaultProps} />);
+      renderWithProviders(<CommentEntry {...defaultProps} />);
 
       for (let i = 0; i < 3; i++) {
         await userEvent.click(screen.getByText('Edit'));
@@ -543,7 +551,7 @@ describe('CommentEntry Component', () => {
 
   describe('Accessibility', () => {
     it('should have proper ARIA attributes for textarea', async () => {
-      render(<CommentEntry {...defaultProps} />);
+      renderWithProviders(<CommentEntry {...defaultProps} />);
 
       await userEvent.click(screen.getByText('Edit'));
       const textarea = screen.getByRole('textbox');
@@ -552,7 +560,7 @@ describe('CommentEntry Component', () => {
     });
 
     it('should be keyboard navigable', async () => {
-      render(<CommentEntry {...defaultProps} />);
+      renderWithProviders(<CommentEntry {...defaultProps} />);
 
       const editButton = screen.getByText('Edit');
       editButton.focus();
@@ -561,7 +569,7 @@ describe('CommentEntry Component', () => {
     });
 
     it('should support keyboard interaction for save/cancel', async () => {
-      render(<CommentEntry {...defaultProps} />);
+      renderWithProviders(<CommentEntry {...defaultProps} />);
 
       await userEvent.click(screen.getByText('Edit'));