Skip to content

Commit

Permalink
feat(frontend): add Playwright test for project creation workflow (#1700
Browse files Browse the repository at this point in the history
)

* feat(gitignore): dont push .auth directory to github

* feat(authentication): authentication setup

* feat(e2e): create project UI flow code & test logo picture add

* fix(test): uncomment login step

* fix(createprojectosm): add js to test

* fix(files): test geojson add

* feat(createproject): create project workflow test setup

* fix(authSetup): remove auth setup and its config

* fix(createproject): add assertions & delete project after creation

* fix(createproject): removed delete project step

* fix(createproject): assertions add

* build: bind port 9323 for playwright report, add depends_on api

* docs: info about --service-ports for ui test report in browser

* build: ensure playwright report bound to 0.0.0.0 interface

* test: set playwright test url to http://ui:7051

* docs: info ui container must be rebuilt prior to tests

* fix(user): remove user logs generation

* fix(files): remove osm logo

* fix(createprojectosm): remove create project test with osm login

* fix(createproject): add tsignores

* fix(createproject): update UI url

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* feat(authentication): authentication setup

* feat(e2e): create project UI flow code & test logo picture add

* test: set playwright test url to http://ui:7051

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* fix(createprojectosm): remove old create project test

* fix(e2e): remove authSetup & logo file

* fix(auth): remove auth log storage user.json file

* fix(playwrightConfig): remove setup config

* build: replace API_URL_OVERRIDE --> API_URL

* build: add healthcheck for local ui container, with test depends_on

* build: add docker compose override & just commands for e2e playwright tests

* build: add test:interactive for frontend interactive testing

* fix(backend): allow override of FMTM_DEV_PORT to be unset during tests

* fix(backend): also remove refresh cookie on logout

* refactor: remove demo tests for playwright

* build: move ui-test service to separate dockerfile

* test: fix use correct url for tests fmtm.dev.test

* test: fix use FMTM Public Beta org during e2e test

* ci: update gh-workflow versions 1.6.0 --> 2.0.0

* ci: update renamed deploy workflow (compose)

* ci: add frontend e2e test workflow during pr and deploy

* docs: add comment to frontend e2e test to trigger workflow

* build: update justfile for running backend without docker

* build: add cmd + entrypoint override for playwright compose api

* test: reduce size of aoi for e2e project creation

* ci: update playwright ci workflow to upload traces zip

* test: update playwright config for ci, add browserName prop

* test(frontend): only run project creation test in one browser (chromium)

* style: fix sql formatting in backend sql block string

* test: fix ensure project name is unique for multiple test runs

* build(frontend): update dependency minor versions

* test: update project creation e2e test to use task splitting algo

* build(frontend): lock playwright to specific version (no flexible pinning)

* test: remove uuid dependency from playwright tests, use Math.random

* build: install playwright dependencies prior to running tests

* ci: update to latest gh-workflow syntax for playwright

* test: add CI=true for playwright command running in ci env

* build: add network explicitly to playwright compose file

* build: add playwright test debugging option

* docs: update .env.example to use same odk creds as local

* build: add dependency for proxy service during tests (for odk central)

* ci: update e2e test run during build and deploy

* ci: update all gh-workflows --> v2.0.5

---------

Co-authored-by: spwoodcock <sam.woodcock@protonmail.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
  • Loading branch information
3 people authored Aug 1, 2024
1 parent 7c45dc5 commit 2afc4d0
Show file tree
Hide file tree
Showing 28 changed files with 920 additions and 1,192 deletions.
4 changes: 2 additions & 2 deletions .env.example
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
### ODK Central ###
ODK_CENTRAL_URL=${ODK_CENTRAL_URL:-"https://proxy"}
ODK_CENTRAL_USER=${ODK_CENTRAL_USER:-"test@fmtm.dev"}
ODK_CENTRAL_PASSWD=${ODK_CENTRAL_PASSWD:-"testuserpassword"}
ODK_CENTRAL_USER=${ODK_CENTRAL_USER:-"admin@hotosm.org"}
ODK_CENTRAL_PASSWD=${ODK_CENTRAL_PASSWD:-"Password1234"}

