Setup playwright integration suite

Co-authored-by: Frédéric Collonval <[email protected]>

Author: navn-r

.github/workflows/build.yml

@@ -4,27 +4,27 @@ on:
   push:
     branches: master
   pull_request:
-    branches: "*"
+    branches: '*'
 
 jobs:
   test-3x:
     name: Test Python ${{ matrix.python-version }}
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        python-version: ["3.6", "3.7", "3.8", "3.9"]
+        python-version: ['3.6', '3.7', '3.8', '3.9']
     steps:
       - name: Checkout
         uses: actions/checkout@v2
       - name: Install node
         uses: actions/setup-node@v1
         with:
-          node-version: "12.x"
+          node-version: '12.x'
       - name: Setup Python ${{ matrix.python-version }}
         uses: actions/setup-python@v2
         with:
           python-version: ${{ matrix.python-version }}
-          architecture: "x64"
+          architecture: 'x64'
 
       - name: Get pip cache dir
         id: pip-cache
@@ -59,7 +59,7 @@ jobs:
             ${{ runner.os }}-yarn-
 
       - name: Install dependencies
-        run: python -m pip install -U jupyter_packaging~=0.7.9 jupyterlab~=3.0 pip wheel
+        run: python -m pip install -U jupyter_packaging~=0.7.9 jupyterlab~=3.0 pip wheel build
       - name: Test the extension
         run: |
           jlpm
@@ -84,3 +84,48 @@ jobs:
           python -m jupyterlab.browser_check
           # Run our extension-specific browser integration test
           # python tests/test-browser/run_browser_test.py
+
+      - uses: actions/upload-artifact@v2
+        if: matrix.python-version == '3.9'
+        with:
+          name: extension
+          path: |
+            jupyterlab_git
+            jupyter-config
+
+  ui-test:
+    name: Integration tests
+    runs-on: ubuntu-latest
+
+    needs: test-3x
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - uses: actions/download-artifact@v2
+        with:
+          name: extension
+
+      - name: UI tests
+        run: |
+          docker-compose -f ./docker/docker-compose.yml down || true
+          docker-compose -f ./docker/docker-compose.yml pull -q || true
+          docker-compose -f ./docker/docker-compose.yml build
+          docker-compose -f ./docker/docker-compose.yml run --rm e2e
+        working-directory: ui-tests
+
+      - name: Upload UI Test artifacts
+        if: always()
+        uses: actions/upload-artifact@v2
+        with:
+          name: ui-test-output
+          path: |
+            ui-tests/test-results
+
+      - name: Stop containers
+        if: always()
+        run: |
+          # Print jupyterlab logs before removing the containers using the container name set in docker-compose file
+          docker logs jupyterlab
+          docker-compose -f ./docker/docker-compose.yml down
+        working-directory: ui-tests

.gitignore

@@ -135,3 +135,7 @@ dmypy.json
 *.swp
 
 src/version.ts
+
+# Integration tests
+ui-tests/node_modules/
+ui-tests/test-results/

examples/textfile.txt

@@ -0,0 +1,35 @@
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin luctus nec arcu quis accumsan. Vivamus facilisis egestas commodo.
+Aenean mollis sodales auctor. Vestibulum fermentum feugiat dui efficitur porttitor. Maecenas id lectus velit. Phasellus vel 
+quam faucibus, tristique velit vitae, laoreet dui. Vivamus id eros finibus, dictum risus eu, placerat lectus. Suspendisse 
+potenti. Proin fermentum, magna sed finibus rutrum, felis enim sollicitudin felis, at condimentum urna elit vel velit. Class 
+aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec et massa sed dolor ornare suscipit. 
+Vivamus hendrerit turpis ligula, blandit tincidunt metus volutpat eu. Nulla tellus ligula, tempus et purus dapibus, molestie 
+blandit ex. Donec convallis magna magna, eu iaculis ex venenatis in. Nam at convallis dolor. Aliquam erat volutpat.
+
+Fusce varius lectus vitae tellus mollis ultrices. Ut id gravida ipsum. Vivamus eleifend felis in aliquet pellentesque. Nullam 
+vitae placerat lacus. Proin accumsan, massa eget mollis convallis, justo augue dapibus leo, at luctus velit elit nec ipsum. Ut 
+eros nisi, iaculis in lorem vel, fermentum hendrerit magna. Orci varius natoque penatibus et magnis dis parturient montes, 
+nascetur ridiculus mus. Etiam non faucibus eros. Aenean nisl massa, facilisis ac quam in, elementum consectetur risus. Maecenas 
+sagittis rhoncus orci at egestas.
+
+Vivamus nec odio ac libero porttitor mattis. Morbi ac tincidunt velit, a aliquet ipsum. Etiam a aliquet massa. In dapibus, 
+ex malesuada aliquam dictum, enim ante suscipit est, in tempus tortor felis sed nunc. Vestibulum ante ipsum primis in faucibus 
+orci luctus et ultrices posuere cubilia curae; Phasellus sodales sit amet justo gravida sagittis. Pellentesque habitant morbi 
+tristique senectus et netus et malesuada fames ac turpis egestas. Ut vulputate facilisis felis, ac scelerisque tortor 
+condimentum sed. Nulla ut consequat risus. Aenean volutpat facilisis luctus. Phasellus at egestas sapien, in blandit dolor. 
+Vestibulum commodo ligula ut orci rhoncus, eu cursus diam luctus. Pellentesque at accumsan tortor, non tempor nunc. Phasellus 
+ultricies consequat libero, quis tempus mauris auctor quis. Fusce bibendum augue sed augue sollicitudin, eu volutpat turpis 
+vestibulum. Proin auctor aliquam nisi a dapibus.
+
+Nam eget finibus elit. Cras in sapien ante. Curabitur facilisis interdum ligula, ut molestie orci molestie sit amet. Etiam 
+euismod rhoncus velit, sit amet tempor magna egestas quis. In sed nunc porta, tincidunt risus ornare, elementum lorem. Class 
+aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed quis velit ac leo eleifend efficitur 
+at id velit. In et ante tempus, sollicitudin dui at, euismod est. Aenean eleifend scelerisque turpis, id egestas turpis dictum 
+nec.
+
+Praesent luctus, neque et egestas hendrerit, lorem sapien varius lacus, sit amet tincidunt nisi orci quis lacus. Pellentesque 
+suscipit accumsan mi vel convallis. Fusce ullamcorper scelerisque augue id sollicitudin. Curabitur tempus nec diam in 
+pellentesque. Maecenas suscipit ex id facilisis posuere. Proin rutrum blandit leo. Donec bibendum velit vel ipsum mattis rutrum.
+Nulla eu enim vel neque ultricies hendrerit eget sed turpis. Mauris efficitur lectus id mi sollicitudin, ultricies tempor 
+tellus molestie. Phasellus mollis odio risus, ut fringilla tellus eleifend ac. Interdum et malesuada fames ac ante ipsum 
+primis in faucibus. Nulla eu neque consequat sem aliquam semper quis eget arcu. 

