build: add instructions for using Playwright frontend E2E tests (#1439)

* docs: add instructions for running playwright tests * build: relock frontend deps after playwright install * ci: add playwright test config to ci pr tests * ci: remove demo playwright ci config * refactor: move demo playwright file to different dir * ci: update all workflows --> yml@1.5.0 (for playwright integration) * test: add exclusions for vitest directories (skip e2e tests)
hotosm · Apr 10, 2024 · 25f2b11 · 25f2b11
1 parent 56c9072
commit 25f2b11
Show file tree

Hide file tree

Showing 16 changed files with 60 additions and 56 deletions.
diff --git a/.github/workflows/build_and_deploy.yml b/.github/workflows/build_and_deploy.yml
@@ -17,7 +17,7 @@ on:
 
 jobs:
   pytest:
-    uses: hotosm/gh-workflows/.github/workflows/test_compose.yml@1.4.10
+    uses: hotosm/gh-workflows/.github/workflows/test_compose.yml@1.5.0
     with:
       image_name: ghcr.io/${{ github.repository }}/backend
       build_context: src/backend
@@ -29,20 +29,20 @@ jobs:
     secrets: inherit
 
   frontend-tests:
-    uses: hotosm/gh-workflows/.github/workflows/test_pnpm.yml@1.4.10
+    uses: hotosm/gh-workflows/.github/workflows/test_pnpm.yml@1.5.0
     with:
       working_dir: src/frontend
 
   backend-build:
-    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.4.10
+    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.5.0
     needs: [pytest]
     with:
       context: src/backend
       build_target: prod
       image_name: ghcr.io/${{ github.repository }}/backend
 
   frontend-build:
-    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.4.10
+    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.5.0
     needs: [frontend-tests]
     with:
       context: src/frontend
@@ -152,7 +152,7 @@ jobs:
     needs:
       - smoke-test-backend
       - smoke-test-frontend
-    uses: hotosm/gh-workflows/.github/workflows/remote_deploy.yml@1.4.10
+    uses: hotosm/gh-workflows/.github/workflows/remote_deploy.yml@1.5.0
     with:
       environment: ${{ github.ref_name }}
       docker_compose_file: "docker-compose.${{ github.ref_name }}.yml"

diff --git a/.github/workflows/build_ci_img.yml b/.github/workflows/build_ci_img.yml
@@ -16,7 +16,7 @@ on:
 
 jobs:
   backend-ci-build:
-    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.4.10
+    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.5.0
     with:
       context: src/backend
       build_target: ci

diff --git a/.github/workflows/build_odk_imgs.yml b/.github/workflows/build_odk_imgs.yml
@@ -13,7 +13,7 @@ on:
 
 jobs:
   build-odkcentral:
-    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.4.10
+    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.5.0
     with:
       context: odkcentral/api
       image_tags: |
@@ -26,7 +26,7 @@ jobs:
       # multi_arch: true
 
   build-odkcentral-ui:
-    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.4.10
+    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.5.0
     with:
       context: odkcentral/ui
       image_tags: |

diff --git a/.github/workflows/build_proxy_imgs.yml b/.github/workflows/build_proxy_imgs.yml
@@ -10,7 +10,7 @@ on:
 
 jobs:
   build-cert-init-main:
-    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.4.10
+    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.5.0
     with:
       context: nginx
       build_target: certs-init-main
@@ -21,7 +21,7 @@ jobs:
       multi_arch: true
 
   build-cert-init-dev:
-    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.4.10
+    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.5.0
     with:
       context: nginx
       build_target: certs-init-development
@@ -33,7 +33,7 @@ jobs:
       multi_arch: true
 
   build-proxy-main:
-    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.4.10
+    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.5.0
     with:
       context: nginx
       build_target: main
@@ -44,7 +44,7 @@ jobs:
       multi_arch: true
 
   build-proxy-dev:
-    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.4.10
+    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.5.0
     with:
       context: nginx
       build_target: development

diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
@@ -12,19 +12,19 @@ on:
 
 jobs:
   build_doxygen:
-    uses: hotosm/gh-workflows/.github/workflows/doxygen_build.yml@1.4.10
+    uses: hotosm/gh-workflows/.github/workflows/doxygen_build.yml@1.5.0
     with:
       output_path: docs/apidocs
 
   build_openapi_json:
-    uses: hotosm/gh-workflows/.github/workflows/openapi_build.yml@1.4.10
+    uses: hotosm/gh-workflows/.github/workflows/openapi_build.yml@1.5.0
     with:
       image: ghcr.io/${{ github.repository }}/backend:ci-${{ github.ref_name }}
       example_env_file_path: ".env.example"
       output_path: docs/openapi.json
 
   publish_docs:
-    uses: hotosm/gh-workflows/.github/workflows/mkdocs_build.yml@1.4.10
+    uses: hotosm/gh-workflows/.github/workflows/mkdocs_build.yml@1.5.0
     needs:
       - build_doxygen
       - build_openapi_json

diff --git a/.github/workflows/pr_test_backend.yml b/.github/workflows/pr_test_backend.yml
@@ -14,7 +14,7 @@ on:
 
 jobs:
   pytest:
-    uses: hotosm/gh-workflows/.github/workflows/test_compose.yml@1.4.10
+    uses: hotosm/gh-workflows/.github/workflows/test_compose.yml@1.5.0
     with:
       image_name: ghcr.io/${{ github.repository }}/backend
       build_context: src/backend

diff --git a/.github/workflows/pr_test_frontend.yml b/.github/workflows/pr_test_frontend.yml
@@ -13,7 +13,14 @@ on:
   workflow_dispatch:
 
 jobs:
-  frontend-tests:
-    uses: hotosm/gh-workflows/.github/workflows/test_pnpm.yml@1.4.10
+  unit-tests:
+    uses: hotosm/gh-workflows/.github/workflows/test_pnpm.yml@1.5.0
     with:
       working_dir: src/frontend
+
+  e2e-tests:
+    uses: hotosm/gh-workflows/.github/workflows/test_pnpm.yml@main
+    with:
+      container_config: '{"image": "mcr.microsoft.com/playwright:v1.43.0"}'
+      working_dir: src/frontend
+      run_command: "test:e2e"
diff --git a/.github/workflows/tag_build.yml b/.github/workflows/tag_build.yml
@@ -9,7 +9,7 @@ on:
 
 jobs:
   backend-build:
-    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.4.10
+    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.5.0
     with:
       context: src/backend
       build_target: prod

diff --git a/.github/workflows/wiki.yml b/.github/workflows/wiki.yml
@@ -10,6 +10,6 @@ on:
 
 jobs:
   publish-docs-to-wiki:
-    uses: hotosm/gh-workflows/.github/workflows/wiki.yml@1.4.10
+    uses: hotosm/gh-workflows/.github/workflows/wiki.yml@1.5.0
     with:
       homepage_path: "wiki_redirect.md"
diff --git a/Justfile b/Justfile
@@ -52,7 +52,7 @@ test-backend:
   docker compose run --rm api pytest
 
 test-frontend:
-  docker compose run -e CI=True --rm --entrypoint='sh -c' ui 'npm run test'
+  docker compose run --rm ui-test
 
 test: test-backend test-frontend
 

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -129,6 +129,20 @@ services:
       - fmtm-net
     restart: "unless-stopped"
 
+  ui-test:
+    profiles: ["ui-test"]
+    image: mcr.microsoft.com/playwright:v1.43.0
+    working_dir: /app
+    environment:
+      - DISPLAY=:0
+    volumes:
+      - ./src/frontend:/app
+      - /tmp/.X11-unix:/tmp/.X11-unix
+    command: npm run test:e2e
+    networks:
+      - fmtm-net
+    restart: "never"
+
   central:
     profiles: ["", "central"]
     image: "ghcr.io/hotosm/fmtm/odkcentral:${ODK_CENTRAL_TAG:-v2023.5.0}"

diff --git a/docs/dev/Frontend.md b/docs/dev/Frontend.md
@@ -64,10 +64,17 @@ directory. Then add a new entry to the `src/frontend/router.tsx` file.
 To add a new component, create a new .tsx file in the src/frontend/
 components directory.
 
-## Conclusion
+## Frontend Testing
 
-Running the FMTM project is easy with Docker. You can also run the
-project locally outside of Docker, but it requires more setup. The
-frontend is built with React and Typescript, and the backend is built
-with FastAPI. Use the tips provided to customize and extend the
-functionality of the project.
+To run the frontend tests locally, run:
+
+```bash
+docker compose run --rm ui-test
+```
+
+To run the FMTM UI for interactive testing, run:
+
+```bash
+docker compose up -d
+docker compose run --rm ui-test npx -y playwright open http://ui:7051
+```
diff --git a/src/frontend/.github/workflows/playwright.yml b/src/frontend/.github/workflows/playwright.yml
diff --git a/src/frontend/package.json b/src/frontend/package.json
@@ -8,9 +8,10 @@
     "start": "env-cmd -f .env.dev vite dev",
     "start:live": "vite dev",
     "test": "vitest",
-    "test:watch": "vitest --watch",
-    "test:ui": "vitest --ui",
+    "test:unit": "vitest",
     "test:coverage": "vitest --coverage",
+    "test:e2e": "playwright test",
+    "test:install-deps": "playwright install-deps",
     "lint": "eslint --fix --ext .js,.jsx,.ts,.tsx src"
   },
   "license": "GPL-3.0-only",

diff --git a/...tend/tests-examples/demo-todo-app.spec.ts → ...ight-tests-examples/demo-todo-app.spec.ts b/...tend/tests-examples/demo-todo-app.spec.ts → ...ight-tests-examples/demo-todo-app.spec.ts
diff --git a/src/frontend/vite.config.ts b/src/frontend/vite.config.ts
@@ -2,6 +2,7 @@
 import path from 'path';
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { configDefaults } from 'vitest/config';
 import { VitePWA } from 'vite-plugin-pwa';
 
 // https://vitejs.dev/config/
@@ -36,6 +37,7 @@ export default defineConfig(({ mode }) => {
       globals: true,
       environment: 'jsdom',
       setupFiles: './setupTests.ts',
+      exclude: [...configDefaults.exclude, 'e2e', 'playwright-tests-examples'],
     },
   };
 });