Update/add Cypress tests

elastic · May 2, 2024 · 14030c8 · 14030c8
1 parent 685209d
commit 14030c8
Showing 1 changed file with 33 additions and 22 deletions.
diff --git 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');