Playwright end to end test for the preview extension

.github/workflows/build.yml

@@ -30,7 +30,7 @@ jobs:
 
     - name: Install Dependencies
       run: |
-        python -m pip install -U pip jupyterlab~=3.0 jupyter_packaging~=0.7.9
+        python -m pip install -U pip jupyterlab~=3.0 jupyter_packaging~=0.7.9 ipywidgets~=7.6
 
     - name: Install the Voilà Preview JupyterLab extension
       run: |
@@ -51,3 +51,17 @@ jobs:
         jlpm
         jlpm run eslint:check
         jlpm run prettier:check
+
+    - uses: microsoft/playwright-github-action@v1
+
+    - name: Test
+      run: |
+        cd packages/jupyterlab-preview
+        jlpm run build:test
+        jlpm run test:ci
+
+    - uses: actions/upload-artifact@v2
+      if: ${{ always() }}
+      with:
+        name: test-artifacts
+        path: packages/jupyterlab-preview/artifacts

.gitignore

@@ -36,3 +36,6 @@ lib
 
 voila/labextension
 tsconfig.tsbuildinfo
+
+packages/jupyterlab-preview/artifacts
+junit.xml

packages/jupyterlab-preview/babel.config.js

@@ -0,0 +1 @@
+module.exports = require('@jupyterlab/testutils/lib/babel.config');

packages/jupyterlab-preview/jest.config.js

@@ -0,0 +1,22 @@
+const func = require('@jupyterlab/testutils/lib/jest-config');
+const upstream = func(__dirname);
+
+let local = {
+  preset: 'ts-jest/presets/js-with-babel',
+  transformIgnorePatterns: ['/node_modules/(?!(@jupyterlab/.*)/)'],
+  globals: {
+    'ts-jest': {
+      tsconfig: './tsconfig.test.json'
+    }
+  },
+  transform: {
+    '\\.(ts|tsx)?$': 'ts-jest',
+    '\\.svg$': 'jest-raw-loader'
+  }
+};
+
+Object.keys(local).forEach(option => {
+  upstream[option] = local[option];
+});
+
+module.exports = upstream;

packages/jupyterlab-preview/package.json

@@ -42,7 +42,9 @@
     "clean:labextension": "rimraf ../../voila/labextension",
     "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
     "prepare": "jlpm run clean && jlpm run build:prod",
+    "start": "jupyter lab --config ./test/jupyter_server_config.py --no-browser",
     "test": "jest",
+    "test:ci": "(jlpm run start&) && jlpm run test",
     "watch": "run-p watch:src watch:labextension",
     "watch:labextension": "jupyter labextension watch .",
     "watch:src": "tsc -w"
@@ -66,9 +68,13 @@
     "@babel/preset-env": "^7.10.2",
     "@jupyterlab/builder": "^3.0.0",
     "@jupyterlab/testutils": "^3.0.0",
+    "@types/jest": "^26.0.10",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "jest": "^26.4.2",
+    "playwright": "^1.8.0",
     "rimraf": "^2.6.1",
+    "ts-jest": "^26.3.0",
     "typescript": "~4.1.3"
   },
   "jupyterlab": {

packages/jupyterlab-preview/test/jupyter_server_config.py

@@ -0,0 +1,5 @@
+c.ServerApp.port = 8889
+c.ServerApp.token = ""
+c.ServerApp.password = ""
+c.ServerApp.disable_check_xsrf = True
+c.ServerApp.open_browser = False

packages/jupyterlab-preview/test/smoke.spec.ts

@@ -0,0 +1,76 @@
+import { firefox, Browser, BrowserContext } from 'playwright';
+
+describe('Smoke', () => {
+  let browser: Browser;
+  let context: BrowserContext;
+
+  beforeAll(async () => {
+    jest.setTimeout(200000);
+    browser = await firefox.launch({ slowMo: 1000 });
+    context = await browser.newContext({
+      recordVideo: { dir: 'artifacts/videos/' }
+    });
+  });
+
+  afterAll(async () => {
+    await context.close();
+    await browser.close();
+  });
+
+  describe('Open the preview', () => {
+    it('should open the Voila preview', async () => {
+      // Open new page
+      const page = await context.newPage();
+
+      await page.goto('http://localhost:8889/lab/workspaces/lab?reset');
+
+      // Create a new Python notebook
+      await Promise.all([
+        page.waitForNavigation(),
+        page.click(
+          "//div[normalize-space(.)='Python 3' and normalize-space(@title)='Python 3']/div[1]"
+        )
+      ]);
+
+      // Enter code in the first cell
+      await page.click('pre[role="presentation"]');
+      await page.fill('//textarea', 'from ipywidgets import IntSlider');
+      await page.press('//textarea', 'Enter');
+      await page.press('//textarea', 'Enter');
+      await page.fill('//textarea', 'slider = IntSlider()');
+      await page.press('//textarea', 'Enter');
+      await page.fill('//textarea', 'slider');
+
+      // Run the cell
+      await page.click(
+        "//button[normalize-space(@title)='Run the selected cells and advance']"
+      );
+
+      // Move the slider
+      await page.click(
+        "//div[2]/div/div[2]/div[normalize-space(.)='0']/div[1]"
+      );
+
+      // Open the Voila preview
+      await page.click("//button[normalize-space(@title)='Render with Voilà']");
+
+      // Wait a little bit
+      await page.waitForTimeout(3000);
+
+      // Reload the preview
+      await page.click("//button[normalize-space(@title)='Reload Preview']");
+
+      // Wait a little bit
+      await page.waitForTimeout(3000);
+
+      // Close page
+      await page.close();
+
+      // ---------------------
+      await context.close();
+      await browser.close();
+
+      expect(true).toBe(true);
+    });
+  });
+});

packages/jupyterlab-preview/tsconfig.test.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfigbase.test",
+  "include": ["test/**/*"]
+}

tsconfigbase.test.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "noEmitOnError": true,
+    "noUnusedLocals": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "target": "es2015",
+    "lib": [
+      "es2015",
+      "es2015.collection",
+      "dom",
+      "es2015.iterable",
+      "es2017.object"
+    ],
+    "types": ["jest"],
+    "jsx": "react",
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  }
+}