Fix flakiness in unit test when using <Animated>

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/features/helm-charts/upgrade-chart/__snapshots__/upgrade-chart-new-tab.test.ts.snap

@@ -3116,60 +3116,6 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
       </div>
     </div>
   </div>
-  <ul
-    class="Animate opacity Menu MenuActions flex HelmReleaseMenu right bottom portal enter leave"
-    id="menu-actions-for-release-menu-for-my-second-namespace/some-name"
-    style="--enter-duration: 100ms; --leave-duration: 100ms;"
-  >
-    <li
-      class="MenuItem"
-      data-testid="upgrade-chart-menu-item-for-my-second-namespace/some-name"
-      tabindex="0"
-    >
-      <i
-        class="Icon material focusable"
-      >
-        <span
-          class="icon"
-          data-icon-name="refresh"
-        >
-          refresh
-        </span>
-      </i>
-      <div>
-        Upgrade
-      </div>
-      <span
-        class="title"
-      >
-        Upgrade
-      </span>
-    </li>
-    <li
-      class="MenuItem"
-      data-testid="menu-action-remove"
-      tabindex="0"
-    >
-      <i
-        class="Icon material focusable"
-      >
-        <span
-          class="icon"
-          data-icon-name="delete"
-        >
-          delete
-        </span>
-      </i>
-      <div>
-        Delete
-      </div>
-      <span
-        class="title"
-      >
-        Delete
-      </span>
-    </li>
-  </ul>
 </body>
 `;
 
@@ -4167,60 +4113,6 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
       </div>
     </div>
   </div>
-  <ul
-    class="Animate opacity Menu MenuActions flex HelmReleaseMenu bottom right portal enter leave"
-    id="menu-actions-for-release-menu-for-my-second-namespace/some-name"
-    style="--enter-duration: 100ms; --leave-duration: 100ms; left: 0px; top: 8px;"
-  >
-    <li
-      class="MenuItem"
-      data-testid="upgrade-chart-menu-item-for-my-second-namespace/some-name"
-      tabindex="0"
-    >
-      <i
-        class="Icon material focusable"
-      >
-        <span
-          class="icon"
-          data-icon-name="refresh"
-        >
-          refresh
-        </span>
-      </i>
-      <div>
-        Upgrade
-      </div>
-      <span
-        class="title"
-      >
-        Upgrade
-      </span>
-    </li>
-    <li
-      class="MenuItem"
-      data-testid="menu-action-remove"
-      tabindex="0"
-    >
-      <i
-        class="Icon material focusable"
-      >
-        <span
-          class="icon"
-          data-icon-name="delete"
-        >
-          delete
-        </span>
-      </i>
-      <div>
-        Delete
-      </div>
-      <span
-        class="title"
-      >
-        Delete
-      </span>
-    </li>
-  </ul>
 </body>
 `;
 
@@ -5220,60 +5112,6 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
       </div>
     </div>
   </div>
