chore(flyout): test escape key down behavior with tooltip as content

elastic · Nov 22, 2024 · 7acdd8b · 7acdd8b
1 parent 2e5a1a8
commit 7acdd8b
Showing 1 changed file with 42 additions and 0 deletions.
diff --git a/packages/eui/src/components/flyout/flyout.spec.tsx b/packages/eui/src/components/flyout/flyout.spec.tsx
@@ -15,6 +15,8 @@ import React, { useState } from 'react';
 import { EuiGlobalToastList } from '../toast';
 import { EuiHeader } from '../header';
 import { EuiFlyout } from './flyout';
+import { EuiToolTip } from '../tool_tip';
+import { EuiButton } from '../button';
 
 const childrenDefault = (
   <>
@@ -92,6 +94,46 @@ describe('EuiFlyout', () => {
     });
   });
 
+  describe('Close behavior: overlay elements as children', () => {
+    it('closes the flyout when the EuiToolTip is not focused', () => {
+      cy.mount(
+        <Flyout>
+          <EuiToolTip content="Tooltip text here" data-test-subj="tool_tip">
+            <EuiButton data-test-subj="tool_tip_trigger">
+              Show tooltip
+            </EuiButton>
+          </EuiToolTip>
+        </Flyout>
+      );
+      cy.get('[data-test-subj="tool_tip"]').should('not.exist');
+
+      cy.realPress('Escape');
+      cy.get('[data-test-subj="flyoutSpec"]').should('not.exist');
+    });
+
+    it('does not close the flyout when the tooltip is shown but closes the tooltip', () => {
+      cy.mount(
+        <Flyout
+          children={
+            <EuiToolTip content="Tooltip text here" data-test-subj="tool_tip">
+              <EuiButton data-test-subj="tool_tip_trigger">
+                Show tooltip
+              </EuiButton>
+            </EuiToolTip>
+          }
+        ></Flyout>
+      );
+      cy.get('[data-test-subj="tool_tip"]').should('not.exist');
+
+      cy.repeatRealPress('Tab', 2);
+      cy.get('[data-test-subj="tool_tip"]').should('exist');
+
+      cy.realPress('Escape');
+      cy.get('[data-test-subj="tool_tip"]').should('not.exist');
+      cy.get('[data-test-subj="flyoutSpec"]').should('exist');
+    });
+  });
+
   describe('Close behavior: outside clicks', () => {
     // We're using toasts here to trigger outside clicks, as a UX case where
     // we would generally expect toasts overlaid on top of a flyout *not* to close the flyout