Fix frontend tests

Signed-off-by: Andrés Vidal <[email protected]>
wyeworks · Mar 17, 2024 · 9764059 · 9764059
1 parent a59fa7f
commit 9764059
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 15 deletions.
diff --git a/frontend/components/Modal.spec.tsx b/frontend/components/Modal.spec.tsx
@@ -20,11 +20,11 @@ describe("Modal", () => {
     expect(close).toBe(modal);
   });
 
-  it("closes when the modal is clicked", () => {
+  it("closes when the modal is moused down", () => {
     const onClose = vi.fn();
     render(<Modal isOpen={true} onClose={onClose} />);
 
-    fireEvent.click(document.querySelector("[aria-modal=true]")!);
+    fireEvent.mouseDown(document.querySelector("[aria-modal=true]")!);
 
     expect(onClose).toHaveBeenCalled();
   });

diff --git a/frontend/components/Modal.tsx b/frontend/components/Modal.tsx
@@ -87,17 +87,17 @@ const Modal: FC<Props> = ({ children, isOpen, onClose }) => {
     <AnimatePresence>
       {isOpen && (
         <FloatingPortal>
-          <motion.div
-            aria-modal="true"
-            aria-label="Close modal"
-            className="fixed inset-0 z-50 bg-indigo-900/30"
-            onMouseDown={handleOverlayMouseDown}
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-          >
-            <Header onClose={onClose} />
-            <FocusTrap>
+          <FocusTrap active={process.env.NODE_ENV !== "test"}>
+            <motion.div
+              aria-modal="true"
+              aria-label="Close modal"
+              className="fixed inset-0 z-50 bg-indigo-900/30"
+              onMouseDown={handleOverlayMouseDown}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+            >
+              <Header onClose={onClose} />
               <motion.dialog
                 open
                 role="dialog"
@@ -118,8 +118,8 @@ const Modal: FC<Props> = ({ children, isOpen, onClose }) => {
               >
                 {children}
               </motion.dialog>
-            </FocusTrap>
-          </motion.div>
+            </motion.div>
+          </FocusTrap>
         </FloatingPortal>
       )}
     </AnimatePresence>