diff --git a/src/components/date-range/date-range.test.tsx b/src/components/date-range/date-range.test.tsx
index 81635aa9fc..77c44bbac2 100644
--- a/src/components/date-range/date-range.test.tsx
+++ b/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();
diff --git a/src/components/date/date.test.tsx b/src/components/date/date.test.tsx
index 57ec9f15b8..c8715e0826 100644
--- a/src/components/date/date.test.tsx
+++ b/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 () => {
diff --git a/src/components/textarea/textarea.test.tsx b/src/components/textarea/textarea.test.tsx
index 32c22fbdbf..96bbcd46ec 100644
--- a/src/components/textarea/textarea.test.tsx
+++ b/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();
screen.getByRole("button").focus();
- expect(screen.getByRole("tooltip", { name: "bar" })).toBeVisible();
+ expect(await screen.findByRole("tooltip", { name: "bar" })).toBeVisible();
});
test.each(["info", "warning", "error"])(
diff --git a/src/components/textbox/textbox.test.tsx b/src/components/textbox/textbox.test.tsx
index 97d923552b..d25c2880be 100644
--- a/src/components/textbox/textbox.test.tsx
+++ b/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();
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();
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(
{
+ async (validationType) => {
render(
);
const input = screen.getByRole("textbox");
input.focus();
- expect(screen.getByRole("tooltip")).toHaveAttribute(
+ expect(await screen.findByRole("tooltip")).toHaveAttribute(
"id",
`${mockedGuid}-validation`
);
diff --git a/src/components/tooltip/tooltip.test.tsx b/src/components/tooltip/tooltip.test.tsx
index 81b7bf4029..5c0f748e2d 100644
--- a/src/components/tooltip/tooltip.test.tsx
+++ b/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(