-  <ul
-    class="Animate opacity Menu MenuActions flex HelmReleaseMenu bottom right portal enter leave"
-    id="menu-actions-for-release-menu-for-my-second-namespace/some-name"
-    style="--enter-duration: 100ms; --leave-duration: 100ms; left: 0px; top: 8px;"
-  >
-    <li
-      class="MenuItem"
-      data-testid="upgrade-chart-menu-item-for-my-second-namespace/some-name"
-      tabindex="0"
-    >
-      <i
-        class="Icon material focusable"
-      >
-        <span
-          class="icon"
-          data-icon-name="refresh"
-        >
-          refresh
-        </span>
-      </i>
-      <div>
-        Upgrade
-      </div>
-      <span
-        class="title"
-      >
-        Upgrade
-      </span>
-    </li>
-    <li
-      class="MenuItem"
-      data-testid="menu-action-remove"
-      tabindex="0"
-    >
-      <i
-        class="Icon material focusable"
-      >
-        <span
-          class="icon"
-          data-icon-name="delete"
-        >
-          delete
-        </span>
-      </i>
-      <div>
-        Delete
-      </div>
-      <span
-        class="title"
-      >
-        Delete
-      </span>
-    </li>
-  </ul>
 </body>
 `;
 
@@ -6041,59 +5879,5 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
       </div>
     </div>
   </div>
-  <ul
-    class="Animate opacity Menu MenuActions flex HelmReleaseMenu bottom right portal enter leave"
-    id="menu-actions-for-release-menu-for-my-second-namespace/some-name"
-    style="--enter-duration: 100ms; --leave-duration: 100ms; left: 0px; top: 8px;"
-  >
-    <li
-      class="MenuItem"
-      data-testid="upgrade-chart-menu-item-for-my-second-namespace/some-name"
-      tabindex="0"
-    >
-      <i
-        class="Icon material focusable"
-      >
-        <span
-          class="icon"
-          data-icon-name="refresh"
-        >
-          refresh
-        </span>
-      </i>
-      <div>
-        Upgrade
-      </div>
-      <span
-        class="title"
-      >
-        Upgrade
-      </span>
-    </li>
-    <li
-      class="MenuItem"
-      data-testid="menu-action-remove"
-      tabindex="0"
-    >
-      <i
-        class="Icon material focusable"
-      >
-        <span
-          class="icon"
-          data-icon-name="delete"
-        >
-          delete
-        </span>
-      </i>
-      <div>
-        Delete
-      </div>
-      <span
-        class="title"
-      >
-        Delete
-      </span>
-    </li>
-  </ul>
 </body>
 `;

src/features/helm-charts/upgrade-chart/upgrade-chart-new-tab.test.ts

@@ -17,6 +17,7 @@ import type { RequestHelmReleaseConfiguration } from "../../../common/k8s-api/en
 import requestHelmReleaseConfigurationInjectable from "../../../common/k8s-api/endpoints/helm-releases.api/request-configuration.injectable";
 import type { RequestHelmReleases } from "../../../common/k8s-api/endpoints/helm-releases.api/request-releases.injectable";
 import requestHelmReleasesInjectable from "../../../common/k8s-api/endpoints/helm-releases.api/request-releases.injectable";
