From 708453a8be3120a4f7764495752842864f96549f Mon Sep 17 00:00:00 2001
From: Alireza <alireza.mirian@gmail.com>
Date: Sat, 16 Mar 2024 19:43:15 +0100
Subject: [PATCH] test(Tooltip): work around an issue in using .focus() in
 tests

Focusing input with .focus() may or may not work depending on the order of test. Probably some issue in the underlying react-aria libs, but worked around it as focusing by tab (which matters most) seems to work reliably.
---
 packages/jui/src/Tooltip/Tooltip.cy.tsx | 47 ++++++++++++++-----------
 1 file changed, 27 insertions(+), 20 deletions(-)

diff --git a/packages/jui/src/Tooltip/Tooltip.cy.tsx b/packages/jui/src/Tooltip/Tooltip.cy.tsx
index bb201028..22c64477 100644
--- a/packages/jui/src/Tooltip/Tooltip.cy.tsx
+++ b/packages/jui/src/Tooltip/Tooltip.cy.tsx
@@ -81,15 +81,19 @@ describe("TooltipTrigger", () => {
 describe("PositionedTooltipTrigger", () => {
   it("shows/hides the tooltip on focus/blur if showOnFocus is true", () => {
     cy.mount(
-      <PositionedTooltipTrigger
-        tooltip={<ValidationTooltip>tooltip</ValidationTooltip>}
-        showOnFocus
-        delay={0}
-      >
-        <input />
-      </PositionedTooltipTrigger>
+      <>
+        <button>button</button>
+        <PositionedTooltipTrigger
+          tooltip={<ValidationTooltip>tooltip</ValidationTooltip>}
+          showOnFocus
+          delay={0}
+        >
+          <input />
+        </PositionedTooltipTrigger>
+      </>
     );
-    cy.get("input").first().focus();
+    // Note: just focusing the input via .focus() didn't consistently work for some reason.
+    cy.get("button").focus().realPress("Tab");
     cy.findByRole("tooltip").should("exist");
     cy.get("input").first().blur();
     cy.findByRole("tooltip").should("not.exist");
@@ -102,21 +106,24 @@ describe("PositionedTooltipTrigger", () => {
       const Example = () => {
         const [isDisabled, setIsDisabled] = useState(false);
         return (
-          <PositionedTooltipTrigger
-            tooltip={<ValidationTooltip>Error message</ValidationTooltip>}
-            showOnFocus
-            isDisabled={isDisabled}
-          >
-            <input
-              autoFocus
-              onChange={() => {
-                setIsDisabled(true);
-              }}
-            />
-          </PositionedTooltipTrigger>
+          <>
+            <button>button</button>
+            <PositionedTooltipTrigger
+              tooltip={<ValidationTooltip>Error message</ValidationTooltip>}
+              showOnFocus
+              isDisabled={isDisabled}
+            >
+              <input
+                onChange={() => {
+                  setIsDisabled(true);
+                }}
+              />
+            </PositionedTooltipTrigger>
+          </>
         );
       };
       cy.mount(<Example />);
+      cy.get("button").focus().realPress("Tab");
       cy.findByRole("tooltip").should("exist");
       cy.realType("a");
       cy.findByRole("tooltip").should("not.exist");