From 14030c83a585066e5933e7f344d1a69a7dec5140 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 2 May 2024 12:48:08 -0700
Subject: [PATCH] Update/add Cypress tests

---
 src/components/popover/input_popover.spec.tsx | 55 +++++++++++--------
 1 file changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/components/popover/input_popover.spec.tsx b/src/components/popover/input_popover.spec.tsx
index 10f17ca37d1f..8a3b0a189380 100644
--- a/src/components/popover/input_popover.spec.tsx
+++ b/src/components/popover/input_popover.spec.tsx
@@ -236,44 +236,55 @@ describe('EuiPopover', () => {
       const [isOpen, setIsOpen] = useState(true);
 
       return (
-        <div style={{ height: '150vh', margin: 10 }}>
-          <EuiInputPopover
-            closeOnScroll={true}
-            isOpen={isOpen}
-            closePopover={() => setIsOpen(false)}
-            input={
-              <EuiTextArea
-                data-test-subj="inputWithScroll"
-                onClick={() => setIsOpen(true)}
-                rows={1}
-                defaultValue={`hello\nworld`}
-              />
-            }
-          >
-            <div
-              style={{ height: 100, overflow: 'auto' }}
-              data-test-subj="popoverWithScroll"
+        <div style={{ display: 'flex' }}>
+          <div style={{ height: '150vh', margin: 10 }}>
+            <EuiInputPopover
+              closeOnScroll={true}
+              isOpen={isOpen}
+              closePopover={() => setIsOpen(false)}
+              input={
+                <EuiTextArea
+                  data-test-subj="inputWithScroll"
+                  onClick={() => setIsOpen(true)}
+                  rows={1}
+                  defaultValue={`hello\nworld`}
+                />
+              }
             >
-              <div style={{ height: 400 }}>Popover content</div>
-            </div>
-          </EuiInputPopover>
+              <div
+                style={{ height: 100, overflow: 'auto' }}
+                data-test-subj="popoverWithScroll"
+              >
+                <div style={{ height: 400 }}>Popover content</div>
+              </div>
+            </EuiInputPopover>
+          </div>
+          <div
+            style={{ height: 100, overflow: 'auto', width: 100, margin: 10 }}
+            data-test-subj="scrollingSibling"
+          >
+            <div style={{ height: 200, backgroundColor: 'pink' }} />
+          </div>
         </div>
       );
     };
 
     it('closes the popover when the user scrolls outside of the component', () => {
       cy.mount(<ScrollAllTheThings />);
-      cy.wait(500); // Wait for the setTimeout in the useEffect
 
       // Scrolling the input or popover should not close the popover
       cy.get('[data-test-subj="inputWithScroll"]').scrollTo('bottom');
       cy.get('[data-popover-panel]').should('exist');
 
+      // Scrolling an element that doesn't contain/affect the input should not close the popover
+      cy.get('[data-test-subj="scrollingSibling"]').scrollTo('bottom');
+      cy.get('[data-popover-panel]').should('exist');
+
       cy.get('[data-test-subj="popoverWithScroll"]').scrollTo('bottom');
       cy.wait(500); // Wait a tick for false positives
       cy.get('[data-popover-panel]').should('exist');
 
-      // Scrolling anywhere else should close the popover
+      // Scrolling the actual body should close the popover
       cy.scrollTo('bottom');
       cy.get('[data-popover-panel]').should('not.exist');