Add integration tests & improve notebook tour

.github/workflows/build.yml

@@ -84,6 +84,10 @@ jobs:
 
   integration-tests:
     name: Integration tests
+    strategy:
+      fail-fast: false
+      matrix:
+        jupyterlab: ['3.6', '4.0']
     needs: build
     runs-on: ubuntu-latest
 
@@ -105,7 +109,7 @@ jobs:
     - name: Install the extension
       run: |
         set -eux
-        python -m pip install "jupyterlab>=4.0.0,<5" jupyterlab-tour*.whl
+        python -m pip install "jupyterlab~=${{ matrix.jupyterlab }}" jupyterlab-tour*.whl
 
     - name: Install dependencies
       working-directory: ui-tests

.gitignore

@@ -126,3 +126,4 @@ dmypy.json
 
 # Yarn cache
 .yarn/
+junit.xml

package.json

@@ -12,7 +12,10 @@
         "url": "https://github.com/jupyterlab-contrib/jupyterlab-tour/issues"
     },
     "license": "BSD-3-Clause",
-    "author": "Frederic Collonval",
+    "author": {
+        "name": "Frederic Collonval",
+        "email": "fcollonval@gmail.com"
+    },
     "files": [
         "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
         "style/**/*.{css,eot,gif,html,jpg,json,png,svg,woff2,ttf}",

src/defaults.tsx

@@ -458,9 +458,22 @@ function addNotebookTour(
         case '.jp-NotebookPanel-toolbar .jp-KernelName':
           shell.activateById('jp-running-sessions');
           break;
-        case '#jp-running-sessions':
+        case '#jp-running-sessions': {
           shell.activateById('jp-property-inspector');
+          const commonTools = shell.node
+            .querySelector('#jp-property-inspector')
+            ?.querySelector('.jp-Collapse-header:first-child');
+          if (commonTools?.classList.contains('jp-Collapse-header-collapsed')) {
+            commonTools.dispatchEvent(
+              new MouseEvent('click', {
+                button: 0,
+                bubbles: true,
+                cancelable: true
+              })
+            );
+          }
           break;
+        }
         default:
           break;
       }

ui-tests/package.json

@@ -0,0 +1,15 @@
+{
+    "name": "jupyterlab-tour-ui-tests",
+    "version": "1.0.0",
+    "description": "JupyterLab jupyterlab-tour Integration Tests",
+    "private": true,
+    "scripts": {
+        "start": "jupyter lab --config jupyter_server_test_config.py",
+        "test": "jlpm playwright test",
+        "test:update": "jlpm playwright test --update-snapshots"
+    },
+    "devDependencies": {
+        "@jupyterlab/galata": "^5.0.0",
+        "@playwright/test": "^1.32.0"
+    }
+}

ui-tests/tests/jupyterlab-tour.spec.ts

@@ -1,21 +1,37 @@
 import { expect, test } from '@jupyterlab/galata';
 
-/**
- * Don't load JupyterLab webpage before running the tests.
- * This is required to ensure we capture all log messages.
- */
-test.use({ autoGoto: false });
+test('should run the welcome tour', async ({ page }) => {
+  await page.getByRole('button', { name: 'Start now' }).click();
+  await page.getByLabel('Next', { exact: true }).click();
+  await page.getByLabel('Next', { exact: true }).click();
+  await page.getByLabel('Next', { exact: true }).click();
+  await page.getByLabel('Next', { exact: true }).click();
+  await page.getByLabel('Next', { exact: true }).click();
+  await page.getByLabel('Next', { exact: true }).click();
+  await page.getByLabel('Next', { exact: true }).click();
 
-test('should emit an activation console message', async ({ page }) => {
-  const logs: string[] = [];
-
-  page.on('console', message => {
-    logs.push(message.text());
-  });
-
-  await page.goto();
+  await expect
+    .soft(page.locator('.react-joyride__tooltip h4'))
+    .toHaveText('Command Palette');
+  await page.getByLabel('Done').click();
+});
 
-  expect(
-    logs.filter(s => s === 'JupyterLab extension jupyterlab-tour is activated!')
-  ).toHaveLength(1);
+test('should run the notebook tour', async ({ page }) => {
+  await page.getByRole('menuitem', { name: 'File' }).click();
+  await page.getByText('New', { exact: true }).click();
+  await page.locator('#jp-mainmenu-file-new').getByText('Notebook').click();
+  await page.getByRole('button', { name: 'Select Kernel' }).click();
+  await page.getByRole('button', { name: 'Start now' }).click();
+  await page.getByLabel('Next', { exact: true }).click();
+  await page.getByLabel('Next', { exact: true }).click();
+  await page.getByLabel('Next', { exact: true }).click();
+  await page.getByLabel('Next', { exact: true }).click();
+  await page.getByLabel('Next', { exact: true }).click();
+  await page.getByLabel('Next', { exact: true }).click();
+  await page.getByLabel('Next', { exact: true }).click();
+  await page.getByLabel('Next', { exact: true }).click();
+  await expect
+    .soft(page.locator('.react-joyride__tooltip p'))
+    .toHaveText('Metadata (like tags) can be added to cells through this tab.');
+  await page.getByLabel('Done').click();
 });