mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
90 lines
3.4 KiB
Markdown
90 lines
3.4 KiB
Markdown
# Testing Extensions
|
|
|
|
## 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).
|
|
|
|
### Renderer Process Logs
|
|
|
|
In the Renderer process, `console.log()` is printed in the Console in Developer Tools (**View** > **Toggle Developer Tools**).
|
|
|
|
### Main Process Logs
|
|
|
|
Viewing the logs from the Main process is a little trickier, since they cannot be printed using Developer Tools.
|
|
|
|
#### macOS
|
|
|
|
On macOS, view the Main process logs by running Lens from the terminal:
|
|
|
|
```bash
|
|
/Applications/Lens.app/Contents/MacOS/Lens
|
|
```
|
|
|
|
You can also use [Console.app](https://support.apple.com/en-gb/guide/console/welcome/mac) to view the Main process logs.
|
|
|
|
#### Linux
|
|
|
|
On Linux, you can access the Main process logs using the Lens PID. First get the PID:
|
|
|
|
```bash
|
|
ps aux | grep Lens | grep -v grep
|
|
```
|
|
|
|
Then get the Main process logs using the PID:
|
|
|
|
```bash
|
|
tail -f /proc/[pid]/fd/1 # stdout (console.log)
|
|
tail -f /proc/[pid]/fd/2 # stdout (console.error)
|
|
```
|