From 997fb22d8008f11d81c803060e2b72273cf64ad4 Mon Sep 17 00:00:00 2001
From: chh <1474479+chenhunghan@users.noreply.github.com>
Date: Mon, 30 Nov 2020 21:58:04 +0800
Subject: [PATCH] Add section for extension testing (#1576)

Signed-off-by: Hung-Han (Henry) Chen <1474479+chenhunghan@users.noreply.github.com>
---
 .../testing-and-publishing/testing.md         | 53 ++++++++++++++++++-
 1 file changed, 52 insertions(+), 1 deletion(-)

diff --git a/docs/extensions/testing-and-publishing/testing.md b/docs/extensions/testing-and-publishing/testing.md
index 484c304f49..ab10c5eab3 100644
--- a/docs/extensions/testing-and-publishing/testing.md
+++ b/docs/extensions/testing-and-publishing/testing.md
@@ -1,6 +1,57 @@
 # Testing Extensions
 
-## Console.log
+## Renderer Process Unit Testing
+
+UI components in extension renderer process are based on React/ReactDOM. These components can be tested by popular React testing tools like [React Testing Library](https://github.com/testing-library/react-testing-library).
+
+If you are using the [Yeoman Lens Extension Generator](https://github.com/lensapp/generator-lens-ext) to scaffold extension project. The testing environment for render process are already setup for you. Just use `npm start` or `yarn test` to run the tests.
+
+For example, I have a component `GlobalPageMenuIcon` and want to test if `props.navigate` is called when user clicks the icon.
+
+My component `GlobalPageMenuIcon`
+
+```tsx
+import React from "react"
+import { Component: { Icon } } from "@k8slens/extensions";
+
+const GlobalPageMenuIcon = ({ navigate }: { navigate?: () => void }): JSX.Element => (
+  <Icon
+    material="trip_origin"
+    onClick={() => navigate()}
+    data-testid="global-page-menu-icon"
+  />
+)
+```
+
+The test
+
+```js
+import React from "react"
+import { render, screen, fireEvent } from "@testing-library/react";
+
+import GlobalPageMenuIcon from "./GlobalPageMenuIcon";
+
+test("click called navigate()", () => {
+    const navigate = jest.fn();
+    render(<GlobalPageMenuIcon navigate={navigate} />);
+    fireEvent.click(screen.getByTestId("global-page-menu-icon"));
+    expect(navigate).toHaveBeenCalled();
+  });
+```
+
+In the example we used [React Testing Library](https://github.com/testing-library/react-testing-library) but any React testing framework can be used to test renderer process UI components.
+
+There are more example tests in the generator's [template](https://github.com/lensapp/generator-lens-ext/tree/main/generators/app/templates/ext-ts/components). Extend your tests based on the examples.
+
+## Main Process Unit Testing
+
+Code in the extension main process are just normal JavaScript files that has access to extension api, you can write unit tests using any testing framework.
+
+If you are using the [Yeoman Lens Extension Generator](https://github.com/lensapp/generator-lens-ext) to scaffold your extension project. The testing environment [Jest](https://jestjs.io/) are setup for you. Just use  `npm start` or `yarn test` to run the tests.
+
+## Tips
+
+### Console.log
 
 Extension developers might find `console.log()` useful for printing out information and errors from extensions. To use `console.log()`, note that Lens is based on Electron, and that Electron has two types of processes: [Main and Renderer](https://www.electronjs.org/docs/tutorial/quick-start#main-and-renderer-processes).