Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add instructions for using Playwright frontend E2E tests #1439

Merged
merged 7 commits into from
Apr 10, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions .github/workflows/build_and_deploy.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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"
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.4.10
uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.5.0
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.4.10
uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.5.0
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.4.10
uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.5.0
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.4.10
uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.5.0
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.4.10
uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.5.0
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.4.10
uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.5.0
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.4.10
uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.5.0
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.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
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.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
Expand Down
11 changes: 9 additions & 2 deletions .github/workflows/pr_test_frontend.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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"
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.4.10
uses: hotosm/gh-workflows/.github/workflows/image_build.yml@1.5.0
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.4.10
uses: hotosm/gh-workflows/.github/workflows/wiki.yml@1.5.0
with:
homepage_path: "wiki_redirect.md"
2 changes: 1 addition & 1 deletion Justfile
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
14 changes: 14 additions & 0 deletions docker-compose.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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}"
Expand Down
19 changes: 13 additions & 6 deletions docs/dev/Frontend.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
```
27 changes: 0 additions & 27 deletions src/frontend/.github/workflows/playwright.yml

This file was deleted.

5 changes: 3 additions & 2 deletions src/frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading
Loading