Skip to content

Commit 52511a5

Browse files
ZsailerZsailer
authored
Merge pull request jupyter-ai-contrib#19 from jtpio/ui-tests
Add UI tests
2 parents 7a55f02 + 977a463 commit 52511a5

File tree

10 files changed

+5570
-1
lines changed

10 files changed

+5570
-1
lines changed

‎.github/workflows/tests.yml‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
name: Tests
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
pull_request:
8+
branches:
9+
- '*'
10+
11+
concurrency:
12+
group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
13+
cancel-in-progress: false
14+
15+
jobs:
16+
ui-tests:
17+
name: ui-tests
18+
runs-on: ubuntu-latest
19+
20+
env:
21+
PLAYWRIGHT_BROWSERS_PATH: ${{ github.workspace }}/pw-browsers
22+
23+
steps:
24+
- name: Checkout
25+
uses: actions/checkout@v5
26+
27+
- name: Base Setup
28+
uses: jupyterlab/maintainer-tools/.github/actions/base-setup@v1
29+
30+
- name: Install the extension
31+
run: |
32+
set -eux
33+
pip install "jupyterlab>=4.4.0,<5"
34+
pip install -e ".[test]"
35+
36+
- name: Install tests dependencies
37+
working-directory: ui-tests
38+
env:
39+
YARN_ENABLE_IMMUTABLE_INSTALLS: 0
40+
PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
41+
run: jlpm install
42+
43+
- name: Set up browser cache
44+
uses: actions/cache@v4
45+
with:
46+
path: |
47+
${{ github.workspace }}/pw-browsers
48+
key: ${{ runner.os }}-${{ hashFiles('ui-tests/yarn.lock') }}
49+
50+
- name: Install browser
51+
run: jlpm playwright install chromium
52+
working-directory: ui-tests
53+
54+
- name: Execute integration tests
55+
working-directory: ui-tests
56+
run: |
57+
jlpm test --retries=2
58+
59+
- name: Upload Playwright Test report
60+
if: always()
61+
uses: actions/upload-artifact@v4
62+
with:
63+
name: jupyterlab-diff-ui-tests-report-${{ github.run_id }}
64+
path: |
65+
ui-tests/test-results
66+
ui-tests/playwright-report

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,3 +119,7 @@ dmypy.json
119119

120120
# Yarn cache
121121
.yarn/
122+
123+
# Integration tests
124+
ui-tests/test-results/
125+
ui-tests/playwright-report/

