add basic search test with playwright (#31)

* add basic search test with playwright

* adhere to linter

* add newline

* add playwright tests in CI workflow

* add files to Manifest

* enable playwright tests on CI

* rename artifact name

* remove previous playwright test invocation

* fix jinja issues

* install ripgrep for playwright tests

.github/workflows/build.yml

@@ -118,3 +118,63 @@ jobs:
           pip install jupyterlab
           jupyter labextension list 2>&1 | grep -ie "search-replace.*OK"
           python -m jupyterlab.browser_check --no-chrome-test
+  
+  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@v2
+
+      - name: Base Setup
+        uses: jupyterlab/maintainer-tools/.github/actions/base-setup@v1
+
+      - name: Download extension package
+        uses: actions/download-artifact@v2
+        with:
+          name: myextension-sdist
+
+      - name: Install ripgrep
+        run: |
+          set -eux
+          sudo apt-get update
+          sudo apt-get install ripgrep
+        
+      - name: Install the extension
+        run: |
+          set -eux
+          python -m pip install "jupyterlab~=3.1" myextension.tar.gz
+
+      - name: Install dependencies
+        working-directory: ui-tests
+        env:
+          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
+        run: jlpm install
+      - name: Set up browser cache
+        uses: actions/cache@v2
+        with:
+          path: |
+            ${{ github.workspace }}/pw-browsers
+          key: ${{ runner.os }}-${{ hashFiles('ui-tests/yarn.lock') }}
+      - name: Install browser
+        run: jlpm playwright install chromium
+        working-directory: ui-tests
+
+      - name: Execute integration tests
+        working-directory: ui-tests
+        run: |
+          jlpm playwright test
+
+      - name: Upload Playwright Test report
+        if: always()
+        uses: actions/upload-artifact@v2
+        with:
+          name: search-replace-playwright-tests
+          path: |
+            ui-tests/test-results
+            ui-tests/playwright-report

.gitignore

@@ -48,6 +48,10 @@ MANIFEST
 pip-log.txt
 pip-delete-this-directory.txt
 
+# Integration tests
+ui-tests/test-results/
+ui-tests/playwright-report/
+
 # Unit test / coverage reports
 htmlcov/
 .tox/

MANIFEST.in

@@ -4,11 +4,13 @@ include RELEASE.md
 include pyproject.toml
 recursive-include jupyter-config *.json
 recursive-include jupyterlab_search_replace *.json
+include jupyter_server_test_config.py
 include conftest.py
 
 include package.json
 include install.json
 include ts*.json
+include *.config.js
 include yarn.lock
 
 graft jupyterlab_search_replace/labextension
@@ -17,6 +19,7 @@ graft jupyterlab_search_replace/labextension
 graft src
 graft style
 graft schema
+graft ui-tests
 prune **/node_modules
 prune lib
 prune binder

ui-tests/jupyter_server_test_config.py

@@ -0,0 +1,19 @@
+"""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
+
+# Uncomment to set server log level to debug level
+# c.ServerApp.log_level = "DEBUG"

ui-tests/package.json

@@ -0,0 +1,14 @@
+{
+    "name": "search-replace-ui-tests",
+    "version": "1.0.0",
+    "description": "JupyterLab search-replace Integration Tests",
+    "private": true,
+    "scripts": {
+      "start": "jupyter lab --config jupyter_server_test_config.py",
+      "test": "jlpm playwright test"
+    },
+    "devDependencies": {
+      "@jupyterlab/galata": "^4.1.0",
+      "@playwright/test": "^1.19.0"
+    }
+}

ui-tests/playwright.config.js

@@ -0,0 +1,14 @@
+/**
+ * Configuration for Playwright using default from @jupyterlab/galata
+ */
+ const baseConfig = require('@jupyterlab/galata/lib/playwright-config');
+
+ module.exports = {
+   ...baseConfig,
+   webServer: {
+     command: 'jlpm start',
+     url: 'http://localhost:8888/lab',
+     timeout: 120 * 1000,
+     reuseExistingServer: !process.env.CI,
+   },
+}

ui-tests/tests/search.spec.ts

@@ -0,0 +1,25 @@
+import { test } from '@jupyterlab/galata';
+import { expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  // Click #tab-key-0 .lm-TabBar-tabIcon svg >> nth=0
+  await page.locator('[title="Search and replace"]').click();
+  // Click input[type="search"]
+  await page.locator('input[type="search"]').click();
+  // Fill input[type="search"]
+  await page.locator('input[type="search"]').fill('strange');
+
+  await Promise.all([
+    page.waitForResponse(
+      response =>
+        /.*search\/\?query=strange/.test(
+          response.url()
+        ) && response.request().method() === 'GET'
+    ),
+    page.locator('input[type="search"]').press('Enter')
+  ]);
+
+  expect(
+    await page.waitForSelector(`#jp-search-replace >> text=${JSON.stringify({"matches":[]}, undefined, 4)}`)
+  ).toBeTruthy();
+});