Merge pull request #266 from martinRenou/add_ui_tests

Add ui tests

Author: martinRenou

.eslintignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+coverage
+**/*.d.ts
+ui-tests
+docs

.eslintrc.js

@@ -0,0 +1,39 @@
+module.exports = {
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended'
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: 'tsconfig.json',
+    sourceType: 'module'
+  },
+  plugins: ['@typescript-eslint'],
+  rules: {
+    '@typescript-eslint/naming-convention': [
+      'error',
+      {
+        selector: 'interface',
+        format: ['PascalCase'],
+        custom: {
+          regex: '^I[A-Z]',
+          match: true
+        }
+      }
+    ],
+    '@typescript-eslint/no-unused-vars': ['warn', { args: 'none' }],
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-namespace': 'off',
+    '@typescript-eslint/no-use-before-define': 'off',
+    '@typescript-eslint/quotes': [
+      'error',
+      'single',
+      { avoidEscape: true, allowTemplateLiterals: false }
+    ],
+    curly: ['error', 'all'],
+    eqeqeq: 'error',
+    'prefer-arrow-callback': 'error'
+  }
+};

.github/workflows/main.yml

@@ -13,7 +13,7 @@ defaults:
     shell: bash -l {0}
 
 jobs:
-  run:
+  lint:
     runs-on: ${{ matrix.os }}
 
     strategy:
@@ -36,22 +36,6 @@ jobs:
         auto-activate-base: false
         channels: conda-forge
 
-    - name: Install ipycanvas
-      run: pip install -e .
-
-    - name: Check installation files
-      run: |
-        test -d $CONDA_PREFIX/share/jupyter/nbextensions/ipycanvas
-        test -f $CONDA_PREFIX/share/jupyter/nbextensions/ipycanvas/extension.js
-        test -f $CONDA_PREFIX/share/jupyter/nbextensions/ipycanvas/index.js
-        test -d $CONDA_PREFIX/share/jupyter/labextensions/ipycanvas
-        test -f $CONDA_PREFIX/share/jupyter/labextensions/ipycanvas/package.json
-
-    - name: Check nbextension and labextension
-      run: |
-        jupyter nbextension list 2>&1 | grep -ie "ipycanvas/extension.*enabled" -
-        jupyter labextension list 2>&1 | grep -ie "ipycanvas.*enabled.*ok" -
-
     - name: Test PEP8
       run: black --check ipycanvas
 
@@ -87,18 +71,16 @@ jobs:
         name: dist ${{ github.run_number }}
         path: ./dist
 
-  install:
+  tests:
     runs-on: ${{ matrix.os }}-latest
     needs: [build]
 
     strategy:
       fail-fast: false
       matrix:
-        os: [ubuntu, macos]
-        python: ['3.7', '3.10']
+        os: [ubuntu]
+        python: ['3.10']
         include:
-          - python: '3.7'
-            dist: 'ipycanvas*.tar.gz'
           - python: '3.10'
             dist: 'ipycanvas*.whl'
 
@@ -142,3 +124,32 @@ jobs:
 
       - name: Validate the labextension
         run: jupyter labextension list 2>&1 | grep ipycanvas
+
+      - name: Install Galata
+        run: |
+          yarn install
+          yarn playwright install chromium
+        working-directory: ui-tests
+
+      - name: Launch JupyterLab
+        run: yarn run start:detached
+        working-directory: ui-tests
+
+      - name: Wait for JupyterLab
+        uses: ifaxity/wait-on-action@v1
+        with:
+          resource: http-get://localhost:8888/api
+          timeout: 20000
+
+      - name: Run UI Tests
+        run: yarn run test
+        working-directory: ui-tests
+
+      - name: Upload UI Test artifacts
+        if: always()
+        uses: actions/upload-artifact@v2
+        with:
+          name: ui-test-output
+          path: |
+            ui-tests/playwright-report
+            ui-tests/test-results

.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

.prettierignore

@@ -0,0 +1,8 @@
+node_modules
+dist
+**/node_modules
+**/lib
+**/package.json
+ui-tests
+ipycanvas
+docs

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "none",
+  "arrowParens": "avoid",
+  "endOfLine": "auto"
+}