‎package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,11 @@
123123
"node_modules",
124124
"dist",
125125
"coverage",
126-
"**/*.d.ts"
126+
"**/*.d.ts",
127+
"tests",
128+
"**/__tests__",
129+
"ui-tests",
130+
".venv"
127131
],
128132
"eslintConfig": {
129133
"extends": [

‎src/widget.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@ export abstract class BaseDiffWidget extends Widget {
131131
private _createButtons(footer: any): void {
132132
this._toggleButton = new ToolbarButton({
133133
label: this._trans.__('Compare changes'),
134+
tooltip: this._trans.__('Compare changes'),
134135
enabled: true,
135136
className: 'jp-DiffView-toggle',
136137
onClick: () => {

‎ui-tests/README.md‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
# Integration Testing
2+
3+
This folder contains the integration tests of the extension.
4+
5+
They are defined using [Playwright](https://playwright.dev/docs/intro) test runner
6+
and [Galata](https://github.com/jupyterlab/jupyterlab/tree/main/galata) helper.
7+
8+
The Playwright configuration is defined in [playwright.config.js](./playwright.config.js).
9+
10+
The JupyterLab server configuration to use for the integration test is defined
11+
in [jupyter_server_test_config.py](./jupyter_server_test_config.py).
12+
13+
The default configuration will produce video for failing tests and an HTML report.
14+
15+
> There is a UI mode that you may like; see [that video](https://www.youtube.com/watch?v=jF0yA-JLQW0).
16+
17+
## Run the tests
18+
19+
> All commands are assumed to be executed from the root directory
20+
21+
To run the tests, you need to:
22+
23+
1. Compile the extension:
24+
25+
```sh
26+
jlpm install
27+
jlpm build:prod
28+
```
29+
30+
> Check the extension is installed in JupyterLab.
31+
32+
2. Install test dependencies (needed only once):
33+
34+
```sh
35+
cd ./ui-tests
36+
jlpm install
37+
jlpm playwright install
38+
cd ..
39+
```
40+
41+
3. Execute the [Playwright](https://playwright.dev/docs/intro) tests:
42+
43+
```sh
44+
cd ./ui-tests
45+
jlpm playwright test
46+
```
47+
48+
Test results will be shown in the terminal. In case of any test failures, the test report
49+
will be opened in your browser at the end of the tests execution; see
50+
[Playwright documentation](https://playwright.dev/docs/test-reporters#html-reporter)
51+
for configuring that behavior.
52+
53+
## Update the tests snapshots
54+
55+
> All commands are assumed to be executed from the root directory
56+
57+
If you are comparing snapshots to validate your tests, you may need to update
58+
the reference snapshots stored in the repository. To do that, you need to:
59+
60+
1. Compile the extension:
61+
62+
```sh
63+
jlpm install
64+
jlpm build:prod
65+
```
66+
67+
> Check the extension is installed in JupyterLab.
68+
69+
2. Install test dependencies (needed only once):
70+
71+
```sh
72+
cd ./ui-tests
73+
jlpm install
74+
jlpm playwright install
75+
cd ..
76+
```
77+
78+
3. Execute the [Playwright](https://playwright.dev/docs/intro) command:
79+
80+
```sh
81+
cd ./ui-tests
82+
jlpm playwright test -u
83+
```
84+
85+
> Some discrepancy may occurs between the snapshots generated on your computer and
86+
> the one generated on the CI. To ease updating the snapshots on a PR, you can
87+
> type `please update playwright snapshots` to trigger the update by a bot on the CI.
88+
> Once the bot has computed new snapshots, it will commit them to the PR branch.
89+
90+
## Create tests
91+
92+
> All commands are assumed to be executed from the root directory
93+
94+
To create tests, the easiest way is to use the code generator tool of playwright:
95+
96+
1. Compile the extension:
97+
98+
```sh
99+
jlpm install
100+
jlpm build:prod
101+
```
102+
103+
> Check the extension is installed in JupyterLab.
104+
105+
2. Install test dependencies (needed only once):
106+
107+
```sh
108+
cd ./ui-tests
109+
jlpm install
110+
jlpm playwright install
111+
cd ..
112+
```
113+
114+
3. Start the server:
115+
116+
```sh
117+
cd ./ui-tests
118+
jlpm start
119+
```
120+
121+
4. Execute the [Playwright code generator](https://playwright.dev/docs/codegen) in **another terminal**:
122+
123+
```sh
124+
cd ./ui-tests
125+
jlpm playwright codegen localhost:8888
126+
```
127+
128+
## Debug tests
129+
130+
> All commands are assumed to be executed from the root directory
131+
132+
To debug tests, a good way is to use the inspector tool of playwright:
133+
134+
1. Compile the extension:
135+
136+
```sh
137+
jlpm install
138+
jlpm build:prod
139+
```
140+
141+
> Check the extension is installed in JupyterLab.
142+
143+
2. Install test dependencies (needed only once):
144+
145+
```sh
146+
cd ./ui-tests
147+
jlpm install
148+
jlpm playwright install
149+
cd ..
150+
```
151+
152+
3. Execute the Playwright tests in [debug mode](https://playwright.dev/docs/debug):
153+
154+
```sh
155+
cd ./ui-tests
156+
jlpm playwright test --debug
157+
```
158+
159+
## Upgrade Playwright and the browsers
160+
161+
To update the web browser versions, you must update the package `@playwright/test`:
162+
163+
```sh
164+
cd ./ui-tests
165+
jlpm up "@playwright/test"
166+
jlpm playwright install
167+
```

‎ui-tests/jupyter_server_test_config.py‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
"""Server configuration for integration tests.
2+
3+
!! Never use this configuration in production because it
4+
opens the server to the world and provide access to JupyterLab
5+
JavaScript objects through the global window variable.
6+
"""
7+
from jupyterlab.galata import configure_jupyter_server
8+
9+
configure_jupyter_server(c)
10+
11+
c.FileContentsManager.delete_to_trash = False
12+
13+
# Uncomment to set server log level to debug level
14+
# c.ServerApp.log_level = "DEBUG"

‎ui-tests/package.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "jupyterlab-diff-ui-tests",
3+
"version": "1.0.0",
4+
"description": "jupyterlab-diff Integration Tests",
5+
"private": true,
6+
"scripts": {
7+
"start": "jupyter lab --config jupyter_server_test_config.py",
8+
"test": "jlpm playwright test",
9+
"test:update": "jlpm playwright test --update-snapshots"
10+
},
11+
"devDependencies": {
12+
"@jupyterlab/galata": "^5.4.0",
13+
"@playwright/test": "^1.55.1"
14+
}
15+
}

‎ui-tests/playwright.config.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* Configuration for Playwright using default from @jupyterlab/galata
3+
*/
4+
const baseConfig = require('@jupyterlab/galata/lib/playwright-config');
5+
6+
module.exports = {
7+
...baseConfig,
8+
use: {
9+
...baseConfig.use,
10+
video: process.env.PWVIDEO || 'retain-on-failure',
11+
launchOptions: {
12+
slowMo: process.env.PWSLOWMO ? parseInt(process.env.PWSLOWMO) : 0
13+
}
14+
},
15+
webServer: [
16+
{
17+
command: 'jlpm start',
18+
url: 'http://localhost:8888/lab',
19+
timeout: 120 * 1000,
20+
reuseExistingServer: !process.env.CI
21+
}
22+
]
23+
};

0 commit comments

Comments
 (0)