Fix visual tests, allow to disable termianal cursor blinking

.licenserc.yaml

@@ -32,7 +32,7 @@ header:
     - 'dev_mode/style.js'
     - 'examples/federated/example.cert'
     - 'galata/test/jupyterlab/notebooks/'
-    - 'galata/test/*/*-snapshots/*.txt'
+    - 'galata/test/*/*/*.txt'
     - 'jupyterlab.desktop'
     - 'jupyterlab/staging'
     - 'packages/codemirror/test/foo.grammar'

galata/src/galata.ts

@@ -41,6 +41,9 @@ export namespace galata {
       defaultConfig: {
         cursorBlinkRate: 0
       }
+    },
+    '@jupyterlab/terminal-extension:plugin': {
+      cursorBlink: false
     }
   };
 

galata/src/helpers/performance.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { Page } from '@playwright/test';
+import { CDPSession, Page } from '@playwright/test';
 import { UUID } from '@lumino/coreutils';
 
 /**
@@ -40,6 +40,22 @@ export class PerformanceHelper {
     return time;
   }
 
+  /**
+   * Throttle network
+   */
+  async throttleNetwork(config: {
+    downloadThroughput: number;
+    uploadThroughput: number;
+    latency: number;
+  }): Promise<CDPSession> {
+    const cdpSession = await this.page.context().newCDPSession(this.page);
+    await cdpSession.send('Network.emulateNetworkConditions', {
+      offline: false,
+      ...config
+    });
+    return cdpSession;
+  }
+
   /**
    * Measure the time to execute a function using web browser performance API.
    *

galata/test/documentation/commands.test.ts-snapshots/commandsList-documentation-linux.json

@@ -1999,9 +1999,7 @@
     "id": "notebook:toggle-all-cell-line-numbers",
     "label": "Show Line Numbers",
     "caption": "",
-    "shortcuts": [
-      "Shift L"
-    ]
+    "shortcuts": []
   },
   {
     "id": "notebook:toggle-autoclosing-brackets",

galata/test/documentation/customization.test.ts

@@ -10,6 +10,9 @@ test.use({
   viewport: { height: 720, width: 1280 }
 });
 
+// Use serial mode to avoid flaky screenshots
+test.describe.configure({ mode: 'serial' });
+
 test.describe('Default', () => {
   test('should use default layout', async ({ page }) => {
     await galata.Mock.freezeContentLastModified(page);

galata/test/documentation/data/tree_fixture.txt

@@ -0,0 +1,37 @@
+$ tree . -L 2
+.
+├── LICENSE
+├── README.md
+├── data
+│   ├── 1024px-Hubble_Interacting_Galaxy_AM_0500-620_(2008-04-24).jpg
+│   ├── Dockerfile
+│   ├── Museums_in_DC.geojson
+│   ├── README.md
+│   ├── bar.vl.json
+│   ├── iris.csv
+│   ├── japan_meterological_agency_201707211555.json
+│   └── zika_assembled_genomes.fasta
+├── jupyter_notebook_config.py
+├── narrative
+│   ├── QConAI.md
+│   ├── jupyterlab.md
+│   ├── markdown_python.md
+│   └── scipy2017.md
+├── notebooks
+│   ├── Cpp.ipynb
+│   ├── Data.ipynb
+│   ├── Fasta.ipynb
+│   ├── Julia.ipynb
+│   ├── Lorenz.ipynb
+│   ├── R.ipynb
+│   ├── audio
+│   ├── images
+│   └── lorenz.py
+├── slides
+│   ├── jupyterlab-slides.key
+│   ├── jupyterlab-slides.pdf
+│   └── jupyterlab-slides_scipy19.pdf
+├── talks.yml
+└── tasks.py
+
+6 directories, 27 files

galata/test/documentation/general.test.ts

@@ -2,6 +2,7 @@
 // Distributed under the terms of the Modified BSD License.
 
 import { expect, galata, test } from '@jupyterlab/galata';
+import path from 'path';
 import {
   generateArrow,
   positionMouse,
@@ -79,13 +80,6 @@ test.describe('General', () => {
     expect(await page.screenshot()).toMatchSnapshot('jupyterlab.png');
   });
 
-  test('Overview', async ({ page }) => {
-    await galata.Mock.freezeContentLastModified(page);
-    await openOverview(page);
-
-    expect(await page.screenshot()).toMatchSnapshot('interface_jupyterlab.png');
-  });
-
   test('Left Sidebar', async ({ page }) => {
     await galata.Mock.freezeContentLastModified(page);
     await page.goto();
@@ -98,6 +92,8 @@ test.describe('General', () => {
     await setSidebarWidth(page);
 
     await page.dblclick('[aria-label="File Browser Section"] >> text=data');
+    // Wait for the `data` folder to load to have something to blur
+    await page.waitForSelector('text=1024px');
 
     await page.evaluate(() => {
       (document.activeElement as HTMLElement).blur();
@@ -228,32 +224,6 @@ test.describe('General', () => {
     );
   });
 
-  test('Open tabs', async ({ page }) => {
-    await openOverview(page);
-
-    await page.click('[title="Running Terminals and Kernels"]');
-
-    await page
-      .locator(
-        '.jp-RunningSessions-item.jp-mod-kernel >> text="Python 3 (ipykernel)"'
-      )
-      .waitFor();
-    expect(
-      await page.screenshot({ clip: { y: 27, x: 0, width: 283, height: 400 } })
-    ).toMatchSnapshot('interface_tabs.png');
-  });
-
-  test('Tabs menu', async ({ page }) => {
-    await galata.Mock.freezeContentLastModified(page);
-    await openOverview(page);
-
-    await page.click('text="Tabs"');
-
-    expect(
-      await page.screenshot({ clip: { y: 0, x: 210, width: 700, height: 350 } })
-    ).toMatchSnapshot('interface_tabs_menu.png');
-  });
-
   test('File menu', async ({ page }) => {
     await page.goto();
     await page.addStyleTag({
@@ -532,8 +502,13 @@ test.describe('General', () => {
     );
   });
 
-  test('Terminals', async ({ page }) => {
+  test('Terminal layout', async ({ page, tmpPath }) => {
     await galata.Mock.freezeContentLastModified(page);
+    const fileName = 'tree_fixture.txt';
+    await page.contents.uploadFile(
+      path.resolve(__dirname, `./data/${fileName}`),
+      `${tmpPath}/${fileName}`
+    );
     await page.goto();
     await page.addStyleTag({
       content: `.jp-LabShell.jp-mod-devMode {
@@ -559,7 +534,7 @@ test.describe('General', () => {
 
     await page.keyboard.type('cd $JUPYTERLAB_GALATA_ROOT_DIR');
     await page.keyboard.press('Enter');
-    await page.keyboard.type('tree . -L 2');
+    await page.keyboard.type(`clear && cat ${tmpPath}/${fileName}`);
     await page.keyboard.press('Enter');
 
     // Wait for command answer
@@ -634,6 +609,7 @@ test.describe('General', () => {
 
     await setSidebarWidth(page);
 
+    await page.dblclick('[aria-label="File Browser Section"] >> text=data');
     await page.click('text=README.md', {
       button: 'right'
     });
@@ -710,67 +686,3 @@ test.describe('General', () => {
     });
   });
 });
-
-async function openOverview(page) {
-  await page.goto();
-  await page.addStyleTag({
-    content: `.jp-LabShell.jp-mod-devMode {
-      border-top: none;
-    }`
-  });
-
-  await setSidebarWidth(page);
-
-  // Open Data.ipynb
-  await page.dblclick('[aria-label="File Browser Section"] >> text=notebooks');
-  await page.dblclick('text=Data.ipynb');
-
-  // Back home
-  await page.click('.jp-BreadCrumbs-home svg');
-
-  // Open jupyterlab.md
-  await page.dblclick('[aria-label="File Browser Section"] >> text=narrative');
-  await page.click('text=jupyterlab.md', {
-    button: 'right'
-  });
-  await page.click('text=Open With');
-  await page.click('text=Markdown Preview');
-
-  // Back home
-  await page.click('.jp-BreadCrumbs-home svg');
-
-  // Open bar.vl.json
-  await page.dblclick('[aria-label="File Browser Section"] >> text=data');
-  await page.dblclick('text=bar.vl.json');
-  await page.dblclick(
-    'text=1024px-Hubble_Interacting_Galaxy_AM_0500-620_(2008-04-24).jpg'
-  );
-
-  // Move notebook panel
-  const notebookHandle = await page.$('div[role="main"] >> text=Data.ipynb');
-  await notebookHandle.click();
-  const notebookBBox = await notebookHandle.boundingBox();
-
-  await page.mouse.move(
-    notebookBBox.x + 0.5 * notebookBBox.width,
-    notebookBBox.y + 0.5 * notebookBBox.height
-  );
-  await page.mouse.down();
-  await page.mouse.move(notebookBBox.x + 0.5 * notebookBBox.width, 350);
-  await page.mouse.up();
-
-  // Move md panel
-  const mdHandle = await page.$('div[role="main"] >> text=jupyterlab.md');
-  await mdHandle.click();
-  const mdBBox = await mdHandle.boundingBox();
-  const panelHandle = await page.activity.getPanel();
-  const panelBBox = await panelHandle.boundingBox();
-
-  await page.mouse.move(
-    mdBBox.x + 0.5 * mdBBox.width,
-    mdBBox.y + 0.5 * mdBBox.height
-  );
-  await page.mouse.down();
-  await page.mouse.move(panelBBox.x + 0.5 * panelBBox.width, 200);
-  await page.mouse.up();
-}

galata/test/documentation/internationalization.test.ts

@@ -44,6 +44,8 @@ test.describe('Internationalization', () => {
     await galata.Mock.freezeContentLastModified(page);
     await page.goto();
 
+    await page.dblclick('[aria-label="File Browser Section"] >> text=data');
+
     await page.click('text=Settings');
     await page.click('.lm-Menu ul[role="menu"] >> text=Language');
     await page.click('#jp-mainmenu-settings-language >> text=Chinese');

galata/test/documentation/overview.test.ts

@@ -0,0 +1,113 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { expect, galata, test } from '@jupyterlab/galata';
+import { setSidebarWidth } from './utils';
+
+test.use({
+  autoGoto: false,
+  mockState: galata.DEFAULT_DOCUMENTATION_STATE,
+  viewport: { height: 720, width: 1280 }
+});
+
+// Use serial mode to avoid flaky screenshots
+test.describe.configure({ mode: 'serial' });
+
+test.describe('Overview', () => {
+  test('Overview', async ({ page }) => {
+    await galata.Mock.freezeContentLastModified(page);
+    await openOverview(page);
+
+    expect(await page.screenshot()).toMatchSnapshot('interface_jupyterlab.png');
+  });
+
+  test('Open tabs', async ({ page }) => {
+    await openOverview(page);
+
+    await page.click('[title="Running Terminals and Kernels"]');
+
+    await page
+      .locator(
+        '.jp-RunningSessions-item.jp-mod-kernel >> text="Python 3 (ipykernel)"'
+      )
+      .waitFor();
+    expect(
+      await page.screenshot({ clip: { y: 27, x: 0, width: 283, height: 400 } })
+    ).toMatchSnapshot('interface_tabs.png');
+  });
+
+  test('Tabs menu', async ({ page }) => {
+    await galata.Mock.freezeContentLastModified(page);
+    await openOverview(page);
+
+    await page.click('text="Tabs"');
+
+    expect(
+      await page.screenshot({ clip: { y: 0, x: 210, width: 700, height: 350 } })
+    ).toMatchSnapshot('interface_tabs_menu.png');
+  });
+});
+
+async function openOverview(page) {
+  await page.goto();
+  await page.addStyleTag({
+    content: `.jp-LabShell.jp-mod-devMode {
+      border-top: none;
+    }`
+  });
+
+  await setSidebarWidth(page);
+
+  // Open Data.ipynb
+  await page.dblclick('[aria-label="File Browser Section"] >> text=notebooks');
+  await page.dblclick('text=Data.ipynb');
+
+  // Back home
+  await page.click('.jp-BreadCrumbs-home svg');
+
+  // Open jupyterlab.md
+  await page.dblclick('[aria-label="File Browser Section"] >> text=narrative');
+  await page.click('text=jupyterlab.md', {
+    button: 'right'
+  });
+  await page.click('text=Open With');
+  await page.click('text=Markdown Preview');
+
+  // Back home
+  await page.click('.jp-BreadCrumbs-home svg');
+
+  // Open bar.vl.json
+  await page.dblclick('[aria-label="File Browser Section"] >> text=data');
+  await page.dblclick('text=bar.vl.json');
+  await page.dblclick(
+    'text=1024px-Hubble_Interacting_Galaxy_AM_0500-620_(2008-04-24).jpg'
+  );
+
+  // Move notebook panel
+  const notebookHandle = await page.$('div[role="main"] >> text=Data.ipynb');
+  await notebookHandle.click();
+  const notebookBBox = await notebookHandle.boundingBox();
+
+  await page.mouse.move(
+    notebookBBox.x + 0.5 * notebookBBox.width,
+    notebookBBox.y + 0.5 * notebookBBox.height
+  );
+  await page.mouse.down();
+  await page.mouse.move(notebookBBox.x + 0.5 * notebookBBox.width, 350);
+  await page.mouse.up();
+
+  // Move md panel
+  const mdHandle = await page.$('div[role="main"] >> text=jupyterlab.md');
+  await mdHandle.click();
+  const mdBBox = await mdHandle.boundingBox();
+  const panelHandle = await page.activity.getPanel();
+  const panelBBox = await panelHandle.boundingBox();
+
+  await page.mouse.move(
+    mdBBox.x + 0.5 * mdBBox.width,
+    mdBBox.y + 0.5 * mdBBox.height
+  );
+  await page.mouse.down();
+  await page.mouse.move(panelBBox.x + 0.5 * panelBBox.width, 200);
+  await page.mouse.up();
+}