Add a ui-test (#27)

* Add a ui-test

* Try closing the left sidebar

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Iterate

* Update

* Change screen res

* Update

* Update UI tests

* SKip failed test to run the UI test

* Use sidebar helper

* here we go again

* Activate test

* Activate test again

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Duc Trung Le <leductrungxf@gmail.com>

Author: 3 people

.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 }}

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,

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"
+  }
 }

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 }
   }
 };

ui-tests/tests/test.spec.ts

@@ -1,17 +1,62 @@
-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.
  * This is required to ensure we capture all log messages.
  */
 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');
 });

ui-tests/tests/test.spec.ts-snapshots/link-editor-linux.png

@@ -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"