Update `@jupyterlab/galata` (#7361)

* Update `@jupyterlab/galata`

* Align with the galata playwright dependency

* Add back playwrigh test dependency

* use fixed `tmpPath`

* create and delete tmpPath

* Update Playwright Snapshots

* Update Playwright Snapshots

* fix codespell

* fix codespell

* codespell

* pre-commit

* try fix flakyness

* force skip codespell

* add comments

* update snapshot

* try reduce flakyness

* try fix flakyness

* flakyness

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.pre-commit-config.yaml

@@ -29,7 +29,7 @@ repos:
     rev: 'v2.2.6'
     hooks:
       - id: codespell
-        args: ['-L', 'hart,noteable']
+        args: ['-L', 'hart,noteable', '--skip', "*.spec.ts"]
         exclude: |
           (?x)^(
               yarn.lock|

ui-tests/package.json

@@ -15,8 +15,8 @@
     "test:update": "playwright test --update-snapshots"
   },
   "dependencies": {
-    "@jupyterlab/galata": "~5.2.0-rc.0",
-    "@playwright/test": "^1.33.0",
+    "@jupyterlab/galata": "~5.2.0",
+    "@playwright/test": "^1.44.0",
     "rimraf": "^3.0.2"
   }
 }

ui-tests/test/editor.spec.ts

@@ -5,7 +5,7 @@ import path from 'path';
 
 import { test } from './fixtures';
 
-import { expect } from '@playwright/test';
+import { expect } from '@jupyterlab/galata';
 
 const FILE = 'environment.yml';
 

ui-tests/test/filebrowser.spec.ts

@@ -3,7 +3,7 @@
 
 import path from 'path';
 
-import { expect } from '@playwright/test';
+import { expect } from '@jupyterlab/galata';
 
 import { test } from './fixtures';
 

ui-tests/test/general.spec.ts

@@ -3,7 +3,7 @@
 
 import path from 'path';
 
-import { expect } from '@playwright/test';
+import { expect } from '@jupyterlab/galata';
 
 import { test } from './fixtures';
 

ui-tests/test/layout.spec.ts

@@ -3,7 +3,7 @@
 
 import path from 'path';
 
-import { expect } from '@playwright/test';
+import { expect } from '@jupyterlab/galata';
 
 import { galata } from '@jupyterlab/galata';
 

ui-tests/test/links.spec.ts

@@ -3,7 +3,7 @@
 
 import path from 'path';
 
-import { expect } from '@playwright/test';
+import { expect } from '@jupyterlab/galata';
 
 import { test } from './fixtures';
 

ui-tests/test/menus.spec.ts

@@ -5,7 +5,7 @@ import path from 'path';
 
 import { test } from './fixtures';
 
-import { expect } from '@playwright/test';
+import { expect } from '@jupyterlab/galata';
 import { waitForKernelReady } from './utils';
 
 const NOTEBOOK = 'empty.ipynb';

ui-tests/test/mobile.spec.ts

@@ -1,15 +1,32 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { expect } from '@playwright/test';
+import { IJupyterLabPage, expect, galata } from '@jupyterlab/galata';
 
 import { test } from './fixtures';
 
 import { hideAddCellButton, waitForKernelReady } from './utils';
 
