dev: Add pixi tasks for ui tests

.taplo.toml

@@ -0,0 +1,2 @@
+[formatting]
+inline_table_expand = false

pyproject.toml

@@ -215,8 +215,34 @@ description = "Test server extension with pytest."
 cmd = "npx --no jest --coverage"
 description = "Test client extension with Jest."
 
+# UI-tests
+
+[tool.pixi.feature.test.tasks.playwright]
+cwd = "ui-tests/"
+cmd = "jlpm playwright"
+description = "Execute playwright commands"
+depends-on = [
+  { task = "jlpm-build", args = ["prod"] },
+  "install-ui-tests",
+  "install-browsers",
+]
+
+[tool.pixi.feature.test.tasks.test-ui]
+description = "Test the extension UI with playwright."
+depends-on = [
+  { task = "jlpm-build", args = ["prod"] },
+  "install-ui-tests",
+  "install-browsers",
+  { task = "playwright", args = ["test"] },
+]
+
+[tool.pixi.feature.dev.tasks.jlpm-ui]
+description = "Run Jupyter lab package manager inside the UI test directory."
+cwd = "ui-tests/"
+cmd = "jlpm"
+
 [tool.pixi.feature.test.tasks.test]
-depends-on = ["test-pytest", "test-jest"]
+depends-on = ["test-pytest", "test-jest", "test-ui"]
 description = "Run all tests."
 
 # All
@@ -237,6 +263,8 @@ typescript-language-server = ">=5.1"
 typos-lsp = "*"
 commitlint-rs = "*"
 
