up to date with first pr

Author: cpcramer

src/internal/primitives/Popover.test.tsx

@@ -1,211 +1,224 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { Popover } from './Popover';
 
-vi.mock('react-dom', () => ({
-  createPortal: (node: React.ReactNode) => node,
-}));
-
 describe('Popover', () => {
-  const onClose = vi.fn();
   let anchorEl: HTMLElement;
 
   beforeEach(() => {
-    vi.clearAllMocks();
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: vi.fn().mockImplementation((query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })),
+    });
+
     anchorEl = document.createElement('button');
     anchorEl.setAttribute('data-testid', 'anchor');
     document.body.appendChild(anchorEl);
-    vi.spyOn(anchorEl, 'getBoundingClientRect').mockReturnValue({
-      x: 100,
-      y: 100,
-      top: 100,
-      right: 200,
-      bottom: 200,
-      left: 100,
-      width: 100,
-      height: 100,
-      toJSON: () => {},
-    });
+  });
+
+  afterEach(() => {
+    cleanup();
+    document.body.innerHTML = '';
+    vi.clearAllMocks();
   });
 
   describe('rendering', () => {
-    it('renders nothing when isOpen is false', () => {
+    it('should not render when isOpen is false', () => {
       render(
-        <Popover isOpen={false} anchorEl={anchorEl} onClose={onClose}>
-          <div>Content</div>
+        <Popover anchorEl={anchorEl} isOpen={false}>
+          Content
         </Popover>,
       );
+
       expect(screen.queryByTestId('ockPopover')).not.toBeInTheDocument();
     });
 
-    it('renders content when isOpen is true', () => {
+    it('should render when isOpen is true', () => {
       render(
-        <Popover isOpen={true} anchorEl={anchorEl} onClose={onClose}>
-          <div data-testid="content">Content</div>
+        <Popover anchorEl={anchorEl} isOpen={true}>
+          Content
         </Popover>,
       );
+
       expect(screen.getByTestId('ockPopover')).toBeInTheDocument();
-      expect(screen.getByTestId('content')).toBeInTheDocument();
+      expect(screen.getByText('Content')).toBeInTheDocument();
     });
-  });
 
-  describe('accessibility', () => {
-    it('sets all ARIA attributes correctly', () => {
+    it('should handle null anchorEl gracefully', () => {
       render(
-        <Popover
-          isOpen={true}
-          anchorEl={anchorEl}
-          aria-label="Test Popover"
-          aria-describedby="desc"
-          aria-labelledby="title"
-          onClose={onClose}
-        >
-          <div>Content</div>
+        <Popover anchorEl={null} isOpen={true}>
+          Content
         </Popover>,
       );
 
-      const popover = screen.getByTestId('ockPopover');
-      expect(popover).toHaveAttribute('role', 'dialog');
-      expect(popover).toHaveAttribute('aria-label', 'Test Popover');
-      expect(popover).toHaveAttribute('aria-describedby', 'desc');
-      expect(popover).toHaveAttribute('aria-labelledby', 'title');
+      expect(screen.getByTestId('ockPopover')).toBeInTheDocument();
     });
   });
 
   describe('positioning', () => {
-    const testCases = [
-      {
-        position: 'top',
-        align: 'start',
-        expectedTop: -8,
-        expectedLeft: 100,
-      },
-      {
-        position: 'bottom',
-        align: 'center',
-        expectedTop: 208,
-        expectedLeft: 100,
-      },
-      {
-        position: 'left',
-        align: 'end',
-        expectedTop: 200,
-        expectedLeft: -8,
-      },
-      {
-        position: 'right',
-        align: 'center',
-        expectedTop: 150,
-        expectedLeft: 208,
-      },
-    ] as const;
-
-    testCases.forEach(({ position, align, expectedTop, expectedLeft }) => {
-      it(`positions correctly with position=${position} and align=${align}`, () => {
-        render(
-          <Popover
-            isOpen={true}
-            anchorEl={anchorEl}
-            position={position}
-            align={align}
-            offset={8}
-            onClose={onClose}
-          >
-            <div style={{ width: '100px', height: '100px' }}>Content</div>
-          </Popover>,
-        );
-
-        const popover = screen.getByTestId('ockPopover');
-        vi.spyOn(popover, 'getBoundingClientRect').mockReturnValue({
-          width: 100,
-          height: 100,
-        } as DOMRect);
-
-        fireEvent(window, new Event('resize'));
-
-        expect(popover.style.top).toBe(`${expectedTop}px`);
-        expect(popover.style.left).toBe(`${expectedLeft}px`);
-      });
+    const positions = ['top', 'right', 'bottom', 'left'] as const;
+    const alignments = ['start', 'center', 'end'] as const;
+
+    for (const position of positions) {
+      for (const align of alignments) {
+        it(`should position correctly with position=${position} and align=${align}`, () => {
+          render(
+            <Popover
+              anchorEl={anchorEl}
+              isOpen={true}
+              position={position}
+              align={align}
+              offset={8}
+            >
+              Content
+            </Popover>,
+          );
+
+          const popover = screen.getByTestId('ockPopover');
+          expect(popover).toBeInTheDocument();
+
+          expect(popover.style.top).toBeDefined();
+          expect(popover.style.left).toBeDefined();
+        });
+      }
+    }
+
+    it('should update position on window resize', async () => {
+      render(
+        <Popover anchorEl={anchorEl} isOpen={true}>
+          Content
+        </Popover>,
+      );
+
+      fireEvent(window, new Event('resize'));
+
+      expect(screen.getByTestId('ockPopover')).toBeInTheDocument();
     });
 
-    it('updates position on scroll', () => {
+    it('should update position on scroll', async () => {
       render(
-        <Popover isOpen={true} anchorEl={anchorEl} onClose={onClose}>
-          <div>Content</div>
+        <Popover anchorEl={anchorEl} isOpen={true}>
+          Content
         </Popover>,
       );
 
       fireEvent.scroll(window);
-      expect(anchorEl.getBoundingClientRect).toHaveBeenCalled();
+
+      expect(screen.getByTestId('ockPopover')).toBeInTheDocument();
     });
-  });
 
-  describe('dismissal behavior', () => {
-    it('calls onClose when clicking outside', () => {
+    it('should handle missing getBoundingClientRect gracefully', () => {
+      const originalGetBoundingClientRect =
+        Element.prototype.getBoundingClientRect;
+      Element.prototype.getBoundingClientRect = vi
+        .fn()
+        .mockReturnValue(undefined);
+
       render(
-        <Popover isOpen={true} anchorEl={anchorEl} onClose={onClose}>
-          <div>Content</div>
+        <Popover anchorEl={anchorEl} isOpen={true}>
+          Content
         </Popover>,
       );
 
-      fireEvent.pointerDown(document.body);
-      expect(onClose).toHaveBeenCalledTimes(1);
+      const popover = screen.getByTestId('ockPopover');
+      expect(popover).toBeInTheDocument();
+
+      Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
     });
+  });
 
-    it('calls onClose when pressing Escape', () => {
+  describe('interactions', () => {
+    it('should not call onClose when clicking inside', async () => {
+      const onClose = vi.fn();
       render(
-        <Popover isOpen={true} anchorEl={anchorEl} onClose={onClose}>
-          <div>Content</div>
+        <Popover anchorEl={anchorEl} isOpen={true} onClose={onClose}>
+          Content
         </Popover>,
       );
 
-      fireEvent.keyDown(document, { key: 'Escape' });
-      expect(onClose).toHaveBeenCalledTimes(1);
+      fireEvent.mouseDown(screen.getByText('Content'));
+      expect(onClose).not.toHaveBeenCalled();
     });
 
-    it('handles undefined onClose prop gracefully', () => {
+    it('should call onClose when pressing Escape', async () => {
+      const onClose = vi.fn();
       render(
-        <Popover isOpen={true} anchorEl={anchorEl}>
-          <div>Content</div>
+        <Popover anchorEl={anchorEl} isOpen={true} onClose={onClose}>
+          Content
         </Popover>,
       );
 
-      fireEvent.pointerDown(document.body);
-      fireEvent.keyDown(document, { key: 'Escape' });
+      fireEvent.keyDown(document.body, { key: 'Escape' });
+      expect(onClose).toHaveBeenCalled();
     });
   });
 
-  describe('cleanup', () => {
-    it('removes event listeners on unmount', () => {
-      const { unmount } = render(
-        <Popover isOpen={true} anchorEl={anchorEl} onClose={onClose}>
-          <div>Content</div>
+  describe('accessibility', () => {
+    it('should have correct ARIA attributes', () => {
+      render(
+        <Popover
+          anchorEl={anchorEl}
+          isOpen={true}
+          aria-label="Test Label"
+          aria-labelledby="labelId"
+          aria-describedby="describeId"
+        >
+          Content
         </Popover>,
       );
 
-      const removeEventListenerSpy = vi.spyOn(window, 'removeEventListener');
-      unmount();
+      const popover = screen.getByTestId('ockPopover');
+      expect(popover).toHaveAttribute('role', 'dialog');
+      expect(popover).toHaveAttribute('aria-label', 'Test Label');
+      expect(popover).toHaveAttribute('aria-labelledby', 'labelId');
+      expect(popover).toHaveAttribute('aria-describedby', 'describeId');
+    });
 
-      expect(removeEventListenerSpy).toHaveBeenCalledWith(
-        'resize',
-        expect.any(Function),
-      );
-      expect(removeEventListenerSpy).toHaveBeenCalledWith(
-        'scroll',
-        expect.any(Function),
+    it('should trap focus when open', async () => {
+      const user = userEvent.setup();
+      render(
+        <Popover anchorEl={anchorEl} isOpen={true}>
+          <button type="button">First</button>
+          <button type="button">Second</button>
+        </Popover>,
       );
+
+      const firstButton = screen.getByText('First');
+      const secondButton = screen.getByText('Second');
+
+      firstButton.focus();
+      expect(document.activeElement).toBe(firstButton);
+
+      await user.tab();
+      expect(document.activeElement).toBe(secondButton);
+
+      await user.tab();
+      expect(document.activeElement).toBe(firstButton);
     });
   });
 
-  describe('portal rendering', () => {
-    it('renders in portal', () => {
-      const { baseElement } = render(
-        <Popover isOpen={true} anchorEl={anchorEl} onClose={onClose}>
-          <div>Content</div>
+  describe('cleanup', () => {
+    it('should remove event listeners on unmount', () => {
+      const { unmount } = render(
+        <Popover anchorEl={anchorEl} isOpen={true}>
+          Content
         </Popover>,
       );
 
-      expect(baseElement.contains(screen.getByTestId('ockPopover'))).toBe(true);
+      const removeEventListenerSpy = vi.spyOn(window, 'removeEventListener');
+      unmount();
+
+      expect(removeEventListenerSpy).toHaveBeenCalledTimes(2);
     });
   });
-});
+});