-test.use({ autoGoto: false, viewport: { width: 524, height: 800 } });
+test.use({
+  autoGoto: false,
+  viewport: { width: 524, height: 800 },
+  // Set a fixed string as Playwright is preventing the unique test name to be too long
+  // and replaces part of the path with a hash
+  tmpPath: 'mobile-layout',
+});
 
 test.describe('Mobile', () => {
+  // manually create the test directory since tmpPath is set to a fixed value
+  test.beforeAll(async ({ request, tmpPath }) => {
+    const contents = galata.newContentsHelper(request);
+    await contents.createDirectory(tmpPath);
+  });
+
+  test.afterAll(async ({ request, tmpPath }) => {
+    const contents = galata.newContentsHelper(request);
+    await contents.deleteDirectory(tmpPath);
+  });
+
   test('The layout should be more compact on the file browser page', async ({
     page,
     tmpPath,
@@ -29,11 +46,14 @@ test.describe('Mobile', () => {
     await page.goto(`tree/${tmpPath}`);
 
     // Create a new notebook
-    const [notebook] = await Promise.all([
-      page.waitForEvent('popup'),
-      page.click('text="New"'),
-      page.click('text="Python 3 (ipykernel)"'),
-    ]);
+    const notebookPromise = page.waitForEvent('popup');
+    await page.click('text="New"');
+    await page
+      .locator(
+        '[data-command="notebook:create-new"] >> text="Python 3 (ipykernel)"'
+      )
+      .click();
+    const notebook = await notebookPromise;
 
     // wait for the kernel status animations to be finished
     await waitForKernelReady(notebook);

ui-tests/test/notebook.spec.ts

@@ -3,7 +3,7 @@
 
 import path from 'path';
 
-import { expect } from '@playwright/test';
+import { expect } from '@jupyterlab/galata';
 
 import { test } from './fixtures';
 

ui-tests/test/settings.spec.ts

@@ -3,11 +3,23 @@
 
 import { test } from './fixtures';
 
-import { expect } from '@playwright/test';
+import { expect, galata } from '@jupyterlab/galata';
 
-test.use({ autoGoto: false });
+// Set a fixed string as Playwright is preventing the unique test name to be too long
+// and replaces part of the path with a hash
+test.use({ autoGoto: false, tmpPath: 'settings' });
 
 test.describe('Settings', () => {
+  test.beforeAll(async ({ request, tmpPath }) => {
+    const contents = galata.newContentsHelper(request);
+    await contents.createDirectory(tmpPath);
+  });
+
+  test.afterAll(async ({ request, tmpPath }) => {
+    const contents = galata.newContentsHelper(request);
+    await contents.deleteDirectory(tmpPath);
+  });
+
   test('Should be persisted after reloading the page', async ({
     page,
     tmpPath,

ui-tests/test/smoke.spec.ts

@@ -1,4 +1,4 @@
-import { expect } from '@playwright/test';
+import { expect } from '@jupyterlab/galata';
 
 import { test } from './fixtures';
 
@@ -24,11 +24,14 @@ test.describe('Smoke', () => {
     await console.waitForSelector('.jp-CodeConsole');
 
     // Create a new notebook
-    const [notebook] = await Promise.all([
-      page.waitForEvent('popup'),
-      page.click('text="New"'),
-      page.click('text="Python 3 (ipykernel)"'),
-    ]);
+    const notebookPromise = page.waitForEvent('popup');
+    await page.click('text="New"');
+    await page
+      .locator(
+        '[data-command="notebook:create-new"] >> text="Python 3 (ipykernel)"'
+      )
+      .click();
+    const notebook = await notebookPromise;
 
     try {
       // we may have to select the kernel first

ui-tests/test/tree.spec.ts

@@ -3,7 +3,7 @@
 
 import { test } from './fixtures';
 
-import { expect } from '@playwright/test';
+import { expect } from '@jupyterlab/galata';
 
 const SUBFOLDER = 'subfolder';
 

ui-tests/test/utils.ts

@@ -14,9 +14,7 @@ export async function runAndAdvance(
 /**
  * Wait for the kernel to be ready
  */
-export async function waitForKernelReady(
-  page: IJupyterLabPageFixture
-): Promise<void> {
+export async function waitForKernelReady(page: Page): Promise<void> {
   await page.waitForSelector('.jp-NotebookKernelStatus-fade');
   await page.waitForFunction(() => {
     const status = window.document.getElementsByClassName(
@@ -41,9 +39,7 @@ export async function waitForKernelReady(
  * Special case for firefox headless issue
  * See https://github.com/jupyter/notebook/pull/6872#issuecomment-1549594166 for more details
  */
-export async function hideAddCellButton(
-  page: IJupyterLabPageFixture
-): Promise<void> {
+export async function hideAddCellButton(page: Page): Promise<void> {
   await page
     .locator('.jp-Notebook-footer')
     .evaluate((element) => (element.style.display = 'none'));