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

package/src/components/image-annotation/AnnotationOverlay.tsx

@@ -1,8 +1,10 @@
 'use client';
 
+import { useRef } from 'react';
 import type { components } from '@semiont/api-client';
 import { getSvgSelector, isHighlight, isReference, isAssessment, isComment, isTag, isBodyResolved, isResolvedReference } from '@semiont/api-client';
 import { parseSvgSelector } from '@semiont/api-client';
+import type { EventBus } from '../../contexts/EventBusContext';
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -12,8 +14,7 @@ interface AnnotationOverlayProps {
   imageHeight: number;
   displayWidth: number;
   displayHeight: number;
-  onAnnotationClick?: (annotation: Annotation) => void;
-  onAnnotationHover?: (annotationId: string | null) => void;
+  eventBus?: EventBus;
   hoveredAnnotationId?: string | null;
   selectedAnnotationId?: string | null;
 }
@@ -59,6 +60,9 @@ function getAnnotationTooltip(annotation: Annotation): string {
 
 /**
  * Render annotation overlay - displays existing annotations as SVG shapes
+ *
+ * @emits annotation:hover - Annotation hovered or unhovered. Payload: { annotationId: string | null }
+ * @emits annotation:click - Annotation clicked. Payload: { annotationId: string, motivation: Motivation }
  */
 export function AnnotationOverlay({
   annotations,
@@ -66,14 +70,30 @@ export function AnnotationOverlay({
   imageHeight,
   displayWidth,
   displayHeight,
-  onAnnotationClick,
-  onAnnotationHover,
+  eventBus,
   hoveredAnnotationId,
   selectedAnnotationId
 }: AnnotationOverlayProps) {
   const scaleX = displayWidth / imageWidth;
   const scaleY = displayHeight / imageHeight;
 
+  // Track current hover state to prevent redundant emissions
+  const currentHover = useRef<string | null>(null);
+
+  const handleMouseEnter = (annotationId: string) => {
+    if (currentHover.current !== annotationId) {
+      currentHover.current = annotationId;
+      eventBus?.emit('annotation:hover', { annotationId });
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (currentHover.current !== null) {
+      currentHover.current = null;
+      eventBus?.emit('annotation:hover', { annotationId: null });
+    }
+  };
+
   return (
     <svg
       className="semiont-annotation-overlay"
@@ -120,9 +140,9 @@ export function AnnotationOverlay({
                   className="semiont-annotation-overlay__shape"
                   data-hovered={isHovered ? 'true' : 'false'}
                   data-selected={isSelected ? 'true' : 'false'}
-                  onClick={() => onAnnotationClick?.(annotation)}
-                  onMouseEnter={() => onAnnotationHover?.(annotation.id)}
-                  onMouseLeave={() => onAnnotationHover?.(null)}
+                  onClick={() => eventBus?.emit('annotation:click', { annotationId: annotation.id, motivation: annotation.motivation })}
+                  onMouseEnter={() => handleMouseEnter(annotation.id)}
+                  onMouseLeave={handleMouseLeave}
                 />
                 {statusEmoji && (
                   <text
@@ -133,10 +153,10 @@ export function AnnotationOverlay({
                     style={{ userSelect: 'none' }}
                     onClick={(e) => {
                       e.stopPropagation();
-                      onAnnotationClick?.(annotation);
+                      eventBus?.emit('annotation:click', { annotationId: annotation.id, motivation: annotation.motivation });
                     }}
-                    onMouseEnter={() => onAnnotationHover?.(annotation.id)}
-                    onMouseLeave={() => onAnnotationHover?.(null)}
+                    onMouseEnter={() => handleMouseEnter(annotation.id)}
+                    onMouseLeave={handleMouseLeave}
                   >
                     {statusEmoji}
                   </text>
@@ -167,9 +187,9 @@ export function AnnotationOverlay({
                   className="semiont-annotation-overlay__shape"
                   data-hovered={isHovered ? 'true' : 'false'}
                   data-selected={isSelected ? 'true' : 'false'}
-                  onClick={() => onAnnotationClick?.(annotation)}
-                  onMouseEnter={() => onAnnotationHover?.(annotation.id)}
-                  onMouseLeave={() => onAnnotationHover?.(null)}
+                  onClick={() => eventBus?.emit('annotation:click', { annotationId: annotation.id, motivation: annotation.motivation })}
+                  onMouseEnter={() => handleMouseEnter(annotation.id)}
+                  onMouseLeave={handleMouseLeave}
                 />
                 {statusEmoji && (
                   <text
@@ -180,10 +200,10 @@ export function AnnotationOverlay({
                     style={{ userSelect: 'none' }}
                     onClick={(e) => {
                       e.stopPropagation();
-                      onAnnotationClick?.(annotation);
+                      eventBus?.emit('annotation:click', { annotationId: annotation.id, motivation: annotation.motivation });
                     }}
-                    onMouseEnter={() => onAnnotationHover?.(annotation.id)}
-                    onMouseLeave={() => onAnnotationHover?.(null)}
+                    onMouseEnter={() => handleMouseEnter(annotation.id)}
+                    onMouseLeave={handleMouseLeave}
                   >
                     {statusEmoji}
                   </text>
@@ -227,9 +247,9 @@ export function AnnotationOverlay({
                   className="semiont-annotation-overlay__shape"
                   data-hovered={isHovered ? 'true' : 'false'}
                   data-selected={isSelected ? 'true' : 'false'}
-                  onClick={() => onAnnotationClick?.(annotation)}
-                  onMouseEnter={() => onAnnotationHover?.(annotation.id)}
-                  onMouseLeave={() => onAnnotationHover?.(null)}
+                  onClick={() => eventBus?.emit('annotation:click', { annotationId: annotation.id, motivation: annotation.motivation })}
+                  onMouseEnter={() => handleMouseEnter(annotation.id)}
+                  onMouseLeave={handleMouseLeave}
                 />
                 {statusEmoji && (
                   <text
@@ -240,10 +260,10 @@ export function AnnotationOverlay({
                     style={{ userSelect: 'none' }}
                     onClick={(e) => {
                       e.stopPropagation();
-                      onAnnotationClick?.(annotation);
+                      eventBus?.emit('annotation:click', { annotationId: annotation.id, motivation: annotation.motivation });
                     }}
-                    onMouseEnter={() => onAnnotationHover?.(annotation.id)}
-                    onMouseLeave={() => onAnnotationHover?.(null)}
+                    onMouseEnter={() => handleMouseEnter(annotation.id)}
+                    onMouseLeave={handleMouseLeave}
                   >
                     {statusEmoji}
                   </text>

package/src/components/image-annotation/SvgDrawingCanvas.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import React, { useRef, useState, useEffect, useCallback } from 'react';
+import React, { useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import type { components, ResourceUri } from '@semiont/api-client';
 import { createRectangleSvg, createCircleSvg, createPolygonSvg, scaleSvgToNative, parseSvgSelector, type Point } from '@semiont/api-client';
 import { AnnotationOverlay } from './AnnotationOverlay';
 import type { SelectionMotivation } from '../annotation/AnnotateToolbar';
+import type { EventBus } from '../../contexts/EventBusContext';
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -38,30 +39,30 @@ interface SvgDrawingCanvasProps {
   existingAnnotations?: Annotation[];
   drawingMode: DrawingMode;
   selectedMotivation?: SelectionMotivation | null;
-  onAnnotationCreate?: (svg: string, position?: { x: number; y: number }) => void;
-  onAnnotationClick?: (annotation: Annotation) => void;
-  onAnnotationHover?: (annotationId: string | null) => void;
+  eventBus?: EventBus;
   hoveredAnnotationId?: string | null;
   selectedAnnotationId?: string | null;
 }
 
+/**
+ * SVG-based drawing canvas for creating image annotations with shapes
+ *
+ * @emits annotation:click - Annotation clicked on canvas. Payload: { annotationId: string, motivation: Motivation }
+ * @emits annotation:requested - New annotation drawn on canvas. Payload: { selector: SvgSelector, motivation: SelectionMotivation }
+ */
 export function SvgDrawingCanvas({
   resourceUri,
   existingAnnotations = [],
   drawingMode,
   selectedMotivation,
-  onAnnotationCreate,
-  onAnnotationClick,
-  onAnnotationHover,
+  eventBus,
   hoveredAnnotationId,
   selectedAnnotationId
 }: SvgDrawingCanvasProps) {
-  // Extract resource ID from W3C canonical URI (last segment of path)
-  const resourceId = resourceUri.split('/').pop();
-
-  // Use Next.js API route proxy instead of direct backend call
-  // This allows us to add authentication headers which <img> tags can't send
-  const imageUrl = `/api/resources/${resourceId}`;
+  const imageUrl = useMemo(() => {
+    const resourceId = resourceUri.split('/').pop();
+    return `/api/resources/${resourceId}`;
+  }, [resourceUri]);
   const containerRef = useRef<HTMLDivElement>(null);
   const imageRef = useRef<HTMLImageElement>(null);
   const [imageDimensions, setImageDimensions] = useState<{ width: number; height: number } | null>(null);
@@ -172,7 +173,7 @@ export function SvgDrawingCanvas({
 
     if (dragDistance < MIN_DRAG_DISTANCE) {
       // This was a click, not a drag - check if we clicked an existing annotation
-      if (onAnnotationClick && existingAnnotations.length > 0) {
+      if (existingAnnotations.length > 0) {
         // Find annotation at click point
         // Note: We're checking in display coordinates
         const clickedAnnotation = existingAnnotations.find(ann => {
@@ -212,7 +213,7 @@ export function SvgDrawingCanvas({
         });
 
         if (clickedAnnotation) {
-          onAnnotationClick(clickedAnnotation);
+          eventBus?.emit('annotation:click', { annotationId: clickedAnnotation.id, motivation: clickedAnnotation.motivation });
           setIsDrawing(false);
           setStartPoint(null);
           setCurrentPoint(null);
@@ -273,25 +274,22 @@ export function SvgDrawingCanvas({
       imageDimensions.height
     );
 
-    // Calculate center position for popup placement (in screen coordinates)
-    const centerX = (startPoint.x + endPoint.x) / 2;
-    const centerY = (startPoint.y + endPoint.y) / 2;
-    const rect = imageRef.current?.getBoundingClientRect();
-    const screenPosition = rect ? {
-      x: rect.left + centerX,
-      y: rect.top + centerY
-    } : undefined;
-
-    // Notify parent
-    if (onAnnotationCreate) {
-      onAnnotationCreate(nativeSvg, screenPosition);
+    // Emit annotation:requested event with SvgSelector
+    if (eventBus && selectedMotivation) {
+      eventBus.emit('annotation:requested', {
+        selector: {
+          type: 'SvgSelector',
+          value: nativeSvg
+        },
+        motivation: selectedMotivation
+      });
     }
 
     // Reset drawing state
     setIsDrawing(false);
     setStartPoint(null);
     setCurrentPoint(null);
-  }, [isDrawing, startPoint, drawingMode, displayDimensions, imageDimensions, getRelativeCoordinates, onAnnotationCreate, onAnnotationClick, existingAnnotations]);
+  }, [isDrawing, startPoint, drawingMode, displayDimensions, imageDimensions, getRelativeCoordinates, selectedMotivation, existingAnnotations]);
 
   // Cancel drawing on mouse leave
   const handleMouseLeave = useCallback(() => {
@@ -340,8 +338,7 @@ export function SvgDrawingCanvas({
               imageHeight={imageDimensions.height}
               displayWidth={displayDimensions.width}
               displayHeight={displayDimensions.height}
-              {...(onAnnotationClick && { onAnnotationClick })}
-              {...(onAnnotationHover && { onAnnotationHover })}
+              {...(eventBus && { eventBus })}
               {...(hoveredAnnotationId !== undefined && { hoveredAnnotationId })}
               {...(selectedAnnotationId !== undefined && { selectedAnnotationId })}
             />

package/src/components/layout/__tests__/LeftSidebar.test.tsx

@@ -4,32 +4,7 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { LeftSidebar } from '../LeftSidebar';
 
-// Mock dependencies
-vi.mock('../../navigation/NavigationMenu', () => ({
-  NavigationMenu: ({ t, onItemClick }: any) => (
-    <div data-testid="navigation-menu">
-      <button onClick={onItemClick}>Menu Item</button>
-      <span>{t('home')}</span>
-    </div>
-  ),
-}));
-
-vi.mock('../../branding/SemiontBranding', () => ({
-  SemiontBranding: ({ t, size, showTagline }: any) => (
-    <div data-testid="semiont-branding">
-      <span>Semiont {size}</span>
-      {showTagline && <span>Tagline</span>}
-    </div>
-  ),
-}));
-
-vi.mock('@/hooks/useAuth', () => ({
-  useAuth: vi.fn(() => ({
-    isAuthenticated: true,
-    isAdmin: false,
-    isModerator: false,
-  })),
-}));
+// No mocks - using real components via composition
 
 // Mock Link component
 const MockLink = ({ href, children, ...props }: any) => (
@@ -98,7 +73,8 @@ describe('LeftSidebar Component', () => {
         </LeftSidebar>
       );
 
-      expect(screen.getByTestId('semiont-branding')).toBeInTheDocument();
+      // Real SemiontBranding renders "Semiont" text
+      expect(screen.getByText('Semiont')).toBeInTheDocument();
     });
 
     it('should render branding link', () => {
@@ -276,7 +252,9 @@ describe('LeftSidebar Component', () => {
       );
 
       expect(mockChildren).toHaveBeenCalled();
-      expect(screen.getByTestId('navigation-menu')).toBeInTheDocument();
+      // Real NavigationMenu renders navigation links
+      const childrenContent = screen.getByTestId('children-content');
+      expect(childrenContent.querySelector('nav.semiont-navigation-menu')).toBeInTheDocument();
     });
 
     it('should pass onClose callback to NavigationMenu', () => {
@@ -297,8 +275,8 @@ describe('LeftSidebar Component', () => {
         </LeftSidebar>
       );
 
-      // Click the menu item which should trigger onClose
-      const menuItem = screen.getByText('Menu Item');
+      // Real NavigationMenu renders a link (translated 'know' key)
+      const menuItem = screen.getByText('nav.know');
       fireEvent.click(menuItem);
 
       expect(mockOnClose).toHaveBeenCalledOnce();
@@ -355,7 +333,8 @@ describe('LeftSidebar Component', () => {
       );
 
       expect(screen.getByText('S')).toBeInTheDocument();
-      expect(screen.queryByTestId('semiont-branding')).not.toBeInTheDocument();
+      // When collapsed, full "Semiont" branding is not shown
+      expect(screen.queryByText(/^Semiont$/)).not.toBeInTheDocument();
     });
   });
 
@@ -408,7 +387,7 @@ describe('LeftSidebar Component', () => {
         </LeftSidebar>
       );
 
-      expect(screen.getByTestId('semiont-branding')).toBeInTheDocument();
+      expect(screen.getByText('Semiont')).toBeInTheDocument();
     });
 
     it('should default branding link to /', () => {
@@ -423,7 +402,7 @@ describe('LeftSidebar Component', () => {
         </LeftSidebar>
       );
 
-      expect(screen.getByTestId('semiont-branding')).toBeInTheDocument();
+      expect(screen.getByText('Semiont')).toBeInTheDocument();
     });
   });
 });

package/src/components/layout/__tests__/PageLayout.test.tsx

@@ -4,22 +4,15 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { PageLayout } from '../PageLayout';
 
-// Mock UnifiedHeader
-vi.mock('../UnifiedHeader', () => ({
-  UnifiedHeader: ({ t }: any) => (
-    <div data-testid="unified-header">
-      <span>{t('home')}</span>
-    </div>
-  ),
-}));
-
-// Mock Footer
-vi.mock('../../navigation/Footer', () => ({
-  Footer: ({ t }: any) => (
-    <div data-testid="footer">
-      <span>{t('copyright')}</span>
-    </div>
-  ),
+// No mocks - using real components via composition
+// Need to mock useDropdown hook used by UnifiedHeader
+vi.mock('@/hooks/useUI', () => ({
+  useDropdown: vi.fn(() => ({
+    isOpen: false,
+    toggle: vi.fn(),
+    close: vi.fn(),
+    dropdownRef: { current: null },
+  })),
 }));
 
 // Mock Link component
@@ -69,7 +62,19 @@ describe('PageLayout Component', () => {
         </PageLayout>
       );
 
-      expect(screen.getByTestId('unified-header')).toBeInTheDocument();
+      // Real UnifiedHeader renders a header element
+      const { container } = render(
+        <PageLayout
+          Link={MockLink}
+          routes={mockRoutes}
+          t={mockT}
+          tNav={mockTNav}
+          tHome={mockTHome}
+        >
+          <div>Content</div>
+        </PageLayout>
+      );
+      expect(container.querySelector('header')).toBeInTheDocument();
     });
 
     it('should render footer', () => {
@@ -85,7 +90,8 @@ describe('PageLayout Component', () => {
         </PageLayout>
       );
 
-      expect(screen.getByTestId('footer')).toBeInTheDocument();
+      // Real Footer renders contentinfo role
+      expect(screen.getByRole('contentinfo')).toBeInTheDocument();
     });
 
     it('should render children in main element', () => {
@@ -180,7 +186,7 @@ describe('PageLayout Component', () => {
 
   describe('Props Handling', () => {
     it('should pass showAuthLinks to UnifiedHeader', () => {
-      const { rerender } = render(
+      const { rerender, container } = render(
         <PageLayout
           Link={MockLink}
           routes={mockRoutes}
@@ -193,7 +199,7 @@ describe('PageLayout Component', () => {
         </PageLayout>
       );
 
-      expect(screen.getByTestId('unified-header')).toBeInTheDocument();
+      expect(container.querySelector('header')).toBeInTheDocument();
 
       rerender(
         <PageLayout
@@ -208,11 +214,11 @@ describe('PageLayout Component', () => {
         </PageLayout>
       );
 
-      expect(screen.getByTestId('unified-header')).toBeInTheDocument();
+      expect(container.querySelector('header')).toBeInTheDocument();
     });
 
     it('should default showAuthLinks to true', () => {
-      render(
+      const { container } = render(
         <PageLayout
           Link={MockLink}
           routes={mockRoutes}
@@ -224,7 +230,7 @@ describe('PageLayout Component', () => {
         </PageLayout>
       );
 
-      expect(screen.getByTestId('unified-header')).toBeInTheDocument();
+      expect(container.querySelector('header')).toBeInTheDocument();
     });
 
     it('should pass translation functions to components', () => {
@@ -240,11 +246,9 @@ describe('PageLayout Component', () => {
         </PageLayout>
       );
 
-      // UnifiedHeader should receive tNav (which renders t('home'))
-      expect(screen.getByText('nav.home')).toBeInTheDocument();
-
-      // Footer should receive t
-      expect(screen.getByText('translated.copyright')).toBeInTheDocument();
+      // Real Footer renders copyright with dynamic year
+      const currentYear = new Date().getFullYear();
+      expect(screen.getByText(`translated.copyright`)).toBeInTheDocument();
     });
   });
 
@@ -283,7 +287,8 @@ describe('PageLayout Component', () => {
         </PageLayout>
       );
 
-      expect(screen.getByTestId('footer')).toBeInTheDocument();
+      // Real Footer renders contentinfo role
+      expect(screen.getByRole('contentinfo')).toBeInTheDocument();
     });
 
     it('should render with onOpenKeyboardHelp handler', () => {
@@ -302,7 +307,7 @@ describe('PageLayout Component', () => {
         </PageLayout>
       );
 
-      expect(screen.getByTestId('footer')).toBeInTheDocument();
+      expect(screen.getByRole('contentinfo')).toBeInTheDocument();
     });
   });
 
@@ -355,14 +360,14 @@ describe('PageLayout Component', () => {
       const wrapper = container.firstChild as HTMLElement;
       const header = wrapper.querySelector('header');
       const main = wrapper.querySelector('main');
-      const footer = wrapper.querySelector('footer')?.parentElement;
+      const footer = wrapper.querySelector('footer');
 
       // Header should come before main
       expect(header?.compareDocumentPosition(main!)).toBe(
         Node.DOCUMENT_POSITION_FOLLOWING
       );
 
-      // Main should come before footer
+      // Main should come before footer (real Footer component has footer element)
       if (footer) {
         expect(main?.compareDocumentPosition(footer)).toBe(
           Node.DOCUMENT_POSITION_FOLLOWING

package/src/components/layout/__tests__/UnifiedHeader.test.tsx

@@ -4,32 +4,7 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { UnifiedHeader } from '../UnifiedHeader';
 
-// Mock dependencies
-vi.mock('../../branding/SemiontBranding', () => ({
-  SemiontBranding: ({ t, size, showTagline, compactTagline }: any) => (
-    <div data-testid="semiont-branding">
-      Semiont {size} {showTagline && '- Tagline'} {compactTagline && '(compact)'}
-    </div>
-  ),
-}));
-
-vi.mock('../../navigation/NavigationMenu', () => ({
-  NavigationMenu: ({ t, onItemClick }: any) => (
-    <div data-testid="navigation-menu">
-      <button onClick={onItemClick}>Menu Item</button>
-      <span>{t('home')}</span>
-    </div>
-  ),
-}));
-
-vi.mock('@/hooks/useAuth', () => ({
-  useAuth: vi.fn(() => ({
-    isAuthenticated: true,
-    isAdmin: false,
-    isModerator: false,
-  })),
-}));
-
+// Mock only hooks - using real components via composition
 vi.mock('@/hooks/useUI', () => ({
   useDropdown: vi.fn(() => ({
     isOpen: false,
@@ -95,7 +70,8 @@ describe('UnifiedHeader Component', () => {
         />
       );
 
-      expect(screen.getByTestId('semiont-branding')).toBeInTheDocument();
+      // Real SemiontBranding renders "Semiont" text
+      expect(screen.getByText('Semiont')).toBeInTheDocument();
     });
 
     it('should default to standalone variant', () => {
@@ -140,7 +116,7 @@ describe('UnifiedHeader Component', () => {
         />
       );
 
-      expect(screen.getByTestId('semiont-branding')).toBeInTheDocument();
+      expect(screen.getByText('Semiont')).toBeInTheDocument();
     });
   });
 
@@ -171,7 +147,7 @@ describe('UnifiedHeader Component', () => {
         />
       );
 
-      expect(screen.getByTestId('semiont-branding')).toBeInTheDocument();
+      expect(screen.getByText('Semiont')).toBeInTheDocument();
     });
 
     it('should not render floating variant when showBranding is false', () => {
@@ -202,7 +178,7 @@ describe('UnifiedHeader Component', () => {
         />
       );
 
-      expect(screen.getByTestId('semiont-branding')).toBeInTheDocument();
+      expect(screen.getByText('Semiont')).toBeInTheDocument();
     });
 
     it('should hide branding when showBranding is false', () => {
@@ -216,7 +192,7 @@ describe('UnifiedHeader Component', () => {
         />
       );
 
-      expect(screen.queryByTestId('semiont-branding')).not.toBeInTheDocument();
+      expect(screen.queryByText('Semiont')).not.toBeInTheDocument();
     });
 
     it('should render navigation button for branding', () => {
@@ -277,7 +253,8 @@ describe('UnifiedHeader Component', () => {
         />
       );
 
-      expect(screen.getByTestId('navigation-menu')).toBeInTheDocument();
+      // Real NavigationMenu renders nav.know link
+      expect(screen.getByText('nav.know')).toBeInTheDocument();
     });
 
     it('should not show dropdown menu when not authenticated', () => {
@@ -298,7 +275,7 @@ describe('UnifiedHeader Component', () => {
         />
       );
 
-      expect(screen.queryByTestId('navigation-menu')).not.toBeInTheDocument();
+      expect(screen.queryByText('nav.know')).not.toBeInTheDocument();
     });
 
     it('should not show dropdown menu when closed', () => {
@@ -319,7 +296,7 @@ describe('UnifiedHeader Component', () => {
         />
       );
 
-      expect(screen.queryByTestId('navigation-menu')).not.toBeInTheDocument();
+      expect(screen.queryByText('nav.know')).not.toBeInTheDocument();
     });
 
     it('should close dropdown when menu item clicked', () => {
@@ -341,7 +318,8 @@ describe('UnifiedHeader Component', () => {
         />
       );
 
-      const menuItem = screen.getByText('Menu Item');
+      // Real NavigationMenu renders nav.know link
+      const menuItem = screen.getByText('nav.know');
       fireEvent.click(menuItem);
 
       expect(mockClose).toHaveBeenCalledOnce();
@@ -368,7 +346,7 @@ describe('UnifiedHeader Component', () => {
       );
 
       // Should render branding with custom link
-      expect(screen.getByTestId('semiont-branding')).toBeInTheDocument();
+      expect(screen.getByText('Semiont')).toBeInTheDocument();
     });
 
     it('should default branding link to /', () => {
@@ -381,7 +359,7 @@ describe('UnifiedHeader Component', () => {
         />
       );
 
-      expect(screen.getByTestId('semiont-branding')).toBeInTheDocument();
+      expect(screen.getByText('Semiont')).toBeInTheDocument();
     });
 
     it('should pass admin status to NavigationMenu', () => {
@@ -403,7 +381,8 @@ describe('UnifiedHeader Component', () => {
         />
       );
 
-      expect(screen.getByTestId('navigation-menu')).toBeInTheDocument();
+      // Real NavigationMenu renders admin link
+      expect(screen.getByText('nav.administer')).toBeInTheDocument();
     });
 
     it('should pass moderator status to NavigationMenu', () => {
@@ -425,7 +404,8 @@ describe('UnifiedHeader Component', () => {
         />
       );
 
-      expect(screen.getByTestId('navigation-menu')).toBeInTheDocument();
+      // Real NavigationMenu renders moderate link
+      expect(screen.getByText('nav.moderate')).toBeInTheDocument();
     });
   });
 
@@ -567,7 +547,8 @@ describe('UnifiedHeader Component', () => {
       const standaloneContent = standaloneContainer.querySelector('.semiont-unified-header');
       expect(standaloneContent).toBeInTheDocument();
 
-      const embeddedContent = embeddedContainer.querySelector('[data-testid="semiont-branding"]');
+      // Embedded variant has branding directly in container
+      const embeddedContent = embeddedContainer.querySelector('.semiont-branding');
       expect(embeddedContent).toBeInTheDocument();
     });
   });