Cleanup uses and overrides of requestAnimationFrame

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

src/features/terminal/opening-terminal-tab.test.tsx

@@ -27,12 +27,6 @@ describe("test for opening terminal tab within cluster frame", () => {
 
   setupInitializingApplicationBuilder(b => builder = b);
 
-  beforeAll(() => {
-    jest.spyOn(window, "requestAnimationFrame").mockImplementation(function IAmAMockRequestAnimationFrame(cb) {
-      return window.setTimeout(() => cb(Date.now()));
-    });
-  });
-
   beforeEach(async () => {
     builder.mainDi.override(createKubeconfigManagerInjectable, () => (cluster) => {
       return {

src/jest.setup.ts

@@ -74,6 +74,13 @@ Object.defineProperty(window, "matchMedia", {
   })),
 });
 
+/**
+ * This is needed for getting XTermJs to work in tests
+ */
+jest.spyOn(window, "requestAnimationFrame").mockImplementation(function (cb) {
+  return window.setTimeout(() => cb(Date.now()));
+});
+
 const getInjectables = (environment: "renderer" | "main", filePathGlob: string) => [
   ...glob.sync(`./{common,extensions,${environment}}/**/${filePathGlob}`, {
     cwd: __dirname,

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

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { getGlobalOverride } from "../../../common/test-utils/get-global-override";
+import requestAnimationFrameInjectable from "./request-animation-frame.injectable";
+
+export default getGlobalOverride(requestAnimationFrameInjectable, () => (cb) => window.setTimeout(() => cb()));

src/renderer/components/tooltip/tooltip.test.tsx

@@ -10,23 +10,6 @@ import React from "react";
 import { Tooltip } from "./tooltip";
 
 describe("<Tooltip />", () => {
-  let requestAnimationFrameSpy: jest.SpyInstance<number, [callback: FrameRequestCallback]>;
-
-  beforeEach(() => {
-    requestAnimationFrameSpy = jest.spyOn(window, "requestAnimationFrame");
-
-    requestAnimationFrameSpy.mockImplementation(cb => {
-      cb(0);
-
-      return 0;
-    });
-  });
-
-  afterEach(() => {
-    requestAnimationFrameSpy.mockRestore();
-  });
-
-
   it("does not render to DOM if not visibile", () => {
     const result = render((
       <>

src/renderer/components/tooltip/tooltip.tsx

@@ -11,6 +11,9 @@ import { observer } from "mobx-react";
 import type { IClassName } from "../../utils";
 import { cssNames, autoBind } from "../../utils";
 import { observable, makeObservable, action } from "mobx";
+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 enum TooltipPosition {
   TOP = "top",
@@ -49,8 +52,12 @@ const defaultProps: Partial<TooltipProps> = {
   offset: 10,
 };
 
+interface Dependencies {
+  requestAnimationFrame: RequestAnimationFrame;
+}
+
 @observer
-export class Tooltip extends React.Component<TooltipProps> {
+class NonInjectedTooltip extends React.Component<TooltipProps & Dependencies> {
   static defaultProps = defaultProps as object;
 
   @observable.ref elem: HTMLDivElement | null = null;
@@ -58,7 +65,7 @@ export class Tooltip extends React.Component<TooltipProps> {
   @observable isVisible = false;
   @observable isContentVisible = false; // animation manager
 
-  constructor(props: TooltipProps) {
+  constructor(props: TooltipProps & Dependencies) {
     super(props);
     makeObservable(this);
     autoBind(this);
@@ -94,7 +101,7 @@ export class Tooltip extends React.Component<TooltipProps> {
   @action
   protected onEnterTarget() {
     this.isVisible = true;
-    requestAnimationFrame(action(() => this.isContentVisible = true));
+    this.props.requestAnimationFrame(action(() => this.isContentVisible = true));
   }
 
   @action
@@ -240,3 +247,10 @@ export class Tooltip extends React.Component<TooltipProps> {
     return tooltip;
   }
 }
+
+export const Tooltip = withInjectables<Dependencies, TooltipProps>(NonInjectedTooltip, {
+  getProps: (di, props) => ({
+    ...props,
+    requestAnimationFrame: di.inject(requestAnimationFrameInjectable),
+  }),
+});

src/renderer/getDiForUnitTesting.tsx

@@ -11,7 +11,6 @@ import requestFromChannelInjectable from "./utils/channel/request-from-channel.i
 import { getOverrideFsWithFakes } from "../test-utils/override-fs-with-fakes";
 import hostedClusterIdInjectable from "./cluster-frame-context/hosted-cluster-id.injectable";
 import { runInAction } from "mobx";
-import requestAnimationFrameInjectable from "./components/animate/request-animation-frame.injectable";
 import { registerMobX } from "@ogre-tools/injectable-extension-for-mobx";
 import legacyOnChannelListenInjectable from "./ipc/legacy-channel-listen.injectable";
 import type { GlobalOverride } from "../common/test-utils/get-global-override";
@@ -62,8 +61,6 @@ export const getDiForUnitTesting = (
 
     di.override(legacyOnChannelListenInjectable, () => () => noop);
 
-    di.override(requestAnimationFrameInjectable, () => (callback) => callback());
-
     di.override(requestFromChannelInjectable, () => () => Promise.resolve(undefined as never));
 
     getOverrideFsWithFakes()(di);