test

coinbase · Jan 22, 2025 · 3127d9c · 3127d9c
1 parent 8272727
commit 3127d9c
Showing 1 changed file with 72 additions and 10 deletions.
diff --git a/src/internal/primitives/DismissableLayer.test.tsx b/src/internal/primitives/DismissableLayer.test.tsx
@@ -1,4 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
+import { useRef } from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { DismissableLayer } from './DismissableLayer';
 
@@ -63,23 +64,73 @@ describe('DismissableLayer', () => {
       </DismissableLayer>,
     );
 
-    const innerElement = screen.getByTestId('inner');
-    fireEvent.pointerDown(innerElement);
+    fireEvent.pointerDown(screen.getByTestId('inner'));
     expect(onDismiss).not.toHaveBeenCalled();
   });
 
-  it('does not call onDismiss when clicking outside and disableOutsideClick is true', () => {
-    render(
-      <DismissableLayer onDismiss={onDismiss} disableOutsideClick={true}>
-        <div>Test Content</div>
-      </DismissableLayer>,
-    );
+  it('handles trigger clicks with preventTriggerBubbling', () => {
+    const TestComponent = () => {
+      const triggerRef = useRef<HTMLButtonElement>(null);
+      return (
+        <>
+          <button ref={triggerRef} data-testid="trigger">
+            Trigger
+          </button>
+          <DismissableLayer
+            onDismiss={onDismiss}
+            triggerRef={triggerRef}
+            preventTriggerBubbling={true}
+          >
+            <div>Content</div>
+          </DismissableLayer>
+        </>
+      );
+    };
+
+    render(<TestComponent />);
+
+    const event = new Event('pointerdown', { bubbles: true });
+    Object.defineProperty(event, 'preventDefault', { value: vi.fn() });
+    Object.defineProperty(event, 'stopPropagation', { value: vi.fn() });
+
+    const trigger = screen.getByTestId('trigger');
+    trigger.dispatchEvent(event);
+
+    expect(event.preventDefault).toHaveBeenCalled();
+    expect(event.stopPropagation).toHaveBeenCalled();
+    expect(onDismiss).not.toHaveBeenCalled();
+  });
 
-    fireEvent.pointerDown(document.body);
+  it('handles trigger clicks without preventTriggerBubbling', () => {
+    const TestComponent = () => {
+      const triggerRef = useRef<HTMLButtonElement>(null);
+      return (
+        <>
+          <button ref={triggerRef} data-testid="trigger">
+            Trigger
+          </button>
+          <DismissableLayer onDismiss={onDismiss} triggerRef={triggerRef}>
+            <div>Content</div>
+          </DismissableLayer>
+        </>
+      );
+    };
+
+    render(<TestComponent />);
+
+    const event = new Event('pointerdown', { bubbles: true });
+    Object.defineProperty(event, 'preventDefault', { value: vi.fn() });
+    Object.defineProperty(event, 'stopPropagation', { value: vi.fn() });
+
+    const trigger = screen.getByTestId('trigger');
+    trigger.dispatchEvent(event);
+
+    expect(event.preventDefault).not.toHaveBeenCalled();
+    expect(event.stopPropagation).not.toHaveBeenCalled();
     expect(onDismiss).not.toHaveBeenCalled();
   });
 
-  it('handles case when both disableEscapeKey and disableOutsideClick are true', () => {
+  it('handles both disableEscapeKey and disableOutsideClick being true', () => {
     render(
       <DismissableLayer
         onDismiss={onDismiss}
@@ -106,4 +157,15 @@ describe('DismissableLayer', () => {
     fireEvent.keyDown(document, { key: 'Escape' });
     fireEvent.pointerDown(document.body);
   });
+
+  it('does not call onDismiss when clicking outside and disableOutsideClick is true', () => {
+    render(
+      <DismissableLayer onDismiss={onDismiss} disableOutsideClick={true}>
+        <div>Test Content</div>
+      </DismissableLayer>,
+    );
+
+    fireEvent.pointerDown(document.body);
+    expect(onDismiss).not.toHaveBeenCalled();
+  });
 });