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

Fix and add behavioural tests for RenderDelay

Browse Source 
Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2022-08-24 16:08:35 -04:00
parent 9b23595d6b
commit 12c709d14b
4 changed files with 150 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/renderer/components/render-delay/__tests__/__snapshots__/render-delay.test.tsx.snap Normal file
View File

@ -0,0 +1,37 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<RenderDelay/> when rendered with placeholder renders 1`] = `
<body>
<div>
<div
data-testid="placeholder"
/>
</div>
</body>
`;
exports[`<RenderDelay/> when rendered with placeholder when the idle callback is called renders 1`] = `
<body>
<div>
<div
data-testid="child"
/>
</div>
</body>
`;
exports[`<RenderDelay/> when rendered without placeholder renders 1`] = `
<body>
<div />
</body>
`;
exports[`<RenderDelay/> when rendered without placeholder when the idle callback is called renders 1`] = `
<body>
<div>
<div
data-testid="child"
/>
</div>
</body>
`;

102
src/renderer/components/render-delay/__tests__/render-delay.test.tsx
View File

@ -3,20 +3,106 @@
* Licensed under MIT License. See LICENSE in root directory for more information. * Licensed under MIT License. See LICENSE in root directory for more information.
*/ */
import React from "react"; import React from "react";
import "@testing-library/jest-dom/extend-expect";
import { render } from "@testing-library/react";
import { RenderDelay } from "../render-delay"; import { RenderDelay } from "../render-delay";
import type { DiRender } from "../../test-utils/renderFor";
import { renderFor } from "../../test-utils/renderFor";
import { getDiForUnitTesting } from "../../../getDiForUnitTesting";
import { advanceFakeTime, useFakeTime } from "../../../../common/test-utils/use-fake-time";
import cancelIdleCallbackInjectable from "../cancel-idle-callback.injectable";
import requestIdleCallbackInjectable from "../request-idle-callback.injectable";
import type { RenderResult } from "@testing-library/react";
import idleCallbackTimeoutInjectable from "../idle-callback-timeout.injectable";
describe("<RenderDelay/>", () => { describe("<RenderDelay/>", () => {
it("renders w/o errors", () => { let render: DiRender;
const { container } = render(<RenderDelay><button>My button</button></RenderDelay>);
expect(container).toBeInstanceOf(HTMLElement); beforeEach(() => {
const di = getDiForUnitTesting({ doGeneralOverrides: true });
render = renderFor(di);
useFakeTime("2020-01-17 12:18:19");
di.override(cancelIdleCallbackInjectable, () => clearTimeout);
di.override(requestIdleCallbackInjectable, () => (callback, opts) => setTimeout(callback, opts.timeout) as any);
di.override(idleCallbackTimeoutInjectable, () => 5);
}); });
it("renders it's child", () => { describe("when rendered without placeholder", () => {
const { getByText } = render(<RenderDelay><button>My button</button></RenderDelay>); let result: RenderResult;
expect(getByText("My button")).toBeInTheDocument(); beforeEach(() => {
result = render((
<RenderDelay>
<div data-testid="child" />
</RenderDelay>
));
});
it("renders", () => {
expect(result.baseElement).toMatchSnapshot();
});
it("does not show the children yet", () => {
expect(result.queryByTestId("child")).not.toBeInTheDocument();
});
describe("when the idle callback is called", () => {
beforeEach(() => {
advanceFakeTime(5);
});
it("renders", () => {
expect(result.baseElement).toMatchSnapshot();
});
it("shows the children", () => {
expect(result.queryByTestId("child")).toBeInTheDocument();
});
});
});
describe("when rendered with placeholder", () => {
let result: RenderResult;
beforeEach(() => {
result = render((
<RenderDelay
placeholder={<div data-testid="placeholder"></div>}
>
<div data-testid="child" />
</RenderDelay>
));
});
it("renders", () => {
expect(result.baseElement).toMatchSnapshot();
});
it("does not show the children yet", () => {
expect(result.queryByTestId("child")).not.toBeInTheDocument();
});
it("shows the placeholder", () => {
expect(result.queryByTestId("placeholder")).toBeInTheDocument();
});
describe("when the idle callback is called", () => {
beforeEach(() => {
advanceFakeTime(5);
});
it("renders", () => {
expect(result.baseElement).toMatchSnapshot();
});
it("shows the children", () => {
expect(result.queryByTestId("child")).toBeInTheDocument();
});
it("does not show the placeholder", () => {
expect(result.queryByTestId("placeholder")).not.toBeInTheDocument();
});
});
}); });
}); });

12
src/renderer/components/render-delay/idle-callback-timeout.injectable.ts Normal file
View File

@ -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 idleCallbackTimeoutInjectable = getInjectable({
id: "idle-callback-timeout",
instantiate: () => 1000,
});
export default idleCallbackTimeoutInjectable;

10
src/renderer/components/render-delay/render-delay.tsx
View File

@ -10,6 +10,7 @@ import type { CancelIdleCallback } from "./cancel-idle-callback.injectable";
import { withInjectables } from "@ogre-tools/injectable-react"; import { withInjectables } from "@ogre-tools/injectable-react";
import cancelIdleCallbackInjectable from "./cancel-idle-callback.injectable"; import cancelIdleCallbackInjectable from "./cancel-idle-callback.injectable";
import requestIdleCallbackInjectable from "./request-idle-callback.injectable"; import requestIdleCallbackInjectable from "./request-idle-callback.injectable";
import idleCallbackTimeoutInjectable from "./idle-callback-timeout.injectable";
export interface RenderDelayProps { export interface RenderDelayProps {
placeholder?: React.ReactNode; placeholder?: React.ReactNode;
@ -19,6 +20,7 @@ export interface RenderDelayProps {
interface Dependencies { interface Dependencies {
requestIdleCallback: RequestIdleCallback; requestIdleCallback: RequestIdleCallback;
cancelIdleCallback: CancelIdleCallback; cancelIdleCallback: CancelIdleCallback;
idleCallbackTimeout: number;
} }
const NonInjectedRenderDelay = (props: RenderDelayProps & Dependencies) => { const NonInjectedRenderDelay = (props: RenderDelayProps & Dependencies) => {
@ -27,11 +29,12 @@ const NonInjectedRenderDelay = (props: RenderDelayProps & Dependencies) => {
requestIdleCallback, requestIdleCallback,
children, children,
placeholder, placeholder,
idleCallbackTimeout,
} = props; } = props;
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
useEffect(() => { useEffect(() => {
const handle = requestIdleCallback(() => setIsVisible(true), { timeout: 1000 }); const handle = requestIdleCallback(() => setIsVisible(true), { timeout: idleCallbackTimeout });
return () => cancelIdleCallback(handle); return () => cancelIdleCallback(handle);
}, []); }, []);
@ -40,8 +43,8 @@ const NonInjectedRenderDelay = (props: RenderDelayProps & Dependencies) => {
<> <>
{ {
isVisible isVisible
? placeholder ?? null ? children
: children : placeholder
} }
</> </>
); );
@ -52,5 +55,6 @@ export const RenderDelay = withInjectables<Dependencies, RenderDelayProps>(NonIn
...props, ...props,
cancelIdleCallback: di.inject(cancelIdleCallbackInjectable), cancelIdleCallback: di.inject(cancelIdleCallbackInjectable),
requestIdleCallback: di.inject(requestIdleCallbackInjectable), requestIdleCallback: di.inject(requestIdleCallbackInjectable),
idleCallbackTimeout: di.inject(idleCallbackTimeoutInjectable),
}), }),
}); });