hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Make Animate deterministic in unit tests

Browse Source 
Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
This commit is contained in:
Janne Savolainen 2022-05-20 15:38:27 +03:00
parent 27fbaa1a0c
commit d677a1bf81
No known key found for this signature in database
GPG Key ID: 8C6CFB2FFFE8F68A
6 changed files with 60 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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

8
src/main/ask-boolean/__snapshots__/ask-boolean.test.ts.snap
View File

@ -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

28
src/renderer/components/animate/animate.tsx
View File

@ -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,
}),
},
);

13
src/renderer/components/animate/request-animation-frame.injectable.ts Normal file
View File

@ -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;

12
src/renderer/components/update-button/__tests__/update-button.test.tsx
View File

@ -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();
});

3
src/renderer/getDiForUnitTesting.tsx
View File

@ -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, () => ({