AP-1335 Fix animations not being disabled by SpaceKitProvider

src/AbstractTooltip/index.tsx

@@ -32,14 +32,17 @@ export const AbstractTooltip: React.FC<Props> = ({
   hideOnClick,
   ...props
 }) => {
-  const { disableAnimations } = useSpaceKitProvider();
+  const {
+    disableAnimations: disableAnimationsFromProvider,
+  } = useSpaceKitProvider();
+  const disableAnimations =
+    disableAnimationsFromProvider || forceVisibleForTestingOnly;
 
-  // TODO: Change cursor to
   return (
     <>
       <TippyStyles />
       <Tippy
-        animation={!disableAnimations ? "shift-away" : undefined}
+        animation="shift-away"
         arrow={false}
         hideOnClick={forceVisibleForTestingOnly ? false : hideOnClick}
         trigger={forceVisibleForTestingOnly ? "manual" : trigger}
@@ -49,6 +52,8 @@ export const AbstractTooltip: React.FC<Props> = ({
         className={classnames(className, {
           "space-kit-relaxed": padding === "relaxed",
         })}
+        duration={disableAnimations ? 0 : props.duration}
+        updateDuration={disableAnimations ? 0 : props.updateDuration}
       >
         {children}
       </Tippy>

src/ConfirmationTooltip/ConfirmationTooltip.spec.tsx

@@ -14,7 +14,25 @@ test("when child element is clicked, the tooltip is shown", () => {
   const tooltipContent = faker.lorem.word();
   const interactiveElementText = faker.lorem.word();
 
-  const { container, getByText, queryByText } = render(
+  const { getByText, queryByText } = render(
+    <SpaceKitProvider disableAnimations>
+      <ConfirmationTooltip content={tooltipContent}>
+        <span>{interactiveElementText}</span>
+      </ConfirmationTooltip>
+    </SpaceKitProvider>
+  );
+
+  expect(queryByText(tooltipContent)).not.toBeInTheDocument();
+  userEvent.click(getByText(interactiveElementText));
+  getByText(tooltipContent);
+});
+
+test("when a tooltip is shown, it is removed after a delay", () => {
+  jest.useFakeTimers();
+  const tooltipContent = faker.lorem.word();
+  const interactiveElementText = faker.lorem.word();
+
+  const { getByText, queryByText } = render(
     <SpaceKitProvider disableAnimations>
       <ConfirmationTooltip content={tooltipContent}>
         <span>{interactiveElementText}</span>
@@ -27,7 +45,5 @@ test("when child element is clicked, the tooltip is shown", () => {
   getByText(tooltipContent);
   jest.runTimersToTime(5000);
 
-  expect(
-    container.closest("body")!.querySelector(".tippy-popper")
-  ).not.toBeVisible();
+  expect(queryByText(tooltipContent)).not.toBeInTheDocument();
 });