README.md

@@ -26,7 +26,6 @@ If you have any question, or if you want to share what you do with ipycanvas, [s
 
 Or join the gitter channel: [![Join the chat at https://gitter.im/martinRenou/ipycanvas](https://badges.gitter.im/martinRenou/ipycanvas.svg)](https://gitter.im/martinRenou/ipycanvas?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
-
 ## Installation
 
 You can install using `pip`:
@@ -48,24 +47,30 @@ conda install -c conda-forge yarn
 jupyter labextension install @jupyter-widgets/jupyterlab-manager ipycanvas
 ```
 
- A development installation guide, can be found [here](https://ipycanvas.readthedocs.io/en/latest/installation.html#development-installation)
+A development installation guide, can be found [here](https://ipycanvas.readthedocs.io/en/latest/installation.html#development-installation)
 
 ## Examples
 
 ### Create John Conway's Game Of Life
+
 ![John Conway's Game Of Life](docs/source/images/ipycanvas_gameoflife.png)
 
 ### Give a "hand-drawn" style to your drawings using the RoughCanvas
+
 ![RoughCanvas](docs/source/images/ipycanvas_rough.png)
 
 ### Draw Particles from IPython
+
 ![Particles](docs/source/images/ipycanvas_particles.png)
 
 ### Custom Sprites
+
 ![Sprites](docs/source/images/ipycanvas_sprites.png)
 
 ### Draw data directly from a NumPy array
+
 ![NumPy](docs/source/images/ipycanvas_binary.png)
 
 ### Create your own plotting library **fully** in Python
+
 ![Plotting](docs/source/images/ipycanvas_scatter.png)

dev-environment.yml

@@ -11,4 +11,4 @@ dependencies:
     - wheel
     - twine
     - jupytext
-    - black=22.1.0
+    - black

package.json

@@ -39,6 +39,11 @@
     "clean:lib": "rimraf lib",
     "clean:nbextension": "rimraf ipycanvas/nbextension/static/index.js",
     "clean:labextension": "rimraf ipycanvas/labextension",
+    "lint": "yarn prettier && yarn eslint",
+    "lint:check": "yarn prettier:check && yarn eslint:check",
+    "prettier": "yarn prettier:base --write --list-different",
+    "prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
+    "prettier:check": "yarn prettier:base --check",
     "prepack": "yarn run build",
     "watch:lib": "tsc -w",
     "watch:nbextension": "webpack --watch"
@@ -55,10 +60,16 @@
     "@phosphor/widgets": "^1.6.0",
     "@types/node": "^10.11.6",
     "@types/webpack-env": "^1.13.6",
+    "@typescript-eslint/eslint-plugin": "^4.8.1",
+    "@typescript-eslint/parser": "^4.8.1",
     "acorn": "^6.2.0",
+    "eslint": "^7.3.1",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-prettier": "^3.1.4",
     "expect.js": "^0.3.1",
     "fs-extra": "^7.0.0",
     "mkdirp": "^0.5.1",
+    "prettier": "^2.0.5",
     "rimraf": "^2.6.2",
     "source-map-loader": "^0.2.4",
     "ts-loader": "^5.2.1",

src/extension.ts

@@ -8,6 +8,8 @@
 // Some static assets may be required by the custom widget javascript. The base
 // url for the notebook is not known at build time and is therefore computed
 // dynamically.
-(window as any).__webpack_public_path__ = document.querySelector('body')!.getAttribute('data-base-url') + 'nbextensions/ipycanvas';
+(window as any).__webpack_public_path__ =
+  document.querySelector('body')!.getAttribute('data-base-url') +
+  'nbextensions/ipycanvas';
 
 export * from './index';