Add UI test job

.github/workflows/build.yml

@@ -4,7 +4,7 @@ on:
   push:
     branches: master
   pull_request:
-    branches: '*'
+    branches: "*"
 
 jobs:
   build:
@@ -19,6 +19,7 @@ jobs:
         uses: mamba-org/setup-micromamba@v1
         with:
           environment-name: tljh
+          micromamba-version: "1.5.5-0"
           create-args: >-
             python=3.10
             nodejs=18
@@ -39,7 +40,7 @@ jobs:
 
       - name: Setup yarn cache
         uses: actions/cache@v2
-        id: yarn-cache 
+        id: yarn-cache
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: yarn-${{ hashFiles('frontend/yarn.lock') }}
@@ -50,7 +51,7 @@ jobs:
         shell: bash -l {0}
         run: |
           set -eux
-          pip install build
+          pip install git+https://github.com/jupyterhub/the-littlest-jupyterhub build
           python -m build .
 
       - name: Upload package
@@ -69,8 +70,8 @@ jobs:
       - name: Install Python
         uses: actions/setup-python@v4
         with:
-          python-version: '3.10'
-          architecture: 'x64'
+          python-version: "3.10"
+          architecture: "x64"
 
       - uses: actions/download-artifact@v3
         with:
@@ -87,4 +88,85 @@ jobs:
 
       - name: Test import
         shell: bash -l {0}
-        run: python -c "import tljh_repo2docker"
+        run: python -c "import tljh_repo2docker"
+
+  integration-tests:
+    name: Integration tests
+    needs: build
+    runs-on: ubuntu-latest
+
+    env:
+      PLAYWRIGHT_BROWSERS_PATH: ${{ github.workspace }}/pw-browsers
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install Conda environment with Micromamba
+        uses: mamba-org/setup-micromamba@v1
+        with:
+          micromamba-version: "1.5.5-0"
+          environment-name: tljh
+          create-args: >-
+            python=3.10
+            nodejs=18
+            yarn=3
+
+      - name: Download app package
+        uses: actions/download-artifact@v3
+        with:
+          name: tljh_repo2docker-artifacts
+
+      - name: Install package
+        run: |
+          set -eux
+          # Remove NodeJS, twice to take care of system and locally installed node versions.
+
+          python -m pip install -r dev-requirements.txt
+          python -m pip install tljh_repo2docker*.whl
+          npm -g install configurable-http-proxy
+
+      - name: Install UI test dependencies
+        shell: bash -l {0}
+        working-directory: ui-tests
+        env:
+          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
+        run: yarn install
+
+      - name: Set up browser cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            ${{ github.workspace }}/pw-browsers
+          key: ${{ runner.os }}-${{ hashFiles('ui-tests/yarn.lock') }}
+
+      - name: Install browser
+        shell: bash -l {0}
+        run: npx playwright install chromium
+        working-directory: ui-tests
+
+      - name: Start JupyterHub
+        shell: bash -l {0}
+        run: |
+          python -m jupyterhub -f ./jupyterhub_config.py --debug
+
+      - name: Wait for JupyterHub
+        uses: ifaxity/wait-on-action@v1
+        with:
+          resource: http-get://localhost:8000
+          timeout: 360000
+
+      - name: Execute integration tests
+        shell: bash -l {0}
+        working-directory: ui-tests
+        run: |
+          npx playwright test
+
+      - name: Upload Playwright Test report
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: tljh-playwright-tests
+          path: |
+            ui-tests/test-results
+            ui-tests/playwright-report

.gitignore

@@ -7,8 +7,8 @@ docs/_build
 docs/build
 .ipynb_checkpoints
 jupyterhub_cookie_secret
-jupyterhub.sqlite
-jupyterhub-proxy.pid
+**/jupyterhub.sqlite
+**/jupyterhub-proxy.pid
 *.egg-info
 MANIFEST
 .coverage
@@ -24,4 +24,6 @@ config.yaml
 node_modules
 frontend/dist
 frontend/lib
-**/js/react/
+frontend/ui-tests/playwright-report
+frontend/ui-tests/test-results
+**/js/react/

frontend/ui-tests/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "tljh_repo2docker-ui-tests",
+  "version": "1.0.0",
+  "description": "tljh_repo2docker UI Tests",
+  "private": true,
+  "scripts": {
+    "test": "npx playwright test --workers 1",
+    "test:update": "npx playwright test --update-snapshots",
+    "test:debug": "PWDEBUG=1 npx playwright test --workers 1"
+  },
+  "license": "BSD-3-Clause",
+  "dependencies": {
+    "@playwright/test": "^1.31.0",
+    "rimraf": "^4.1.2"
+  }
+}

frontend/ui-tests/playwright.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  timeout: 120000,
+  reporter: [[process.env.CI ? "dot" : "list"], ["html"]],
+  use: {
+    baseURL: "http://localhost:8000",
+    video: "retain-on-failure",
+  },
+  retries: 0,
+  expect: {
+    toMatchSnapshot: {
+      maxDiffPixelRatio: 0.02,
+    },
+  },
+  webServer: [
+    {
+      command: "yarn start",
+      port: 8000,
+      timeout: 120 * 1000,
+      reuseExistingServer: false,
+    },
+  ],
+};

frontend/ui-tests/tests/ui.test.ts

@@ -0,0 +1,17 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('tljh_repo2docker UI Tests', () => {
+  test.beforeEach(({ page }) => {
+    page.setDefaultTimeout(60000);
+  });
+
+  test.afterEach(async ({ page }) => {
+    await page.close({ runBeforeUnload: true });
+  });
+
+  test('Render Login', async ({ page }) => {
+    await page.goto('hub/login');
+    await page.getByText('Sign in');
+    expect(await page.screenshot()).toMatchSnapshot();
+  });
+});