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

Implement first meaningful unit tests for a complete behavior

Browse Source 
Note: in this case, the behavior is even asynchronous, and thus a tool "asyncFn" is used to keep the test as simple as possible.

Co-authored-by: Janne Savolainen <janne.savolainen@live.fi>
Signed-off-by: Mikko Aspiala <mikko.aspiala@gmail.com>
This commit is contained in:
Mikko Aspiala 2021-11-05 10:56:05 +02:00 committed by Janne Savolainen
parent 90ec6809d7
commit 78a989a72a
8 changed files with 235 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -260,6 +260,7 @@
"ws": "^7.5.5" "ws": "^7.5.5"
}, },
"devDependencies": { "devDependencies": {
"@async-fn/jest": "^1.4.2",
"@material-ui/core": "^4.12.3", "@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2", "@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.60", "@material-ui/lab": "^4.0.0-alpha.60",

2
src/renderer/components/confirm-dialog/confirm-dialog.tsx
View File

@ -140,6 +140,7 @@ export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
isOpen={dialogState.isOpen} isOpen={dialogState.isOpen}
onClose={this.onClose} onClose={this.onClose}
close={this.close} close={this.close}
{...(dialogState.isOpen ? { "data-testid":"confirmation-dialog" } : {})}
> >
<div className="confirm-content"> <div className="confirm-content">
{icon} {message} {icon} {message}
@ -158,6 +159,7 @@ export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
label={labelOk} label={labelOk}
onClick={prevDefault(this.ok)} onClick={prevDefault(this.ok)}
waiting={this.isSaving} waiting={this.isSaving}
data-testid="confirm"
{...okButtonProps} {...okButtonProps}
/> />
</div> </div>

4
src/renderer/components/dialog/dialog.tsx
View File

@ -41,6 +41,7 @@ export interface DialogProps {
modal?: boolean; modal?: boolean;
pinned?: boolean; pinned?: boolean;
animated?: boolean; animated?: boolean;
"data-testid"?: string;
} }
interface DialogState { interface DialogState {
@ -149,7 +150,7 @@ export class Dialog extends React.PureComponent<DialogProps, DialogState> {
}; };
render() { render() {
const { modal, animated, pinned } = this.props; const { modal, animated, pinned, "data-testid": testId } = this.props;
let { className } = this.props; let { className } = this.props;
className = cssNames("Dialog flex center", className, { modal, pinned }); className = cssNames("Dialog flex center", className, { modal, pinned });
@ -158,6 +159,7 @@ export class Dialog extends React.PureComponent<DialogProps, DialogState> {
className={className} className={className}
onClick={stopPropagation} onClick={stopPropagation}
ref={this.ref} ref={this.ref}
data-testid={testId}
> >
<div className="box" ref={e => this.contentElem = e}> <div className="box" ref={e => this.contentElem = e}>
{this.props.children} {this.props.children}

143
src/renderer/components/kube-object-menu/__snapshots__/kube-object-menu.test.tsx.snap
View File

@ -1,15 +1,146 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`kube-object-menu given kube object, renders 1`] = ` exports[`kube-object-menu given kube object renders 1`] = `
<body> <body>
<div> <div>
<ul <div>
class="Animate opacity Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom" <ul
class="Animate opacity Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
>
<div>
Some menu item
</div>
<li
class="MenuItem"
data-menu-action-remove-test="true"
data-testid="menu-action-remove"
tabindex="0"
>
<i
class="Icon material interactive focusable"
id="tooltip_target_3"
tabindex="0"
>
<span
class="icon"
data-icon-name="delete"
>
delete
</span>
<div />
</i>
<span
class="title"
>
Remove
</span>
</li>
</ul>
</div>
</div>
<div
class="Animate opacity-scale Dialog flex center ConfirmDialog modal"
/>
<div
class="Tooltip narrow invisible formatter"
>
Delete
</div>
</body>
`;
exports[`kube-object-menu given kube object when removing kube object renders 1`] = `
<body>
<div>
<div>
<ul
class="Animate opacity Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
>
<div>
Some menu item
</div>
<li
class="MenuItem"
data-menu-action-remove-test="true"
data-testid="menu-action-remove"
tabindex="0"
>
<i
class="Icon material interactive focusable"
id="tooltip_target_7"
tabindex="0"
>
<span
class="icon"
data-icon-name="delete"
>
delete
</span>
<div />
</i>
<span
class="title"
>
Remove
</span>
</li>
</ul>
</div>
</div>
<div
class="Animate opacity-scale Dialog flex center ConfirmDialog modal"
data-testid="confirmation-dialog"
>
<div
class="box"
> >
<div> <div
Some menu item class="confirm-content"
>
<i
class="Icon material focusable big"
>
<span
class="icon"
data-icon-name="warning"
>
warning
</span>
</i>
<div>
<p>
Remove
<b>
Some cluster name/some-kind/some-name
</b>
?
</p>
</div>
</div> </div>
</ul> <div
class="confirm-buttons"
>
<button
class="Button cancel plain"
type="button"
>
Cancel
</button>
<button
class="Button ok primary"
data-testid="confirm"
type="button"
>
Remove
</button>
</div>
</div>
</div>
<div
class="Tooltip narrow invisible formatter"
>
Delete
</div> </div>
</body> </body>
`; `;

106
src/renderer/components/kube-object-menu/kube-object-menu.test.tsx
View File

@ -24,6 +24,7 @@ import { render } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect"; import "@testing-library/jest-dom/extend-expect";
import { KubeObjectMenu } from "./kube-object-menu"; import { KubeObjectMenu } from "./kube-object-menu";
import { KubeObject } from "../../../common/k8s-api/kube-object"; import { KubeObject } from "../../../common/k8s-api/kube-object";
import userEvent from "@testing-library/user-event";
import type { KubeApi } from "../../../common/k8s-api/kube-api"; import type { KubeApi } from "../../../common/k8s-api/kube-api";
import type { import type {
IHasGettableItemsForKind, IHasGettableItemsForKind,
@ -32,6 +33,8 @@ import type {
import type { IGettableStore } from "../../../common/k8s-api/api-manager"; import type { IGettableStore } from "../../../common/k8s-api/api-manager";
import type { KubeObjectStore } from "../../../common/k8s-api/kube-object.store"; import type { KubeObjectStore } from "../../../common/k8s-api/kube-object.store";
import type { IHasName } from "../../../main/cluster"; import type { IHasName } from "../../../main/cluster";
import { ConfirmDialog } from "../confirm-dialog";
import asyncFn from "@async-fn/jest";
describe("kube-object-menu", () => { describe("kube-object-menu", () => {
let hideDetailsStub: () => void; let hideDetailsStub: () => void;
@ -64,7 +67,7 @@ describe("kube-object-menu", () => {
const MenuItemComponentStub: React.FC = () => <div>Some menu item</div>; const MenuItemComponentStub: React.FC = () => <div>Some menu item</div>;
const menuItemStub: KubeObjectMenuRegistration = { const dynamicMenuItemStub: KubeObjectMenuRegistration = {
apiVersions: ["irrelevant"], apiVersions: ["irrelevant"],
components: { MenuItem: MenuItemComponentStub }, components: { MenuItem: MenuItemComponentStub },
kind: "irrelevant", kind: "irrelevant",
@ -73,7 +76,7 @@ describe("kube-object-menu", () => {
kubeObjectMenuRegistryStub = { kubeObjectMenuRegistryStub = {
// eslint-disable-next-line unused-imports/no-unused-vars-ts // eslint-disable-next-line unused-imports/no-unused-vars-ts
getItemsForKind: (kind: string, apiVersion: string): any => [ getItemsForKind: (kind: string, apiVersion: string): any => [
menuItemStub, dynamicMenuItemStub,
], ],
}; };
@ -100,29 +103,86 @@ describe("kube-object-menu", () => {
expect(baseElement).toMatchSnapshot(); expect(baseElement).toMatchSnapshot();
}); });
it("given kube object, renders", () => { describe("given kube object", () => {
objectStub = KubeObject.create({ let baseElement: Element;
apiVersion: "some-api-version", let removeActionMock: any;
kind: "some-kind", let getByTestId: (arg0: string) => any;
metadata: { let queryByTestId: (arg0: string) => any;
uid: "some-uid",
name: "some-name", beforeEach(async () => {
resourceVersion: "some-resource-version", objectStub = KubeObject.create({
}, apiVersion: "some-api-version",
kind: "some-kind",
metadata: {
uid: "some-uid",
name: "some-name",
resourceVersion: "some-resource-version",
},
});
removeActionMock = asyncFn();
({ baseElement, getByTestId, queryByTestId } = render(
<div>
<ConfirmDialog/>
<KubeObjectMenu
object={objectStub}
apiManager={apiManagerStub}
cluster={clusterStub}
kubeObjectMenuRegistry={kubeObjectMenuRegistryStub}
hideDetails={hideDetailsStub}
editResourceTab={editResourceTabStub}
toolbar={true}
removeAction={removeActionMock}
/>
</div>,
));
}); });
const { baseElement } = render( it("renders", () => {
<KubeObjectMenu expect(baseElement).toMatchSnapshot();
object={objectStub} });
apiManager={apiManagerStub}
cluster={clusterStub}
kubeObjectMenuRegistry={kubeObjectMenuRegistryStub}
hideDetails={hideDetailsStub}
editResourceTab={editResourceTabStub}
toolbar={true}
/>,
);
expect(baseElement).toMatchSnapshot(); it("does not open a confirmation dialog yet", () => {
expect(queryByTestId("confirmation-dialog")).toBeNull();
});
describe("when removing kube object", () => {
beforeEach(() => {
const menuItem = getByTestId("menu-action-remove");
userEvent.click(menuItem);
});
it("renders", () => {
expect(baseElement).toMatchSnapshot();
});
it("opens a confirmation dialog", () => {
getByTestId("confirmation-dialog");
});
describe("when remove is confirmed", () => {
beforeEach(() => {
const confirmRemovalButton = getByTestId("confirm");
userEvent.click(confirmRemovalButton);
});
it("calls for removal of the kube object", () => {
expect(removeActionMock).toHaveBeenCalledWith();
});
it("does not close the confirmation dialog yet", () => {
getByTestId("confirmation-dialog");
});
it("when removal resolves, closes the confirmation dialog", async () => {
await removeActionMock.resolve();
expect(queryByTestId("confirmation-dialog")).toBeNull(); });
});
});
}); });
}); });

2
src/renderer/components/menu/menu-actions.tsx
View File

@ -144,7 +144,7 @@ export class MenuActions extends React.Component<MenuActionsProps> {
</MenuItem> </MenuItem>
)} )}
{removeAction && ( {removeAction && (
<MenuItem onClick={this.remove}> <MenuItem onClick={this.remove} data-menu-action-remove-test data-testid="menu-action-remove">
<Icon material="delete" interactive={toolbar} tooltip="Delete"/> <Icon material="delete" interactive={toolbar} tooltip="Delete"/>
<span className="title">Delete</span> <span className="title">Delete</span>
</MenuItem> </MenuItem>

47
yarn.lock
View File

@ -7,6 +7,11 @@
resolved "https://registry.yarnpkg.com/7zip-bin/-/7zip-bin-5.1.1.tgz#9274ec7460652f9c632c59addf24efb1684ef876" resolved "https://registry.yarnpkg.com/7zip-bin/-/7zip-bin-5.1.1.tgz#9274ec7460652f9c632c59addf24efb1684ef876"
integrity sha512-sAP4LldeWNz0lNzmTird3uWfFDWWTeg6V/MsmyyLR9X1idwKBWIgt/ZvinqQldJm3LecKEs1emkbquO6PCiLVQ== integrity sha512-sAP4LldeWNz0lNzmTird3uWfFDWWTeg6V/MsmyyLR9X1idwKBWIgt/ZvinqQldJm3LecKEs1emkbquO6PCiLVQ==
"@async-fn/jest@^1.4.2":
version "1.4.2"
resolved "https://registry.yarnpkg.com/@async-fn/jest/-/jest-1.4.2.tgz#61b3e35aa1e7398675915b0c6f4967f0c26e0488"
integrity sha512-1o34++KnmxnW510+WNlEFjEIZHBhDWnxVmIs97z4z/3nyTLxSw7mz7tF2bhTdiPH0ahJlGpdaWzwqlBJopM06Q==
"@babel/code-frame@7.12.11": "@babel/code-frame@7.12.11":
version "7.12.11" version "7.12.11"
resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f"
@ -14,7 +19,7 @@
dependencies: dependencies:
"@babel/highlight" "^7.10.4" "@babel/highlight" "^7.10.4"
"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.1", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.8.3": "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.1", "@babel/code-frame@^7.10.4":
version "7.14.5" version "7.14.5"
resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.14.5.tgz#23b08d740e83f49c5e59945fbf1b43e80bbf4edb" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.14.5.tgz#23b08d740e83f49c5e59945fbf1b43e80bbf4edb"
integrity sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw== integrity sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==
@ -1532,7 +1537,7 @@
"@types/parse5" "*" "@types/parse5" "*"
"@types/tough-cookie" "*" "@types/tough-cookie" "*"
"@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.6": "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.6":
version "7.0.7" version "7.0.7"
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA== integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==
@ -6102,23 +6107,6 @@ forever-agent@~0.6.1:
resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91" resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE= integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
fork-ts-checker-webpack-plugin@^5.2.1:
version "5.2.1"
resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.2.1.tgz#79326d869797906fa8b24e2abcf9421fc805450d"
integrity sha512-SVi+ZAQOGbtAsUWrZvGzz38ga2YqjWvca1pXQFUArIVXqli0lLoDQ8uS0wg0kSpcwpZmaW5jVCZXQebkyUQSsw==
dependencies:
"@babel/code-frame" "^7.8.3"
"@types/json-schema" "^7.0.5"
chalk "^4.1.0"
cosmiconfig "^6.0.0"
deepmerge "^4.2.2"
fs-extra "^9.0.0"
memfs "^3.1.2"
minimatch "^3.0.4"
schema-utils "2.7.0"
semver "^7.3.2"
tapable "^1.0.0"
form-data@^2.5.0: form-data@^2.5.0:
version "2.5.1" version "2.5.1"
resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.5.1.tgz#f2cbec57b5e59e23716e128fe44d4e5dd23895f4" resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.5.1.tgz#f2cbec57b5e59e23716e128fe44d4e5dd23895f4"
@ -6235,11 +6223,6 @@ fs-minipass@^2.0.0:
dependencies: dependencies:
minipass "^3.0.0" minipass "^3.0.0"
fs-monkey@1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/fs-monkey/-/fs-monkey-1.0.3.tgz#ae3ac92d53bb328efe0e9a1d9541f6ad8d48e2d3"
integrity sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==
fs-vacuum@^1.2.10, fs-vacuum@~1.2.10: fs-vacuum@^1.2.10, fs-vacuum@~1.2.10:
version "1.2.10" version "1.2.10"
resolved "https://registry.yarnpkg.com/fs-vacuum/-/fs-vacuum-1.2.10.tgz#b7629bec07a4031a2548fdf99f5ecf1cc8b31e36" resolved "https://registry.yarnpkg.com/fs-vacuum/-/fs-vacuum-1.2.10.tgz#b7629bec07a4031a2548fdf99f5ecf1cc8b31e36"
@ -9243,13 +9226,6 @@ mem@^1.1.0:
dependencies: dependencies:
mimic-fn "^1.0.0" mimic-fn "^1.0.0"
memfs@^3.1.2:
version "3.2.2"
resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.2.2.tgz#5de461389d596e3f23d48bb7c2afb6161f4df40e"
integrity sha512-RE0CwmIM3CEvpcdK3rZ19BC4E6hv9kADkMN5rPduRak58cNArWLi/9jFLsa4rhsjfVxMP3v0jO7FHXq7SvFY5Q==
dependencies:
fs-monkey "1.0.3"
"memoize-one@>=3.1.1 <6", memoize-one@^5.0.0, memoize-one@^5.1.1: "memoize-one@>=3.1.1 <6", memoize-one@^5.0.0, memoize-one@^5.1.1:
version "5.1.1" version "5.1.1"
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0" resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
@ -12203,15 +12179,6 @@ scheduler@^0.20.2:
loose-envify "^1.1.0" loose-envify "^1.1.0"
object-assign "^4.1.1" object-assign "^4.1.1"
schema-utils@2.7.0:
version "2.7.0"
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"
integrity sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==
dependencies:
"@types/json-schema" "^7.0.4"
ajv "^6.12.2"
ajv-keywords "^3.4.1"
schema-utils@^1.0.0: schema-utils@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"