Add ui tests

Author: martinRenou

.gitignore

@@ -161,3 +161,7 @@ package-lock.json
 
 # Untitled notebooks
 *Untitled*.ipynb
+
+# UI tests
+ui-tests/tests/notebooks/smoke_texture0.png
+ui-tests/tests/notebooks/smoke_texture1.png

ui-tests/jupyter_server_config.py

@@ -0,0 +1,10 @@
+from tempfile import mkdtemp
+
+c.ServerApp.port = 8888  # noqa: F821
+c.ServerApp.token = ""  # noqa: F821
+c.ServerApp.password = ""  # noqa: F821
+c.ServerApp.disable_check_xsrf = True  # noqa: F821
+c.ServerApp.open_browser = False  # noqa: F821
+c.ServerApp.root_dir = mkdtemp(prefix="galata-test-")  # noqa: F821
+
+c.LabApp.expose_app_in_browser = True  # noqa: F821

ui-tests/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "ipycanvas-ui-tests",
+  "version": "1.0.0",
+  "description": "ipycanvas UI Tests",
+  "private": true,
+  "scripts": {
+    "start": "jupyter lab --config ./jupyter_server_config.py",
+    "start:detached": "yarn run start&",
+    "test": "playwright test",
+    "test:debug": "PWDEBUG=1 playwright test",
+    "test:report": "http-server ./playwright-report -a localhost -o",
+    "test:update": "playwright test --update-snapshots"
+  },
+  "author": "ipycanvas",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@jupyterlab/galata": "~4.0.2",
+    "klaw-sync": "^6.0.0",
+    "rimraf": "^3.0.2"
+  }
+}

ui-tests/playwright.config.js

@@ -0,0 +1,7 @@
+const baseConfig = require('@jupyterlab/galata/lib/playwright-config');
+
+module.exports = {
+  ...baseConfig,
+  timeout: 600000,
+  retries: 1,
+};

ui-tests/tests/ipycanvas.test.ts

@@ -0,0 +1,109 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { IJupyterLabPageFixture, test } from '@jupyterlab/galata';
+import { expect } from '@playwright/test';
+import * as path from 'path';
+const klaw = require('klaw-sync');
+
+
+const filterUpdateNotebooks = item => {
+  const basename = path.basename(item.path);
+  return basename.includes('_update');
+}
+
+const testCellOutputs = async (page: IJupyterLabPageFixture, tmpPath: string) => {
+  const paths = klaw(path.resolve(__dirname, './notebooks'), { filter: item => !filterUpdateNotebooks(item), nodir: true });
+  const notebooks = paths.map(item => path.basename(item.path));
+
+  for (const notebook of notebooks) {
+    let results = [];
+
+    await page.notebook.openByPath(`${tmpPath}/${notebook}`);
+    await page.notebook.activate(notebook);
+
+    let numCellImages = 0;
+
+    const getCaptureImageName = (notebook: string, id: number): string => {
+      return `${notebook}-cell-${id}.png`;
+    };
+
+    await page.notebook.runCellByCell({
+      onAfterCellRun: async (cellIndex: number) => {
+        const cell = await page.notebook.getCellOutput(cellIndex);
+        if (cell) {
+          results.push(await cell.screenshot());
+          numCellImages++;
+        }
+      }
+    });
+
+    await page.notebook.save();
+
+    for (let c = 0; c < numCellImages; ++c) {
+      expect(results[c]).toMatchSnapshot(getCaptureImageName(notebook, c));
+    }
+
+    await page.notebook.close(true);
+  }
+}
+
+const testUpdates = async (page: IJupyterLabPageFixture, tmpPath: string) => {
+  const paths = klaw(path.resolve(__dirname, './notebooks'), { filter: item => filterUpdateNotebooks(item), nodir: true });
+  const notebooks = paths.map(item => path.basename(item.path));
+
+  for (const notebook of notebooks) {
+    let results = [];
+
+    await page.notebook.openByPath(`${tmpPath}/${notebook}`);
+    await page.notebook.activate(notebook);
+
+    const getCaptureImageName = (notebook: string, id: number): string => {
+      return `${notebook}-cell-${id}.png`;
+    };
+
+    let cellCount = 0;
+    await page.notebook.runCellByCell({
+      onAfterCellRun: async (cellIndex: number) => {
+        // Always get first cell output which must contain the plot
+        const cell = await page.notebook.getCellOutput(0);
+        if (cell) {
+          results.push(await cell.screenshot());
+          cellCount++;
+        }
+      }
+    });
+
+    await page.notebook.save();
+
+    for (let i = 0; i < cellCount; i++) {
+      expect(results[i]).toMatchSnapshot(getCaptureImageName(notebook, i));
+    }
+
+    await page.notebook.close(true);
+  }
+};
+
+test.describe('ipycanvas Visual Regression', () => {
+  test.beforeEach(async ({ page, tmpPath }) => {
+    await page.contents.uploadDirectory(
+      path.resolve(__dirname, './notebooks'),
+      tmpPath
+    );
+    await page.filebrowser.openDirectory(tmpPath);
+  });
+
+  test('Check ipycanvas first renders', async ({
+    page,
+    tmpPath,
+  }) => {
+    await testCellOutputs(page, tmpPath);
+  });
+
+  test('Check ipycanvas update', async ({
+    page,
+    tmpPath,
+  }) => {
+    await testUpdates(page, tmpPath);
+  });
+});