Merge pull request #6855 from Sage/address-jest-flakiness

chore(jest): address test flakiness related to tooltips

src/components/date-range/date-range.test.tsx

@@ -976,7 +976,9 @@ test("should only display the start input tooltip when the user hovers over it a
 
   const start = screen.getByRole("textbox", { name: "start" });
   await user.hover(start);
-  const startTooltip = screen.getByRole("tooltip", { name: "start error" });
+  const startTooltip = await screen.findByRole("tooltip", {
+    name: "start error",
+  });
   const endTooltip = screen.queryByRole("tooltip", { name: "end error" });
 
   expect(startTooltip).toBeVisible();

src/components/date/date.test.tsx

@@ -583,7 +583,7 @@ test("should render the help icon when the `labelHelp` prop is passed and displa
   const helpIcon = screen.getByRole("button", { name: "help" });
   await user.hover(helpIcon);
 
-  expect(screen.getByRole("tooltip")).toHaveTextContent("help text");
+  expect(await screen.findByRole("tooltip")).toHaveTextContent("help text");
 });
 
 test("should render the input with the expected required attribute when the `required` prop is true", () => {
@@ -1201,7 +1201,9 @@ describe("when the `validationRedesignOptIn` prop is falsy", () => {
 
     expect(input).toHaveAttribute("aria-invalid", "true");
     expect(icon).toBeInTheDocument();
-    expect(screen.getByRole("tooltip")).toHaveTextContent("error message");
+    expect(await screen.findByRole("tooltip")).toHaveTextContent(
+      "error message"
+    );
   });
 
   test("should render tooltip and validation icon when `validationOnLabel` is set and `error` is passed a string value and the user hovers the mouse over the input", async () => {
@@ -1220,7 +1222,9 @@ describe("when the `validationRedesignOptIn` prop is falsy", () => {
     const input = screen.getByRole("textbox");
     await user.hover(input);
 
-    expect(screen.getByRole("tooltip")).toHaveTextContent("error message");
+    expect(await screen.findByRole("tooltip")).toHaveTextContent(
+      "error message"
+    );
   });
 
   test("should render tooltip and validation icon when `validationOnLabel` is set and `error` is passed a string value and the user hovers the mouse over the label", async () => {
@@ -1239,7 +1243,9 @@ describe("when the `validationRedesignOptIn` prop is falsy", () => {
     const label = screen.getByText("label");
     await user.hover(label);
 
-    expect(screen.getByRole("tooltip")).toHaveTextContent("error message");
+    expect(await screen.findByRole("tooltip")).toHaveTextContent(
+      "error message"
+    );
   });
 
   test("should not render tooltip or validation icon when `error` is passed a boolean value", async () => {
@@ -1275,7 +1281,9 @@ describe("when the `validationRedesignOptIn` prop is falsy", () => {
 
     expect(input).toHaveAttribute("aria-invalid", "false");
     expect(icon).toBeInTheDocument();
-    expect(screen.getByRole("tooltip")).toHaveTextContent("warning message");
+    expect(await screen.findByRole("tooltip")).toHaveTextContent(
+      "warning message"
+    );
   });
 
   test("should not render tooltip or validation icon when `warning` is passed a boolean value", async () => {
@@ -1311,7 +1319,9 @@ describe("when the `validationRedesignOptIn` prop is falsy", () => {
 
     expect(input).toHaveAttribute("aria-invalid", "false");
     expect(icon).toBeInTheDocument();
-    expect(screen.getByRole("tooltip")).toHaveTextContent("info message");
+    expect(await screen.findByRole("tooltip")).toHaveTextContent(
+      "info message"
+    );
   });
 
   test("should not render tooltip or validation icon when `info` is passed a boolean value", async () => {

src/components/textarea/textarea.test.tsx

@@ -197,11 +197,11 @@ test("should set the aria-label on the Help component to the value of the helpAr
   expect(screen.getByRole("button")).toHaveAttribute("aria-label", "baz");
 });
 
-test("should set the Help component's text content to the value of the labelHelp prop", () => {
+test("should set the Help component's text content to the value of the labelHelp prop", async () => {
   render(<Textarea label="foo" labelHelp="bar" helpAriaLabel="baz" />);
 
   screen.getByRole("button").focus();
-  expect(screen.getByRole("tooltip", { name: "bar" })).toBeVisible();
+  expect(await screen.findByRole("tooltip", { name: "bar" })).toBeVisible();
 });
 
 test.each(["info", "warning", "error"])(

src/components/textbox/textbox.test.tsx

@@ -404,24 +404,27 @@ test("passes the aria-labelledby prop down to the input", () => {
 
 test.each(validationTypes)(
   'when id is present, %s prop is set as a string and the input is focused, the id of the validation tooltip is added to "aria-describedby" in the input',
-  (validationType) => {
+  async (validationType) => {
     render(<Textbox label="bar" id="foo" {...{ [validationType]: "test" }} />);
     const input = screen.getByRole("textbox");
     input.focus();
 
-    expect(screen.getByRole("tooltip")).toHaveAttribute("id", "foo-validation");
+    expect(await screen.findByRole("tooltip")).toHaveAttribute(
+      "id",
+      "foo-validation"
+    );
     expect(input).toHaveAttribute("aria-describedby", "foo-validation");
   }
 );
 
 test.each(validationTypes)(
   "when id is not present, %s prop is set as a string and the input is focused, the id of the validation tooltip is added to 'aria-describedby' in the input",
-  (validationType) => {
+  async (validationType) => {
     render(<Textbox label="bar" {...{ [validationType]: "test" }} />);
     const input = screen.getByRole("textbox");
     input.focus();
 
-    expect(screen.getByRole("tooltip")).toHaveAttribute(
+    expect(await screen.findByRole("tooltip")).toHaveAttribute(
       "id",
       `${mockedGuid}-validation`
     );
@@ -457,7 +460,7 @@ test("when fieldHelp is present and id is not present, the id of the field help
 
 test.each(validationTypes)(
   'when id is present, %s prop is set as a string, fieldHelp is present and the input is focused, the ids of both the validation tooltip are added to "aria-describedby" in the input',
-  (validationType) => {
+  async (validationType) => {
     render(
       <Textbox
         label="bar"
@@ -469,7 +472,10 @@ test.each(validationTypes)(
     const input = screen.getByRole("textbox");
     input.focus();
 
-    expect(screen.getByRole("tooltip")).toHaveAttribute("id", "foo-validation");
+    expect(await screen.findByRole("tooltip")).toHaveAttribute(
+      "id",
+      "foo-validation"
+    );
     expect(screen.getByText("baz")).toHaveAttribute("id", "foo-field-help");
     expect(input).toHaveAttribute(
       "aria-describedby",
@@ -480,14 +486,14 @@ test.each(validationTypes)(
 
 test.each(validationTypes)(
   'when id is not present, %s prop is set as a string, fieldHelp is present and the input is focused, the ids of both the validation tooltip are added to "aria-describedby" in the input',
-  (validationType) => {
+  async (validationType) => {
     render(
       <Textbox label="bar" fieldHelp="baz" {...{ [validationType]: "test" }} />
     );
     const input = screen.getByRole("textbox");
     input.focus();
 
-    expect(screen.getByRole("tooltip")).toHaveAttribute(
+    expect(await screen.findByRole("tooltip")).toHaveAttribute(
       "id",
       `${mockedGuid}-validation`
     );

src/components/tooltip/tooltip.test.tsx

@@ -40,9 +40,7 @@ describe("Tooltip", () => {
       const tooltipTarget = screen.getByText("Target");
       fireEvent.mouseEnter(tooltipTarget);
 
-      await waitFor(() => {
-        expect(screen.getByRole("tooltip")).toBeVisible();
-      });
+      expect(await screen.findByRole("tooltip")).toBeVisible();
     });
 
     it("hides tooltip after mouse leaves the tooltip target", async () => {
@@ -56,21 +54,23 @@ describe("Tooltip", () => {
       });
     });
 
-    it("shows tooltip when tooltip target is focused", () => {
+    it("shows tooltip when tooltip target is focused", async () => {
       renderTooltip();
       const tooltipTarget = screen.getByText("Target");
       fireEvent.focus(tooltipTarget);
 
-      expect(screen.getByRole("tooltip")).toBeVisible();
+      expect(await screen.findByRole("tooltip")).toBeVisible();
     });
 
-    it("hides tooltip when tooltip target is blurred", () => {
+    it("hides tooltip when tooltip target is blurred", async () => {
       renderTooltip();
       const tooltipTarget = screen.getByText("Target");
       fireEvent.focus(tooltipTarget);
       fireEvent.blur(tooltipTarget);
 
-      expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+      });
     });
   });
 
@@ -273,7 +273,7 @@ describe("Tooltip", () => {
   });
 
   describe("Ref forwarding", () => {
-    it("should forward a ref object correctly", () => {
+    it("should forward a ref object correctly", async () => {
       const testRef = { current: null };
       render(
         <Tooltip message="foo" isVisible ref={testRef}>