Make Animate deterministic in unit tests

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

src/behaviours/application-update/__snapshots__/installing-update-using-tray.test.ts.snap

@@ -17,7 +17,7 @@ exports[`installing update using tray when started when user checks for updates
       class="Notifications flex column align-flex-end"
     >
       <div
-        class="Animate opacity notification flex info"
+        class="Animate opacity notification flex info enter"
         style="--enter-duration: 100ms; --leave-duration: 100ms;"
       >
         <div
@@ -239,7 +239,7 @@ exports[`installing update using tray when started when user checks for updates
         </div>
       </div>
       <div
-        class="Animate opacity notification flex info"
+        class="Animate opacity notification flex info enter"
         style="--enter-duration: 100ms; --leave-duration: 100ms;"
       >
         <div
@@ -370,7 +370,7 @@ exports[`installing update using tray when started when user checks for updates
         </div>
       </div>
       <div
-        class="Animate opacity notification flex info"
+        class="Animate opacity notification flex info enter"
         style="--enter-duration: 100ms; --leave-duration: 100ms;"
       >
         <div
@@ -451,7 +451,7 @@ exports[`installing update using tray when started when user checks for updates
       class="Notifications flex column align-flex-end"
     >
       <div
-        class="Animate opacity notification flex info"
+        class="Animate opacity notification flex info enter"
         style="--enter-duration: 100ms; --leave-duration: 100ms;"
       >
         <div
@@ -491,7 +491,7 @@ exports[`installing update using tray when started when user checks for updates
         </div>
       </div>
       <div
-        class="Animate opacity notification flex info"
+        class="Animate opacity notification flex info enter"
         style="--enter-duration: 100ms; --leave-duration: 100ms;"
       >
         <div

src/main/ask-boolean/__snapshots__/ask-boolean.test.ts.snap

@@ -7,7 +7,7 @@ exports[`ask-boolean given started when asking multiple questions renders 1`] =
       class="Notifications flex column align-flex-end"
     >
       <div
-        class="Animate opacity notification flex info"
+        class="Animate opacity notification flex info enter"
         style="--enter-duration: 100ms; --leave-duration: 100ms;"
       >
         <div
@@ -75,7 +75,7 @@ exports[`ask-boolean given started when asking multiple questions renders 1`] =
         </div>
       </div>
       <div
-        class="Animate opacity notification flex info"
+        class="Animate opacity notification flex info enter"
         style="--enter-duration: 100ms; --leave-duration: 100ms;"
       >
         <div
@@ -154,7 +154,7 @@ exports[`ask-boolean given started when asking multiple questions when answering
       class="Notifications flex column align-flex-end"
     >
       <div
-        class="Animate opacity notification flex info"
+        class="Animate opacity notification flex info enter"
         style="--enter-duration: 100ms; --leave-duration: 100ms;"
       >
         <div
@@ -233,7 +233,7 @@ exports[`ask-boolean given started when asking question renders 1`] = `
       class="Notifications flex column align-flex-end"
     >
       <div
-        class="Animate opacity notification flex info"
+        class="Animate opacity notification flex info enter"
         style="--enter-duration: 100ms; --leave-duration: 100ms;"
       >
         <div

src/renderer/components/animate/animate.tsx

@@ -8,6 +8,8 @@ import React from "react";
 import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { cssNames, noop } from "../../utils";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import requestAnimationFrameInjectable from "./request-animation-frame.injectable";
 
 export type AnimateName = "opacity" | "slide-right" | "opacity-scale" | string;
 
@@ -21,8 +23,12 @@ export interface AnimateProps {
   children?: React.ReactNode;
 }
 
+interface Dependencies {
+  requestAnimationFrame: (callback: () => void) => void;
+}
+
 @observer
-class DefaultedAnimate extends React.Component<AnimateProps & typeof DefaultedAnimate.defaultProps> {
+class DefaultedAnimate extends React.Component<AnimateProps & Dependencies & typeof DefaultedAnimate.defaultProps> {
   static defaultProps = {
     name: "opacity",
     enter: true,
@@ -38,7 +44,7 @@ class DefaultedAnimate extends React.Component<AnimateProps & typeof DefaultedAn
     leave: false,
   };
 
-  constructor(props: AnimateProps & typeof DefaultedAnimate.defaultProps) {
+  constructor(props: AnimateProps & Dependencies & typeof DefaultedAnimate.defaultProps) {
     super(props);
     makeObservable(this);
   }
@@ -69,7 +75,8 @@ class DefaultedAnimate extends React.Component<AnimateProps & typeof DefaultedAn
 
   enter() {
     this.isVisible = true; // triggers render() to apply css-animation in existing dom
-    requestAnimationFrame(() => {
+
+    this.props.requestAnimationFrame(() => {
       this.statusClassName.enter = true;
       this.props.onEnter();
     });
@@ -115,4 +122,17 @@ class DefaultedAnimate extends React.Component<AnimateProps & typeof DefaultedAn
   }
 }
 
-export const Animate = (props: AnimateProps) => <DefaultedAnimate {...props} />;
+export const NonInjectedAnimate = (props: AnimateProps & Dependencies) => <DefaultedAnimate {...props} />;
+
+export const Animate = withInjectables<Dependencies, AnimateProps>(
+  NonInjectedAnimate,
+
+  {
+    getProps: (di, props) => ({
+      requestAnimationFrame: di.inject(requestAnimationFrameInjectable),
+      ...props,
+    }),
+  },
+);
+
+

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

@@ -0,0 +1,13 @@
+/**
+ * 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 requestAnimationFrameInjectable = getInjectable({
+  id: "request-animation-frame",
+  instantiate: () => (callback: () => void) => requestAnimationFrame(callback),
+  causesSideEffects: true,
+});
+
+export default requestAnimationFrameInjectable;

src/renderer/components/update-button/__tests__/update-button.test.tsx

@@ -3,15 +3,25 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import { render, act } from "@testing-library/react";
+import { act } from "@testing-library/react";
 import React from "react";
 import { UpdateButton } from "../update-button";
 import "@testing-library/jest-dom/extend-expect";
+import { getDiForUnitTesting } from "../../../getDiForUnitTesting";
+import type { DiRender } from "../../test-utils/renderFor";
+import { renderFor } from "../../test-utils/renderFor";
 
 const update = jest.fn();
 
 describe("<UpdateButton/>", () => {
+  let render: DiRender;
+
   beforeEach(() => {
+
+    const di = getDiForUnitTesting({ doGeneralOverrides: true });
+
+    render = renderFor(di);
+
     update.mockClear();
   });
 

src/renderer/getDiForUnitTesting.tsx

@@ -44,6 +44,7 @@ import { observable } from "mobx";
 import defaultShellInjectable from "./components/+preferences/default-shell.injectable";
 import appVersionInjectable from "../common/get-configuration-file-model/app-version/app-version.injectable";
 import provideInitialValuesForSyncBoxesInjectable from "./sync-box/provide-initial-values-for-sync-boxes.injectable";
+import requestAnimationFrameInjectable from "./components/animate/request-animation-frame.injectable";
 
 export const getDiForUnitTesting = (opts: GetDiForUnitTestingOptions = {}) => {
   const {
@@ -80,6 +81,8 @@ export const getDiForUnitTesting = (opts: GetDiForUnitTestingOptions = {}) => {
 
     di.override(historyInjectable, () => createMemoryHistory());
 
+    di.override(requestAnimationFrameInjectable, () => (callback) => callback());
+
     di.override(lensResourcesDirInjectable, () => "/irrelevant");
 
     di.override(ipcRendererInjectable, () => ({