tests/test-browser/chrome-test.js

@@ -0,0 +1,116 @@
+# Test
+
+The test will produce a video to help debugging and check what happened.
+
+To execute integration tests, you have two options:
+
+- use docker-compose (cons: needs to know and use docker) - this is a more reliable solution.
+- run tests locally (cons: will interact with your JupyterLab user settings)
+
+## Test on docker
+
+1. Compile the extension:
+
+```
+jlpm install
+```
+
+2. Execute the docker stack in the ui-tests folder:
+
+```
+docker-compose -f ./docker/docker-compose.yml build --no-cache
+docker-compose -f ./docker/docker-compose.yml run --rm e2e
+docker-compose -f ./docker/docker-compose.yml down
+```
+
+## Test locally
+
+1. Compile the extension:
+
+```
+jlpm install
+jlpm run build:prod
+```
+
+2. Start JupyterLab _with the extension installed_ without any token or password
+
+```
+jupyter lab --ServerApp.token= --ServerApp.password=
+```
+
+3. Execute in another console the [Playwright](https://playwright.dev/docs/intro) tests:
+
+```
+cd ui-tests
+jlpm install
+npx playwright install
+npx playwright test
+```
+
+# Create tests
+
+To create tests, the easiest way is to use the code generator tool of playwright:
+
+1. Compile the extension:
+
+```
+jlpm install
+jlpm run build:prod
+```
+
+2. Start JupyterLab _with the extension installed_ without any token or password:
+
+**Using docker**
+
+```
+docker-compose -f ./docker/docker-compose.yml run --rm -p 8888:8888 lab
+```
+
+**Using local installation**
+
+```
+jupyter lab --ServerApp.token= --ServerApp.password=
+```
+
+3. Launch the code generator tool:
+
+```
+cd ui-tests
+jlpm install
+npx playwright install
+npx playwright codegen localhost:8888
+```
+
+# Debug tests
+
+To debug tests, a good way is to use the inspector tool of playwright:
+
+1. Compile the extension:
+
+```
+jlpm install
+jlpm run build:prod
+```
+
+2. Start JupyterLab _with the extension installed_ without any token or password:
+
+**Using docker**
+
+```
+docker-compose -f ./docker/docker-compose.yml run --rm -p 8888:8888 lab
+```
+
+**Using local installation**
+
+```
+jupyter lab --ServerApp.token= --ServerApp.password=
+```
+
+3. Launch the debug tool:
+
+```
+cd ui-tests
+jlpm install
+npx playwright install
+PWDEBUG=1 npx playwright test
+```

tests/test-browser/run_browser_test.py

@@ -0,0 +1,12 @@
+# Use base jupyter image that comes with jupyterlab
+FROM jupyter/base-notebook
+
+USER root
+
+# Upgrade JupyterLab
+RUN mamba install -c conda-forge -y git jupyterlab nbdime 
+
+# ADD --chown=1000:1000 examples /home/jovyan/work/
+ADD --chown=1000:1000 merge-repo.tar.xz /home/jovyan/work
+
+USER 1000