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 CPU spike when opening PodDetails from MonacoEditor (#5642)

Browse Source 
(cherry picked from commit 95ed0dda1b)
This commit is contained in:
Sebastian Malton 2022-08-02 09:41:23 -07:00 committed by Janne Savolainen
parent d18bf11410
commit 76d707d257
No known key found for this signature in database
GPG Key ID: 8C6CFB2FFFE8F68A
3 changed files with 199 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
src/renderer/components/drawer/__snapshots__/drawer-param-toggler.test.tsx.snap Normal file
View File

@ -0,0 +1,134 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<DrawerParamToggler /> after clicking the toggle after clicking the toggle again renders 1`] = `
<body>
<div>
<div
class="DrawerParamToggler"
>
<div
class="flex gaps align-center params"
>
<div
class="param-label"
>
Foo
</div>
<div
class="param-link"
data-testid="drawer-param-toggler"
>
<span
class="param-link-text"
>
Show
</span>
<i
class="Icon material focusable"
>
<span
class="icon"
data-icon-name="arrow_drop_down"
>
arrow_drop_down
</span>
</i>
</div>
</div>
<div
class="param-content"
/>
</div>
</div>
</body>
`;
exports[`<DrawerParamToggler /> after clicking the toggle renders 1`] = `
<body>
<div>
<div
class="DrawerParamToggler"
>
<div
class="flex gaps align-center params"
>
<div
class="param-label"
>
Foo
</div>
<div
class="param-link"
data-testid="drawer-param-toggler"
>
<span
class="param-link-text"
>
Hide
</span>
<i
class="Icon material focusable"
>
<span
class="icon"
data-icon-name="arrow_drop_up"
>
arrow_drop_up
</span>
</i>
</div>
</div>
<div
class="param-content open"
>
<div
data-testid="drawer-child"
/>
</div>
</div>
</div>
</body>
`;
exports[`<DrawerParamToggler /> renders 1`] = `
<body>
<div>
<div
class="DrawerParamToggler"
>
<div
class="flex gaps align-center params"
>
<div
class="param-label"
>
Foo
</div>
<div
class="param-link"
data-testid="drawer-param-toggler"
>
<span
class="param-link-text"
>
Show
</span>
<i
class="Icon material focusable"
>
<span
class="icon"
data-icon-name="arrow_drop_down"
>
arrow_drop_down
</span>
</i>
</div>
</div>
<div
class="param-content"
/>
</div>
</div>
</body>
`;

59
src/renderer/components/drawer/drawer-param-toggler.test.tsx Normal file
View File

@ -0,0 +1,59 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import { render } from "@testing-library/react";
import React from "react";
import { DrawerParamToggler } from "./drawer-param-toggler";
describe("<DrawerParamToggler />", () => {
let result: RenderResult;
beforeEach(() => {
result = render((
<DrawerParamToggler
label="Foo"
>
<div data-testid="drawer-child"></div>
</DrawerParamToggler>
));
});
it("renders", () => {
expect(result.baseElement).toMatchSnapshot();
});
it("does not render children by default", () => {
expect(result.queryByTestId("drawer-child")).toBeNull();
});
describe("after clicking the toggle", () => {
beforeEach(() => {
result.getByTestId("drawer-param-toggler").click();
});
it("renders", () => {
expect(result.baseElement).toMatchSnapshot();
});
it("renders children", () => {
expect(result.queryByTestId("drawer-child")).not.toBeNull();
});
describe("after clicking the toggle again", () => {
beforeEach(() => {
result.getByTestId("drawer-param-toggler").click();
});
it("renders", () => {
expect(result.baseElement).toMatchSnapshot();
});
it("does not children", () => {
expect(result.queryByTestId("drawer-child")).toBeNull();
});
});
});
});

8
src/renderer/components/drawer/drawer-param-toggler.tsx
View File

@ -33,13 +33,17 @@ export class DrawerParamToggler extends React.Component<DrawerParamTogglerProps,
<div className="DrawerParamToggler"> <div className="DrawerParamToggler">
<div className="flex gaps align-center params"> <div className="flex gaps align-center params">
<div className="param-label">{label}</div> <div className="param-label">{label}</div>
<div className="param-link" onClick={this.toggle}> <div
className="param-link"
onClick={this.toggle}
data-testid="drawer-param-toggler"
>
<span className="param-link-text">{link}</span> <span className="param-link-text">{link}</span>
<Icon material={icon}/> <Icon material={icon}/>
</div> </div>
</div> </div>
<div className={cssNames("param-content", { open })}> <div className={cssNames("param-content", { open })}>
{children} {open && children}
</div> </div>
</div> </div>
); );