+import { advanceFakeTime, useFakeTime } from "../../../common/test-utils/use-fake-time";
 import dockStoreInjectable from "../../../renderer/components/dock/dock/store.injectable";
 import type { ApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
 import { getApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
@@ -50,6 +51,8 @@ describe("New Upgrade Helm Chart Dock Tab", () => {
       navigateToHelmReleases = windowDi.inject(navigateToHelmReleasesInjectable);
     });
 
+    useFakeTime("2020-01-12 12:00:00");
+
     builder.namespaces.add("my-first-namespace");
     builder.namespaces.add("my-second-namespace");
 
@@ -114,6 +117,7 @@ describe("New Upgrade Helm Chart Dock Tab", () => {
               const upgradeHelmChartMenuItem = renderResult.getByTestId("upgrade-chart-menu-item-for-my-second-namespace/some-name");
 
               upgradeHelmChartMenuItem.click();
+              advanceFakeTime(100);
             });
 
             it("renders", () => {

src/renderer/components/animate/animate.tsx

@@ -4,12 +4,12 @@
  */
 
 import "./animate.scss";
-import React from "react";
-import { observable, makeObservable } from "mobx";
-import { observer } from "mobx-react";
+import React, { useEffect, useState } from "react";
 import { cssNames, noop } from "../../utils";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import requestAnimationFrameInjectable from "./request-animation-frame.injectable";
+import defaultEnterDurationForAnimatedInjectable from "./default-enter-duration.injectable";
+import defaultLeaveDurationForAnimatedInjectable from "./default-leave-duration.injectable";
 
 export type AnimateName = "opacity" | "slide-right" | "opacity-scale" | string;
 
@@ -25,114 +25,92 @@ export interface AnimateProps {
 
 interface Dependencies {
   requestAnimationFrame: (callback: () => void) => void;
+  defaultEnterDuration: number;
+  defaultLeaveDuration: number;
 }
 
-@observer
-class DefaultedAnimate extends React.Component<AnimateProps & Dependencies & typeof DefaultedAnimate.defaultProps> {
-  static defaultProps = {
-    name: "opacity",
-    enter: true,
-    onEnter: noop,
-    onLeave: noop,
-    enterDuration: 100,
-    leaveDuration: 100,
+const NonInjectedAnimate = (propsAndDeps: AnimateProps & Dependencies) => {
+  const {
+    requestAnimationFrame,
+    defaultEnterDuration,
+    defaultLeaveDuration,
+    ...props
+  } = propsAndDeps;
+  const {
+    children,
+    enter = true,
+    enterDuration = defaultEnterDuration,
+    leaveDuration = defaultLeaveDuration,
+    name = "opacity",
+    onEnter: onEnterHandler = noop<[]>,
+    onLeave: onLeaveHandler = noop<[]>,
+  } = props;
+
+  const [isVisible, setIsVisible] = useState(enter);
+  const [showClassNameEnter, setShowClassNameEnter] = useState(false);
+  const [showClassNameLeave, setShowClassNameLeave] = useState(false);
+
+  const contentElem = React.Children.only(children) as React.ReactElement<React.HTMLAttributes<any>>;
+  const onEnter = () => {
+    setIsVisible(true);
+
+    requestAnimationFrame(() => {
+      setShowClassNameEnter(true);
+      onEnterHandler();
+    });
   };
+  const onLeave = () => {
+    if (isVisible) {
+      setShowClassNameLeave(true);
+      onLeaveHandler();
 
-  @observable isVisible = !!this.props.enter;
-  @observable statusClassName = {
-    enter: false,
-    leave: false,
+      // Cleanup after duration
+      setTimeout(() => {
+        setIsVisible(false);
+        setShowClassNameEnter(false);
+        setShowClassNameLeave(false);
+      }, leaveDuration);
+    }
   };
-
-  constructor(props: AnimateProps & Dependencies & typeof DefaultedAnimate.defaultProps) {
-    super(props);
-    makeObservable(this);
-  }
-
-  get contentElem() {
-    return React.Children.only(this.props.children) as React.ReactElement<React.HTMLAttributes<any>>;
-  }
-
-  private toggle(enter: boolean) {
-    if (enter) {
-      this.enter();
+  const toggle = (entering: boolean) => {
+    if (entering) {
+      onEnter();
     } else {
-      this.leave();
+      onLeave();
     }
+  };
+
+  useEffect(() => toggle(enter), [enter]);
+
+  if (!isVisible) {
+    return null;
   }
 
-  componentDidMount() {
-    this.toggle(this.props.enter);
-  }
+  const cssVarsForAnimation = {
+    "--enter-duration": `${enterDuration}ms`,
+    "--leave-duration": `${leaveDuration}ms`,
+  } as React.CSSProperties;
 
-  componentDidUpdate(prevProps: Readonly<AnimateProps>): void {
-    const { enter } = this.props;
-
-    if (prevProps.enter !== enter) {
-      this.toggle(enter);
-    }
-  }
-
-  enter() {
-    this.isVisible = true; // triggers render() to apply css-animation in existing dom
-
-    this.props.requestAnimationFrame(() => {
-      this.statusClassName.enter = true;
-      this.props.onEnter();
-    });
-  }
-
-  leave() {
-    if (!this.isVisible) return;
-    this.statusClassName.leave = true;
-    this.props.onLeave();
-    this.resetAfterLeaveDuration();
-  }
-
-  resetAfterLeaveDuration() {
-    setTimeout(() => this.reset(), this.props.leaveDuration);
-  }
-
-  reset() {
-    this.isVisible = false;
-    this.statusClassName.enter = false;
-    this.statusClassName.leave = false;
-  }
-
-  render() {
-    if (!this.isVisible) {
-      return null;
-    }
-
-    const { name, enterDuration, leaveDuration } = this.props;
-    const contentElem = this.contentElem;
-    const cssVarsForAnimation = {
-      "--enter-duration": `${enterDuration}ms`,
-      "--leave-duration": `${leaveDuration}ms`,
-    } as React.CSSProperties;
-
-    return React.cloneElement(contentElem, {
-      className: cssNames("Animate", name, contentElem.props.className, this.statusClassName),
-      children: contentElem.props.children,
-      style: {
-        ...contentElem.props.style,
-        ...cssVarsForAnimation,
-      },
-    });
-  }
-}
-
-export const NonInjectedAnimate = (props: AnimateProps & Dependencies) => <DefaultedAnimate {...props} />;
-
-export const Animate = withInjectables<Dependencies, AnimateProps>(
-  NonInjectedAnimate,
-
-  {
-    getProps: (di, props) => ({
-      requestAnimationFrame: di.inject(requestAnimationFrameInjectable),
-      ...props,
+  return React.cloneElement(contentElem, {
+    className: cssNames("Animate", name, contentElem.props.className, {
+      enter: showClassNameEnter,
+      leave: showClassNameLeave,
     }),
-  },
-);
+    children: contentElem.props.children,
+    style: {
+      ...contentElem.props.style,
+      ...cssVarsForAnimation,
+    },
+  });
+};
+
+export const Animate = withInjectables<Dependencies, AnimateProps>(NonInjectedAnimate, {
+  getProps: (di, props) => ({
+    ...props,
+    requestAnimationFrame: di.inject(requestAnimationFrameInjectable),
+    defaultEnterDuration: di.inject(defaultEnterDurationForAnimatedInjectable),
+    defaultLeaveDuration: di.inject(defaultLeaveDurationForAnimatedInjectable),
+  }),
+});
 
 

src/renderer/components/animate/default-enter-duration.injectable.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+
+const defaultEnterDurationForAnimatedInjectable = getInjectable({
+  id: "default-enter-duration-for-animated",
+  instantiate: () => 100,
+});
+
+export default defaultEnterDurationForAnimatedInjectable;

src/renderer/components/animate/default-leave-duration.injectable.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+
+const defaultLeaveDurationForAnimatedInjectable = getInjectable({
+  id: "default-leave-duration-for-animated",
+  instantiate: () => 100,
+});
+
+export default defaultLeaveDurationForAnimatedInjectable;

src/renderer/components/animate/request-animation-frame.injectable.ts

@@ -4,9 +4,12 @@
  */
 import { getInjectable } from "@ogre-tools/injectable";
 
+export type RequestAnimationFrame = (callback: () => void) => void;
+
 const requestAnimationFrameInjectable = getInjectable({
   id: "request-animation-frame",
-  instantiate: () => (callback: () => void) => requestAnimationFrame(callback),
+  // NOTE: this cannot be simplified to just `=> requestAnimationFrame` else an Illegal Invocation error will be thrown
+  instantiate: (): RequestAnimationFrame => (callback) => requestAnimationFrame(callback),
   causesSideEffects: true,
 });
 

src/renderer/components/menu/menu.tsx

@@ -13,9 +13,15 @@ import { Animate } from "../animate";
 import type { IconProps } from "../icon";
 import { Icon } from "../icon";
 import isEqual from "lodash/isEqual";
+import type { RequestAnimationFrame } from "../animate/request-animation-frame.injectable";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import requestAnimationFrameInjectable from "../animate/request-animation-frame.injectable";
 
 export const MenuContext = React.createContext<MenuContextValue | null>(null);
-export type MenuContextValue = Menu;
+export interface MenuContextValue {
+  readonly props: Readonly<MenuProps>;
+  close: () => void;
+}
 
 export interface MenuPosition {
   left?: boolean;
@@ -62,10 +68,14 @@ const defaultPropsMenu: Partial<MenuProps> = {
   animated: true,
 };
 
-export class Menu extends React.Component<MenuProps, State> {
+interface Dependencies {
+  requestAnimationFrame: RequestAnimationFrame;
+}
+
+class NonInjectedMenu extends React.Component<MenuProps & Dependencies, State> {
   static defaultProps = defaultPropsMenu as object;
 
-  constructor(props: MenuProps) {
+  constructor(props: MenuProps & Dependencies) {
     super(props);
     autoBind(this);
   }
@@ -372,6 +382,13 @@ export class Menu extends React.Component<MenuProps, State> {
   }
 }
 
+export const Menu = withInjectables<Dependencies, MenuProps>(NonInjectedMenu, {
+  getProps: (di, props) => ({
+    ...props,
+    requestAnimationFrame: di.inject(requestAnimationFrameInjectable),
+  }),
+});
+
 export function SubMenu(props: Partial<MenuProps>) {
   const { className, ...menuProps } = props;