Repository: QuantStack/glue-jupyterlab (language: python)

Issue:
Add ui-tests with playwright



Discussion / hints:

Fix patch:
diff --git a/src/viewPanel/tabView.ts b/src/viewPanel/tabView.ts
index 5e4d129..07f382b 100644
--- a/src/viewPanel/tabView.ts
+++ b/src/viewPanel/tabView.ts
@@ -111,7 +111,10 @@ export class TabView extends Widget {
    * Update the viewers.
    */
   private async _initGrid(): Promise<void> {
-    for (const [viewerId, viewerData] of Object.entries(this.tabData)) {
+    const viewerKeys = Object.keys(this.tabData).sort();
+
+    for (const viewerId of viewerKeys) {
+      const viewerData = this.tabData[viewerId];
       // Create new viewers
       const viewer = await this._createViewer(
         this.tabName,


Test patch:
diff --git a/.github/workflows/update-integration-tests.yml b/.github/workflows/update-integration-tests.yml
index 4426dca..cc97404 100644
--- a/.github/workflows/update-integration-tests.yml
+++ b/.github/workflows/update-integration-tests.yml
@@ -39,6 +39,10 @@ jobs:
           jlpm
           python -m pip install .
 
+      - name: Install UI test dependencies
+        working-directory: ui-tests
+        run: jlpm install
+
       - uses: jupyterlab/maintainer-tools/.github/actions/update-snapshots@v1
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/ui-tests/package.json b/ui-tests/package.json
index 962bc69..dbc90ad 100644
--- a/ui-tests/package.json
+++ b/ui-tests/package.json
@@ -4,12 +4,13 @@
   "description": "JupyterLab gluepyter Integration Tests",
   "private": true,
   "scripts": {
-    "start": "jupyter lab --config jupyter_server_test_config.py",
+    "start": "rimraf .jupyter_ystore.db && jupyter lab ../examples --config jupyter_server_test_config.py",
     "test": "npx playwright test",
     "test:update": "npx playwright test --update-snapshots"
   },
   "devDependencies": {
     "@jupyterlab/galata": "^5.0.0-beta.0",
-    "@playwright/test": "^1.32.0"
-}
+    "@playwright/test": "^1.32.0",
+    "rimraf": "^3.0.2"
+  }
 }
diff --git a/ui-tests/playwright.config.js b/ui-tests/playwright.config.js
index 9ece6fa..3ef8df5 100644
--- a/ui-tests/playwright.config.js
+++ b/ui-tests/playwright.config.js
@@ -10,5 +10,15 @@ module.exports = {
     url: 'http://localhost:8888/lab',
     timeout: 120 * 1000,
     reuseExistingServer: !process.env.CI
+  },
+  retries: 0,
+  expect: {
+    toMatchSnapshot: {
+      // An acceptable ratio of pixels that are different to the total amount of pixels, between 0 and 1.
+      maxDiffPixelRatio: 0.01
+    }
+  },
+  use: {
+    viewport: { width: 1920, height: 1080 }
   }
 };
diff --git a/ui-tests/tests/test.spec.ts b/ui-tests/tests/test.spec.ts
index 679dadf..b2bd405 100644
--- a/ui-tests/tests/test.spec.ts
+++ b/ui-tests/tests/test.spec.ts
@@ -1,4 +1,11 @@
-import { expect, test } from '@jupyterlab/galata';
+import { IJupyterLabPageFixture, expect, test } from '@jupyterlab/galata';
+
+async function closeSideTab(page: IJupyterLabPageFixture): Promise<void> {
+  await page
+    .getByRole('tablist', { name: 'main sidebar' })
+    .getByRole('tab', { name: 'gluepyter' })
+    .click();
+}
 
 /**
  * Don't load JupyterLab webpage before running the tests.
@@ -6,12 +13,50 @@ import { expect, test } from '@jupyterlab/galata';
  */
 test.use({ autoGoto: false });
 
-test('should emit an activation console message', async ({ page }) => {
-  const logs: string[] = [];
+test('should render session file', async ({ page }) => {
+  await page.goto();
+
+  await expect(page.getByText('session.glu')).toBeVisible();
+  await page.getByText('session.glu').dblclick();
+
+  await closeSideTab(page);
+
+  // TODO Wait for spinner to not be visible once we have one
+  await page.waitForSelector('.bqplot');
 
-  page.on('console', message => {
-    logs.push(message.text());
-  });
+  expect(await page.screenshot()).toMatchSnapshot('session-tab1.png');
+});
 
+test('should switch tab', async ({ page }) => {
   await page.goto();
+
+  await expect(page.getByText('session.glu')).toBeVisible();
+  await page.getByText('session.glu').dblclick();
+
+  await closeSideTab(page);
+
+  // TODO Wait for spinner to not be visible once we have one
+  await page.waitForSelector('.bqplot');
+
+  // Switch tab
+  await page.getByRole('tab', { name: 'Tab 2' }).click();
+
+  await page.waitForSelector('li#tab-key-2-6.lm-TabBar-tab.lm-mod-current');
+
+  expect(await page.screenshot()).toMatchSnapshot('session-tab2.png');
+});
+
+test('should open link editor', async ({ page }) => {
+  await page.goto();
+
+  await expect(page.getByText('session.glu')).toBeVisible();
+  await page.getByText('session.glu').dblclick();
+
+  // TODO Wait for spinner to not be visible once we have one
+  await page.waitForSelector('.bqplot');
+
+  // Switch to link editor
+  await (await page.waitForSelector('text="Link Data"')).click();
+
+  expect(await page.screenshot()).toMatchSnapshot('link-editor.png');
 });
diff --git a/ui-tests/tests/test.spec.ts-snapshots/link-editor-linux.png b/ui-tests/tests/test.spec.ts-snapshots/link-editor-linux.png
new file mode 100644
index 0000000..36aebdc
Binary files /dev/null and b/ui-tests/tests/test.spec.ts-snapshots/link-editor-linux.png differ
diff --git a/ui-tests/tests/test.spec.ts-snapshots/session-tab1-linux.png b/ui-tests/tests/test.spec.ts-snapshots/session-tab1-linux.png
new file mode 100644
index 0000000..b41a9d0
Binary files /dev/null and b/ui-tests/tests/test.spec.ts-snapshots/session-tab1-linux.png differ
diff --git a/ui-tests/tests/test.spec.ts-snapshots/session-tab2-linux.png b/ui-tests/tests/test.spec.ts-snapshots/session-tab2-linux.png
new file mode 100644
index 0000000..7581a8c
Binary files /dev/null and b/ui-tests/tests/test.spec.ts-snapshots/session-tab2-linux.png differ
diff --git a/ui-tests/yarn.lock b/ui-tests/yarn.lock
index e0ddbe0..ce695fe 100644
--- a/ui-tests/yarn.lock
+++ b/ui-tests/yarn.lock
@@ -2501,6 +2501,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"gluepyter-ui-tests@workspace:.":
+  version: 0.0.0-use.local
+  resolution: "gluepyter-ui-tests@workspace:."
+  dependencies:
+    "@jupyterlab/galata": ^5.0.0-beta.0
+    "@playwright/test": ^1.32.0
+  languageName: unknown
+  linkType: soft
+
 "graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.6":
   version: 4.2.11
   resolution: "graceful-fs@npm:4.2.11"
@@ -2744,15 +2753,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jupytercad-ui-tests@workspace:.":
-  version: 0.0.0-use.local
-  resolution: "jupytercad-ui-tests@workspace:."
-  dependencies:
-    "@jupyterlab/galata": ^5.0.0-beta.0
-    "@playwright/test": ^1.32.0
-  languageName: unknown
-  linkType: soft
-
 "lib0@npm:^0.2.42, lib0@npm:^0.2.74":
   version: 0.2.74
   resolution: "lib0@npm:0.2.74"