Add jest and playwright testing

Fixes jupyterlab#137

.github/workflows/check-tests.yml

@@ -0,0 +1,77 @@
+name: Tests validation
+
+on:
+  push:
+    branches: ["*.0"]
+  pull_request:
+    branches: "*"
+  schedule:
+    - cron: "0 0 * * *"
+
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Base Setup
+        uses: jupyterlab/maintainer-tools/.github/actions/base-setup@v1
+
+      - name: Install dependencies
+        run: python -m pip install -U cookiecutter check-manifest jupyterlab~=3.1
+
+      - name: Create the extension
+        run: |
+          set -eux
+          # Trick to use custom parameters
+          python -m cookiecutter --no-input .
+          
+      - name: Test the extension
+        run: |
+          set -eux
+          jlpm
+          jlpm test
+
+      - name: Install the extension
+        working-directory: myextension
+        run: |
+          set -eux
+          python -m pip install .
+
+      - name: Launch JupyterLab
+        working-directory: myextension
+        run: |
+          jupyter lab --config jupyter_server_test_config.py 2>&1 > /tmp/jupyterlab_server.log &
+
+      - name: Install browser
+        working-directory: myextension
+        run: |
+          jlpm playwright install chromium
+
+      - name: Wait for JupyterLab
+        uses: ifaxity/wait-on-action@v1
+        with:
+          resource: http-get://localhost:8888/lab
+          timeout: 360000
+
+      - name: Execute integration tests
+        working-directory: myextension
+        run: |
+          jlpm run playwright test ./ui-tests
+
+      - name: Upload Playwright Test assets
+        if: always()
+        uses: actions/upload-artifact@v2
+        with:
+          name: myextension-playwright-test-assets
+          path: |
+            myextension/test-results
+
+      - name: Upload Playwright Test report
+        if: always()
+        uses: actions/upload-artifact@v2
+        with:
+          name: myextension-playwright-report
+          path: |
+            myextension/playwright-report

{{cookiecutter.python_name}}/.github/workflows/build.yml

@@ -19,11 +19,19 @@ jobs:
     - name: Install dependencies
       run: python -m pip install -U jupyterlab~=3.1 check-manifest
 
-    - name: Build the extension
+    - name: Lint the extension
       run: |
         set -eux
         jlpm
         jlpm lint:check
+    
+    - name: Test the extension
+      run: |
+        set -eux
+        jlpm run test
+
+    - name: Build the extension
+      run: |
         python -m pip install .
 {% if cookiecutter.kind.lower() == 'server' %}
         jupyter server extension list 2>&1 | grep -ie "{{ cookiecutter.python_name }}.*OK"

{{cookiecutter.python_name}}/.github/workflows/integration-tests.yml

@@ -0,0 +1,61 @@
+name: Integration tests
+
+on:
+  push:
+    branches: main
+  pull_request:
+    branches: '*'
+
+jobs:
+  integration-tests:
+    name: Playwright tests
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+
+    - name: Base Setup
+      uses: jupyterlab/maintainer-tools/.github/actions/base-setup@v1
+
+    - name: Install dependencies
+      run: python -m pip install -U jupyterlab~=3.1 check-manifest
+
+    - name: Install the extension
+      run: |
+        set -eux
+        jlpm
+        python -m pip install .
+
+    - name: Launch JupyterLab
+      run: |
+        jupyter lab --config jupyter_server_test_config.py 2>&1 > /tmp/jupyterlab_server.log &
+
+    - name: Install browser
+      run: |
+        jlpm playwright install chromium
+
+    - name: Wait for JupyterLab
+      uses: ifaxity/wait-on-action@v1
+      with:
+        resource: http-get://localhost:8888/lab
+        timeout: 360000
+
+    - name: Execute integration tests
+      run: |
+        jlpm run playwright test ./ui-tests
+
+    - name: Upload Playwright Test assets
+      if: always()
+      uses: actions/upload-artifact@v2
+      with:
+        name: {{ cookiecutter.python_name }}-playwright-test-assets
+        path: |
+          test-results
+
+    - name: Upload Playwright Test report
+      if: always()
+      uses: actions/upload-artifact@v2
+      with:
+        name: {{ cookiecutter.python_name }}-playwright-report
+        path: |
+          playwright-report

{{cookiecutter.python_name}}/babel.config.js

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

{{cookiecutter.python_name}}/jest.config.js

@@ -0,0 +1,42 @@
+const jestJupyterLab = require('@jupyterlab/testutils/lib/jest-config');
+
+const esModules = [
+  '@jupyterlab/',
+  'lib0',
+  'y\\-protocols',
+  'y\\-websocket',
+  'yjs'
+].join('|');
+
+const jlabConfig = jestJupyterLab(__dirname);
+
+const {
+  moduleFileExtensions,
+  moduleNameMapper,
+  preset,
+  setupFilesAfterEnv,
+  setupFiles,
+  testPathIgnorePatterns,
+  transform
+} = jlabConfig;
+
+module.exports = {
+  moduleFileExtensions,
+  moduleNameMapper,
+  preset,
+  setupFilesAfterEnv,
+  setupFiles,
+  testPathIgnorePatterns,
+  transform,
+  automock: false,
+  collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.d.ts'],
+  coverageDirectory: 'coverage',
+  coverageReporters: ['lcov', 'text'],
+  globals: {
+    'ts-jest': {
+      tsconfig: 'tsconfig.json'
+    }
+  },
+  testRegex: 'src/.*/.*.spec.ts[x]?$',
+  transformIgnorePatterns: [`/node_modules/(?!${esModules}).+`]
+};