### FMTM ###
DEBUG=${DEBUG:-False}
Expand Down
31 changes: 22 additions & 9 deletions .github/workflows/build_and_deploy.yml
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ on:
workflow_dispatch:

jobs:
pytest:
uses: hotosm/gh-workflows/.github/workflows/test_compose.yml@1.6.0
backend-test:
uses: hotosm/gh-workflows/.github/workflows/test_compose.yml@2.0.5
with:
image_name: ghcr.io/${{ github.repository }}/backend
build_context: src/backend
Expand All @@ -28,22 +28,35 @@ jobs:
coverage: true
secrets: inherit

frontend-tests:
uses: hotosm/gh-workflows/.github/workflows/test_pnpm.yml@1.6.0
frontend-unit-test:
uses: hotosm/gh-workflows/.github/workflows/test_pnpm.yml@2.0.5
with:
working_dir: src/frontend

frontend-e2e-test:
uses: hotosm/gh-workflows/.github/workflows/test_compose.yml@2.0.5
with:
playwright: true
cache_image: false
compose_file: docker-compose.yml -f contrib/playwright/docker-compose.yml
compose_service: ui-test
cache_extra_imgs: |
"docker.io/postgis/postgis:${{ vars.POSTGIS_TAG }}"
"docker.io/minio/minio:${{ vars.MINIO_TAG }}"
"ghcr.io/hotosm/fmtm/frontend:playwright-${{ vars.PLAYWRIGHT_TAG }}"
secrets: inherit

backend-build:
uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.6.0
needs: [pytest]
uses: hotosm/gh-workflows/.github/workflows/image_build.yml@2.0.5
needs: [backend-test]
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.6.0
needs: [frontend-tests]
uses: hotosm/gh-workflows/.github/workflows/image_build.yml@2.0.5
needs: [frontend-unit-test, frontend-e2e-test]
with:
context: src/frontend
dockerfile: prod.dockerfile
Expand Down Expand Up @@ -152,7 +165,7 @@ jobs:
needs:
- smoke-test-backend
- smoke-test-frontend
uses: hotosm/gh-workflows/.github/workflows/remote_deploy.yml@1.6.0
uses: hotosm/gh-workflows/.github/workflows/remote_deploy_compose.yml@2.0.5
with:
environment: ${{ github.ref_name }}
docker_compose_file: "docker-compose.${{ github.ref_name }}.yml"
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/build_ci_img.yml
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ on:

jobs:
backend-ci-build:
uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.6.0
uses: hotosm/gh-workflows/.github/workflows/image_build.yml@2.0.5
with:
context: src/backend
build_target: ci
Expand Down
4 changes: 2 additions & 2 deletions .github/workflows/build_odk_imgs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ on:

jobs:
build-odkcentral:
uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.6.0
uses: hotosm/gh-workflows/.github/workflows/image_build.yml@2.0.5
with:
context: odkcentral/api
image_tags: |
Expand All @@ -26,7 +26,7 @@ jobs:
# multi_arch: true

build-odkcentral-ui:
uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.6.0
uses: hotosm/gh-workflows/.github/workflows/image_build.yml@2.0.5
with:
context: odkcentral/ui
image_tags: |
Expand Down
8 changes: 4 additions & 4 deletions .github/workflows/build_proxy_imgs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ on:

jobs:
build-cert-init-main:
uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.6.0
uses: hotosm/gh-workflows/.github/workflows/image_build.yml@2.0.5
with:
context: nginx
build_target: certs-init-main
Expand All @@ -21,7 +21,7 @@ jobs:
multi_arch: true

build-cert-init-dev:
uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.6.0
uses: hotosm/gh-workflows/.github/workflows/image_build.yml@2.0.5
with:
context: nginx
build_target: certs-init-development
Expand All @@ -33,7 +33,7 @@ jobs:
multi_arch: true

build-proxy-main:
uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.6.0
uses: hotosm/gh-workflows/.github/workflows/image_build.yml@2.0.5
with:
context: nginx
build_target: main
Expand All @@ -44,7 +44,7 @@ jobs:
multi_arch: true

