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

Add some tests

Browse Source 
Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2022-06-15 09:46:21 -04:00
parent 9a42523a24
commit 95d2fb288b
4 changed files with 179 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

14
src/renderer/components/drawer/drawer-param-toggler.scss → src/renderer/components/drawer/drawer-param-toggler.module.scss
View File

@ -4,24 +4,20 @@
*/ */
.DrawerParamToggler { .DrawerParamToggler {
.param-label { .label {
flex-grow: 2 flex-grow: 2
} }
.param-link { .link {
cursor: pointer; cursor: pointer;
.param-link-text { .linkText {
color: var(--blue); color: var(--blue);
text-decoration: underline; text-decoration: underline;
} }
} }
.param-content { .content {
&.open { display: block;
display: block;
}
display: none;
} }
} }

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

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

@ -3,10 +3,9 @@
* 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 "./drawer-param-toggler.scss"; import * as styles from "./drawer-param-toggler.module.scss";
import React from "react"; import React from "react";
import { Icon } from "../icon"; import { Icon } from "../icon";
import { cssNames } from "../../utils";
export interface DrawerParamTogglerProps { export interface DrawerParamTogglerProps {
label: string | number; label: string | number;
@ -30,16 +29,20 @@ export class DrawerParamToggler extends React.Component<DrawerParamTogglerProps,
const link = open ? `Hide` : `Show`; const link = open ? `Hide` : `Show`;
return ( return (
<div className="DrawerParamToggler"> <div className={styles.DrawerParamToggler}>
<div className="flex gaps align-center params"> <div className="flex gaps align-center params">
<div className="param-label">{label}</div> <div className={styles.label}>{label}</div>
<div className="param-link" onClick={this.toggle}> <div
<span className="param-link-text">{link}</span> className={styles.link}
onClick={this.toggle}
data-testid="drawer-param-toggler"
>
<span className={styles.linkText}>{link}</span>
<Icon material={icon}/> <Icon material={icon}/>
</div> </div>
</div> </div>
{open && ( {open && (
<div className={cssNames("param-content", { open })}> <div className={styles.content}>
{children} {children}
</div> </div>
)} )}