{{cookiecutter.python_name}}/jupyter_server_test_config.py

@@ -0,0 +1,17 @@
+"""Server configuration for integration tests.
+
+!! Never use this configuration in production because it
+opens the server to the world and provide access to JupyterLab
+JavaScript objects through the global window variable.
+"""
+from tempfile import mkdtemp
+
+c.ServerApp.port = 8888
+c.ServerApp.port_retries = 0
+c.ServerApp.open_browser = False
+
+c.ServerApp.root_dir = mkdtemp(prefix='galata-test-')
+c.ServerApp.token = ""
+c.ServerApp.password = ""
+c.ServerApp.disable_check_xsrf = True
+c.LabApp.expose_app_in_browser = True

{{cookiecutter.python_name}}/package.json

@@ -38,6 +38,7 @@
     "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
     "clean:lintcache": "rimraf .eslintcache .stylelintcache",
     "clean:labextension": "rimraf {{ cookiecutter.python_name }}/labextension",
+<<<<<<< HEAD
     "clean:all": "jlpm clean:lib && jlpm clean:labextension && jlpm clean:lintcache",
     "eslint": "jlpm eslint:check --fix",
     "eslint:check": "eslint . --cache --ext .ts,.tsx",
@@ -49,6 +50,13 @@
     "prettier:check": "jlpm prettier:base --check",
     "stylelint": "jlpm stylelint:check --fix",
     "stylelint:check": "stylelint --cache \"style/**/*.css\"",
+=======
+    "clean:all": "jlpm run clean:lib && jlpm run clean:labextension",
+    "eslint": "eslint . --ext .ts,.tsx --fix",
+    "eslint:check": "eslint . --ext .ts,.tsx",
+    "install:extension": "jlpm run build",
+    "test": "jest --coverage",
+>>>>>>> 8688979 (Add jest and playwright testing)
     "watch": "run-p watch:src watch:labextension",
     "watch:src": "tsc -w",
     "watch:labextension": "jupyter labextension watch ."
@@ -62,12 +70,19 @@
 {% endif %}
   },
   "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
     "@jupyterlab/builder": "^3.1.0",
+    "@jupyterlab/galata": "^4.1.0",
+    "@jupyterlab/testutils": "^3.0.0",
+    "@playwright/test": "^1.17.0",
+    "@types/jest": "^27.0.0",
     "@typescript-eslint/eslint-plugin": "^4.8.1",
     "@typescript-eslint/parser": "^4.8.1",
     "eslint": "^7.14.0",
     "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-prettier": "^3.1.4",{% if cookiecutter.kind.lower() == 'server' %}
+    "eslint-plugin-prettier": "^3.1.4",
+    "jest": "^27.0.0",{% if cookiecutter.kind.lower() == 'server' %}
     "mkdirp": "^1.0.3",{% endif %}
     "npm-run-all": "^4.1.5",
     "prettier": "^2.1.1",
@@ -77,7 +92,8 @@
     "stylelint-config-recommended": "^6.0.0",
     "stylelint-config-standard": "~24.0.0",
     "stylelint-prettier": "^2.0.0",
-    "typescript": "~4.1.3"
+    "typescript": "~4.1.3",
+    "ts-jest": "^27.0.0"
   },
   "sideEffects": [
     "style/*.css"{% if cookiecutter.kind.lower() != 'theme' %},

{{cookiecutter.python_name}}/playwright.config.js

@@ -0,0 +1,4 @@
+/**
+ * Configuration for Playwright using default from @jupyterlab/galata
+ */
+module.exports = require('@jupyterlab/galata/lib/playwright-config');

{{cookiecutter.python_name}}/src/__tests__/{{cookiecutter.python_name}}.spec.ts

@@ -0,0 +1,9 @@
+/**
+ * Example of [Jest](https://jestjs.io/docs/getting-started) unit tests
+ */
+
+describe('{{ cookiecutter.labextension_name }}', () => {
+  it('should be tested', () => {
+    expect(1 + 1).toEqual(2);
+  })
+})

{{cookiecutter.python_name}}/ui-tests/{{cookiecutter.python_name}}.spec.ts

@@ -0,0 +1,22 @@
+import { test } from '@jupyterlab/galata';
+import { expect } from '@playwright/test';
+
+/**
+ * Don't load JupyterLab webpage before running the tests.
+ * This is required to ensure we capture all log messages.
+ */
+test.use({ autoGoto: false })
+
+test('should emit an activation console message', async ({ page }) => {
+  const logs: string[] = [];
+
+  page.on('console', (message) => {
+    logs.push(message.text());
+  });
+
+  await page.goto();
+
+  expect(
+    logs.filter((s) => s === 'JupyterLab extension {{ cookiecutter.labextension_name }} is activated!')
+  ).toHaveLength(1);
+});