build-proxy-dev:
uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.6.0
uses: hotosm/gh-workflows/.github/workflows/image_build.yml@2.0.5
with:
context: nginx
build_target: development
Expand Down
6 changes: 3 additions & 3 deletions .github/workflows/docs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,19 @@ on:

jobs:
build_doxygen:
uses: hotosm/gh-workflows/.github/workflows/doxygen_build.yml@1.6.0
uses: hotosm/gh-workflows/.github/workflows/doxygen_build.yml@2.0.5
with:
output_path: docs/apidocs

build_openapi_json:
uses: hotosm/gh-workflows/.github/workflows/openapi_build.yml@1.6.0
uses: hotosm/gh-workflows/.github/workflows/openapi_build.yml@2.0.5
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.6.0
uses: hotosm/gh-workflows/.github/workflows/mkdocs_build.yml@2.0.5
needs:
- build_doxygen
- build_openapi_json
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/pr_test_backend.yml
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ on:

jobs:
pytest:
uses: hotosm/gh-workflows/.github/workflows/test_compose.yml@1.6.0
uses: hotosm/gh-workflows/.github/workflows/test_compose.yml@2.0.5
with:
image_name: ghcr.io/${{ github.repository }}/backend
build_context: src/backend
Expand Down
16 changes: 11 additions & 5 deletions .github/workflows/pr_test_frontend.yml
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,19 @@ on:

jobs:
unit-tests:
uses: hotosm/gh-workflows/.github/workflows/test_pnpm.yml@1.6.0
uses: hotosm/gh-workflows/.github/workflows/test_pnpm.yml@2.0.5
with:
working_dir: src/frontend

e2e-tests:
uses: hotosm/gh-workflows/.github/workflows/test_pnpm.yml@main
uses: hotosm/gh-workflows/.github/workflows/test_compose.yml@2.0.5
with:
container_config: '{"image": "mcr.microsoft.com/playwright:v1.45.1"}'
working_dir: src/frontend
run_command: "test:e2e"
playwright: true
cache_image: false
compose_file: docker-compose.yml -f contrib/playwright/docker-compose.yml
compose_service: ui-test
cache_extra_imgs: |
"docker.io/postgis/postgis:${{ vars.POSTGIS_TAG }}"
"docker.io/minio/minio:${{ vars.MINIO_TAG }}"
"ghcr.io/hotosm/fmtm/frontend:playwright-${{ vars.PLAYWRIGHT_TAG }}"
secrets: inherit
2 changes: 1 addition & 1 deletion .github/workflows/tag_build.yml
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ on:

jobs:
backend-build:
uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.6.0
uses: hotosm/gh-workflows/.github/workflows/image_build.yml@2.0.5
with:
context: src/backend
build_target: prod
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/wiki.yml
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,6 @@ on:

jobs:
publish-docs-to-wiki:
uses: hotosm/gh-workflows/.github/workflows/wiki.yml@1.6.0
uses: hotosm/gh-workflows/.github/workflows/wiki.yml@2.0.5
with:
homepage_path: "wiki_redirect.md"
19 changes: 18 additions & 1 deletion contrib/just/start/Justfile
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,30 @@
# Start FMTM
[no-cd]
default:
#!/usr/bin/env sh
cd {{justfile_directory()}}
docker compose up -d

# Start backend API only
[no-cd]
backend:
#!/usr/bin/env sh
cd {{justfile_directory()}}
docker compose up -d api

# Start backend API only
[no-cd]
backend-no-docker:
#!/usr/bin/env sh
cd {{justfile_directory()}}/src/backend

FMTM_DOMAIN="" OSM_CLIENT_ID="" OSM_CLIENT_SECRET="" \
OSM_SECRET_KEY="" ENCRYPTION_KEY="" \
pdm run uvicorn app.main:api --host 0.0.0.0 --port 8000

# Start frontend UI only
[no-cd]
frontend:
Expand Down Expand Up @@ -77,7 +94,7 @@ tunnel:
just --unstable dotenv update "S3_ENDPOINT" "${s3_url}"