+# Data generation
+
 [tool.pixi.feature.dev.tasks.gen-data]
 cmd = """
 python data/generate.py batch \
@@ -274,16 +302,18 @@ curl -L -o data/samples/linkedIn.csv \
 outputs = ["data/samples/*"]
 description = "Download different data files from the Internet."
 
+# Setup
 
 [tool.pixi.feature.dev.tasks.jlpm-install]
 cmd = "jlpm install"
-description = "Install NPM packages."
+description = "Install client-side required NPM packages."
 inputs = ["package.json", "yarn.lock"]
 outputs = [".yarn/install-state.gz"]
 
 [tool.pixi.feature.dev.tasks.jlpm-build]
 depends-on = ["jlpm-install"]
-cmd = "jlpm build"
+args = [{ arg = "target", default = "" }]
+cmd = "jlpm build{{ ':' if target | length > 0 }}{{ target }}"
 description = "Build Arbalister client package."
 inputs = ["src/", "style/"]
 
@@ -297,6 +327,20 @@ cmd = "jupyter lab"
 depends-on = ["install-dev"]
 description = "Launch JupyterLab with the current extension installed."
 
+[tool.pixi.feature.dev.tasks.install-ui-tests]
+cwd = "ui-tests"
+cmd = "jlpm install"
+description = "Install NPM packages needed by UI tests."
+inputs = ["ui-tests/package.json", "ui-tests/yarn.lock"]
+outputs = ["ui-tests/.yarn/install-state.gz"]
+
+[tool.pixi.feature.dev.tasks.install-browsers]
+# The command is already smart enough to avoid downloading again
+cwd = "ui-tests"
+cmd = "jlpm playwright install"
+description = "Install web browsers though playwright."
+
+
 [tool.pixi.feature.dev.tasks]
 jlpm = { cmd = "jlpm", description = "Run Jupyter lab package manager." }
 jlpm-watch = "jlpm run watch"

ui-tests/README.md

@@ -16,37 +16,17 @@ The default configuration will produce video for failing tests and an HTML repor
 
 ## Run the tests
 
-> All commands are assumed to be executed from the root directory
-
-To run the tests, you need to:
-
-1. Compile the extension:
-
-```sh
-jlpm install
-jlpm build:prod
-```
-
-> Check the extension is installed in JupyterLab.
-
-2. Install test dependencies (needed only once):
-
-```sh
-cd ./ui-tests
-jlpm install
-jlpm playwright install
-cd ..
-```
-
-3. Execute the [Playwright](https://playwright.dev/docs/intro) tests:
+You can run all tests through ``pixi``.
+This will setup all required dependencies, including browsers downloads.
+You can control the location of the download with the environment variable ``PLAYWRIGHT_BROWSERS_PATH``.
 
 ```sh
-cd ./ui-tests
-jlpm playwright test
+pixi run test-ui
 ```
 
-Test results will be shown in the terminal. In case of any test failures, the test report
-will be opened in your browser at the end of the tests execution; see
+Test results will be shown in the terminal.
+In case of any test failures, the test report will be opened in your browser at the end of the
+tests execution; see
 [Playwright documentation](https://playwright.dev/docs/test-reporters#html-reporter)
 for configuring that behavior.
 
@@ -57,111 +37,46 @@ for configuring that behavior.
 If you are comparing snapshots to validate your tests, you may need to update
 the reference snapshots stored in the repository. To do that, you need to:
 
-1. Compile the extension:
-
-```sh
-jlpm install
-jlpm build:prod
-```
-
-> Check the extension is installed in JupyterLab.
-
-2. Install test dependencies (needed only once):
-
 ```sh
-cd ./ui-tests
-jlpm install
-jlpm playwright install
-cd ..
-```
-
-3. Execute the [Playwright](https://playwright.dev/docs/intro) command:
-
-```sh
-cd ./ui-tests
-jlpm playwright test -u
+pixi run test-ui -u
 ```
 
 > Some discrepancy may occurs between the snapshots generated on your computer and
-> the one generated on the CI. To ease updating the snapshots on a PR, you can
-> type `please update playwright snapshots` to trigger the update by a bot on the CI.
+> the one generated on the CI.
+> To ease updating the snapshots on a PR, you can type `please update playwright snapshots` to
+> trigger the update by a bot on the CI.
 > Once the bot has computed new snapshots, it will commit them to the PR branch.
 
 ## Create tests
 
-> All commands are assumed to be executed from the root directory
-
 To create tests, the easiest way is to use the code generator tool of playwright:
 
-1. Compile the extension:
-
-```sh
-jlpm install
-jlpm build:prod
-```
-
-> Check the extension is installed in JupyterLab.
-
-2. Install test dependencies (needed only once):
+Start the server with ``pixi``
 
 ```sh
-cd ./ui-tests
-jlpm install
-jlpm playwright install
-cd ..
-```
-
-3. Start the server:
-
-```sh
-cd ./ui-tests
-jlpm start
+pixi run jlpm-ui start
 ```
 
 4. Execute the [Playwright code generator](https://playwright.dev/docs/codegen) in **another terminal**:
 
 ```sh
-cd ./ui-tests
-jlpm playwright codegen localhost:8888
+pixi run playwright codegen localhost:53729
 ```
 
 ## Debug tests
 
-> All commands are assumed to be executed from the root directory
-
-To debug tests, a good way is to use the inspector tool of playwright:
-
-1. Compile the extension:
-
-```sh
-jlpm install
-jlpm build:prod
-```
-
-> Check the extension is installed in JupyterLab.
-
-2. Install test dependencies (needed only once):
-
-```sh
-cd ./ui-tests
-jlpm install
-jlpm playwright install
-cd ..
-```
-
-3. Execute the Playwright tests in [debug mode](https://playwright.dev/docs/debug):
+To debug tests, a good way is to use the inspector tool of playwright.
+Execute the Playwright tests in [debug mode](https://playwright.dev/docs/debug):
 
 ```sh
-cd ./ui-tests
-jlpm playwright test --debug
+pixi run test-ui --debug
 ```
 
 ## Upgrade Playwright and the browsers
 
 To update the web browser versions, you must update the package `@playwright/test`:
 
 ```sh
-cd ./ui-tests
-jlpm up "@playwright/test"
-jlpm playwright install
+pixi run jlpm-ui up "@playwright/test"
+pixi run playwright install
 ```

ui-tests/package.json

@@ -4,7 +4,7 @@
   "description": "JupyterLab arbalister Integration Tests",
   "private": true,
   "scripts": {
-    "start": "jupyter lab --config jupyter_server_test_config.py",
+    "start": "jupyter lab --config jupyter_server_test_config.py --port 53729",
     "test": "jlpm playwright test",
     "test:update": "jlpm playwright test --update-snapshots"
   },

ui-tests/playwright.config.js

@@ -7,8 +7,12 @@ module.exports = {
   ...baseConfig,
   webServer: {
     command: "jlpm start",
-    url: "http://localhost:8888/lab",
+    url: "http://localhost:53729/lab",
     timeout: 120 * 1000,
     reuseExistingServer: !process.env.CI,
   },
+  use: {
+    ...baseConfig.use,
+    baseURL: "http://127.0.0.1:53729",
+  },
 };