[3.2.x] Relax @playright/test dependency in Galata (jupyterlab#11371)

* Relax `@playright/test` dependency in Galata

* Backport fix for POST request status

Co-authored-by: Frédéric Collonval <[email protected]>

Author: jtpio

galata/package.json

@@ -53,7 +53,7 @@
     "@jupyterlab/settingregistry": "^3.2.1",
     "@lumino/algorithm": "^1.3.3",
     "@lumino/coreutils": "^1.5.3",
-    "@playwright/test": "1.14.1",
+    "@playwright/test": "^1.16.2",
     "canvas": "^2.6.1",
     "fs-extra": "^9.0.1",
     "http-server": "^13.0.0",

galata/src/fixtures.ts

@@ -562,7 +562,7 @@ namespace Private {
           runners.set(id, data);
           if (!page.isClosed() && !isClosed) {
             return route.fulfill({
-              status: 201,
+              status: type === 'sessions' ? 201 : 200,
               body: JSON.stringify(data),
               contentType: 'application/json',
               headers: response.headers as any

galata/src/playwright-config.ts

@@ -5,10 +5,7 @@ import { PlaywrightTestConfig } from '@playwright/test';
 
 // Default Playwright configuration for JupyterLab
 module.exports = {
-  reporter: [
-    [process.env.CI ? 'dot' : 'list'],
-    ['@playwright/test/lib/test/reporters/html']
-  ],
+  reporter: [[process.env.CI ? 'dot' : 'list'], ['html']],
   reportSlowTests: null,
   timeout: 60000,
   use: {

galata/test/galata/fixture.spec.ts

@@ -162,7 +162,7 @@ test.describe('terminals', () => {
 test.describe('tmpPath', () => {
   test('should return an unique test folder', ({ tmpPath }) => {
     expect(tmpPath).toEqual(
-      'test-galata-fixture-should-return-an-unique-test-folder-galata'
+      'test-galata-fixture-tmpPath-should-return-an-unique-test-folder-galata'
     );
   });
 });

galata/test/jupyterlab/general.test.ts-snapshots/dark-theme-jupyterlab-linux.png

@@ -1,59 +1,86 @@
 import { test } from '@jupyterlab/galata';
 import { expect } from '@playwright/test';
 
-test.describe('Terminal Tests', () => {
-  test.describe('Open Terminal', () => {
-    test.beforeEach(async ({ page }) => {
-      await page.menu.clickMenuItem('File>New>Terminal');
-      await page.sidebar.openTab('jp-running-sessions');
-      await page.sidebar.getTab('jp-running-sessions');
-      const content = await page.sidebar.getContentPanel('left');
-      await page.waitForSelector(
-        'span.jp-RunningSessions-itemLabel:has-text("terminals")'
-      );
-      await (
-        await content.$(
-          'span.jp-RunningSessions-itemLabel:has-text("terminals")'
-        )
-      ).click();
+const TERMINAL_SELECTOR = '.jp-Terminal';
+const TERMINAL_THEME_ATTRIBUTE = 'data-term-theme';
+
+test.describe('Terminal', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.menu.clickMenuItem('File>New>Terminal');
+    await page.waitForSelector(TERMINAL_SELECTOR);
+  });
 
-      await page.waitForSelector('div.xterm-viewport');
+  test.describe('Open', () => {
+    test('should appear in the sidebar', async ({ page }) => {
+      await page.sidebar.openTab('jp-running-sessions');
+      await expect(page.locator('text=terminals/1')).toBeVisible();
     });
+  });
 
+  test.describe('Theme', () => {
     test('Light theme terminal inherit', async ({ page }) => {
-      expect(await page.screenshot()).toMatchSnapshot('light-term-inherit.png');
+      const terminal = page.locator(TERMINAL_SELECTOR);
+      await terminal.waitFor();
+      await expect(terminal).toHaveAttribute(
+        TERMINAL_THEME_ATTRIBUTE,
+        'inherit'
+      );
+      expect(await terminal.screenshot()).toMatchSnapshot(
+        'light-term-inherit.png'
+      );
     });
 
     test('Light theme terminal light', async ({ page }) => {
+      const terminal = page.locator(TERMINAL_SELECTOR);
+      await terminal.waitFor();
       await page.menu.clickMenuItem('Settings>Terminal Theme>Light');
-      await page.menu.closeAll();
-      expect(await page.screenshot()).toMatchSnapshot('light-term-light.png');
+      await expect(terminal).toHaveAttribute(TERMINAL_THEME_ATTRIBUTE, 'light');
+      expect(await terminal.screenshot()).toMatchSnapshot(
+        'light-term-light.png'
+      );
     });
 
     test('Light theme terminal dark', async ({ page }) => {
+      const terminal = page.locator(TERMINAL_SELECTOR);
+      await terminal.waitFor();
       await page.menu.clickMenuItem('Settings>Terminal Theme>Dark');
-      await page.menu.closeAll();
-      expect(await page.screenshot()).toMatchSnapshot('light-term-dark.png');
+      await expect(terminal).toHaveAttribute(TERMINAL_THEME_ATTRIBUTE, 'dark');
+      expect(await terminal.screenshot()).toMatchSnapshot(
+        'light-term-dark.png'
+      );
     });
 
     test('Dark theme terminal inherit', async ({ page }) => {
+      const terminal = page.locator(TERMINAL_SELECTOR);
+      await terminal.waitFor();
       await page.theme.setDarkTheme();
-      await page.menu.closeAll();
-      expect(await page.screenshot()).toMatchSnapshot('dark-term-inherit.png');
+      await expect(terminal).toHaveAttribute(
+        TERMINAL_THEME_ATTRIBUTE,
+        'inherit'
+      );
+      expect(await terminal.screenshot()).toMatchSnapshot(
+        'dark-term-inherit.png'
+      );
     });
 
     test('Dark theme terminal light', async ({ page }) => {
+      const terminal = page.locator(TERMINAL_SELECTOR);
+      await terminal.waitFor();
       await page.theme.setDarkTheme();
       await page.menu.clickMenuItem('Settings>Terminal Theme>Light');
-      await page.menu.closeAll();
-      expect(await page.screenshot()).toMatchSnapshot('dark-term-light.png');
+      await expect(terminal).toHaveAttribute(TERMINAL_THEME_ATTRIBUTE, 'light');
+      expect(await terminal.screenshot()).toMatchSnapshot(
+        'dark-term-light.png'
+      );
     });
 
     test('Dark theme terminal dark', async ({ page }) => {
+      const terminal = page.locator(TERMINAL_SELECTOR);
+      await terminal.waitFor();
       await page.theme.setDarkTheme();
       await page.menu.clickMenuItem('Settings>Terminal Theme>Dark');
-      await page.menu.closeAll();
-      expect(await page.screenshot()).toMatchSnapshot('dark-term-dark.png');
+      await expect(terminal).toHaveAttribute(TERMINAL_THEME_ATTRIBUTE, 'dark');
+      expect(await terminal.screenshot()).toMatchSnapshot('dark-term-dark.png');
     });
   });
 });