# Restart the API and UI with environment variables set
API_URL_OVERRIDE="${api_url}" docker compose \
API_URL="${api_url}" docker compose \
-f docker-compose.yml \
-f contrib/tunnel/docker-compose.yml \
up -d api ui
Expand Down
21 changes: 20 additions & 1 deletion contrib/just/test/Justfile
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,26 @@ backend:
# Test frontend with Playwright
[no-cd]
frontend:
docker compose run --rm ui-test
docker compose \
-f docker-compose.yml \
-f contrib/playwright/docker-compose.yml \
run --rm --service-ports ui-test 'npm run test:e2e-report'

# View Playwright tests as they happen in browser
[no-cd]
frontend-debug:
docker compose \
-f docker-compose.yml \
-f contrib/playwright/docker-compose.yml \
run --rm ui-test 'npm run test:e2e-debug'

# Create Playwright tests interactively
[no-cd]
frontend-interactive:
docker compose \
-f docker-compose.yml \
-f contrib/playwright/docker-compose.yml \
run --rm ui-test 'npm run test:e2e-interactive'

# Check coverage for backend tests
[no-cd]
Expand Down
74 changes: 74 additions & 0 deletions contrib/playwright/docker-compose.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
# Uses hostname fmtm.dev.test for api and ui on same domain
# otherwise tests will not work using the cookie for auth

networks:
fmtm-net:
name: fmtm-${GIT_BRANCH:-local}

services:
api:
hostname: fmtm.dev.test
environment:
# Run via alias fmtm.dev.test
FMTM_DOMAIN: "fmtm.dev.test"
# Do not use dev port, use port 80
FMTM_DEV_PORT: "false"
# The ci image has overrides for CMD and ENTRYPOINT, so re-apply
entrypoint: ["/app-entrypoint.sh"]
# API_REPLICAS can be increased via CI env vars
command:
[
"uvicorn",
"app.main:api",
"--host",
"0.0.0.0",
"--port",
"8000",
"--workers",
"1",
"--log-level",
"critical",
"--no-access-log",
]

ui:
# This hostname is used for Playwright test internal networking
hostname: fmtm.dev.test
environment:
VITE_API_URL: "http://fmtm.dev.test:8000"
command: --port 80
healthcheck:
test: timeout 5s bash -c ':> /dev/tcp/127.0.0.1/80' || exit 1
interval: 5s
retries: 3
start_period: 5s
timeout: 5s

ui-test:
image: "mcr.microsoft.com/playwright:${PLAYWRIGHT_TAG:-v1.44.1}"
depends_on:
# Starts the proxy and all other services
proxy:
condition: service_healthy
api:
# Override: must be healthy before tests run
condition: service_healthy
# Override: must be healthy before tests run
ui:
condition: service_healthy
working_dir: /app
environment:
DISPLAY: :0
volumes:
- ./src/frontend:/app
- /tmp/.X11-unix:/tmp/.X11-unix
entrypoint: /bin/sh -c
command:
- |
npm install --legacy-peer-deps
npm run test:e2e
ports:
- "9323:9323"
networks:
- fmtm-net
restart: "no"
16 changes: 1 addition & 15 deletions docker-compose.yml
Original file line number Diff line number Diff line change
Expand Up @@ -120,27 +120,13 @@ services:
- /app/node_modules/
# - ../ui:/app/node_modules/@hotosm/ui:ro
environment:
- VITE_API_URL=${API_URL_OVERRIDE:-http://api.${FMTM_DOMAIN}:${FMTM_DEV_PORT:-7050}}
- VITE_API_URL=${API_URL:-http://api.${FMTM_DOMAIN}:${FMTM_DEV_PORT:-7050}}
ports:
- "7051:7051"
networks:
- fmtm-net
restart: "unless-stopped"

ui-test:
profiles: ["ui-test"]
image: mcr.microsoft.com/playwright:v1.45.1
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:-v2024.1.0}"
Expand Down
7 changes: 4 additions & 3 deletions docs/dev/Frontend.md
Original file line number Diff line number Diff line change
Expand Up @@ -69,12 +69,13 @@ components directory.
To run the frontend tests locally, run:

```bash
docker compose run --rm ui-test
just test frontend
```

> View the HTML report at: `http://localhost:9323`.
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
just test frontend-interactive
```
Loading

0 comments on commit 2afc4d0

Please sign in to comment.