Merge pull request #82 from AET-DevOps25/81-setup-e2e-tests

81 setup e2e tests

Author: Ahmad-Diab

.github/workflows/ci-main.yml

@@ -0,0 +1,20 @@
+name: CI – Main
+
+on:
+  push:
+    branches: [main]
+  workflow_call:
+
+permissions: write-all
+
+jobs:
+  e2e-tests:
+    uses: ./.github/workflows/e2e-tests.yml
+  backend-tests:
+    uses: ./.github/workflows/backend-tests.yml
+  build-publish-images:
+    needs:
+      - e2e-tests
+      - backend-tests
+    uses: ./.github/workflows/docker.yml
+# TODO: add deployment as step

.github/workflows/ci-pull-request.yml

@@ -0,0 +1,18 @@
+name: CI – Pull Request
+
+on:
+  pull_request:
+  workflow_call:
+
+permissions: write-all
+
+jobs:
+  e2e-tests:
+    uses: ./.github/workflows/e2e-tests.yml
+  backend-tests:
+    uses: ./.github/workflows/backend-tests.yml
+  build-publish-images:
+    needs:
+      - e2e-tests
+      - backend-tests
+    uses: ./.github/workflows/docker.yml

.github/workflows/docker.yml

@@ -1,18 +1,12 @@
 name: CI – Build & Publish
 
 on:
-  push:
-    branches: [main]
-  pull_request:
   workflow_call:
 
 permissions: write-all
 
 jobs:
-  backend-tests:
-    uses: ./.github/workflows/backend-tests.yml
   publish-docker-images:
-    needs: backend-tests
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code

.github/workflows/e2e-tests.yml

@@ -0,0 +1,51 @@
+name: E2E (UI) Tests
+
+on:
+  workflow_call:
+
+jobs:
+  run-e2e-tests:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        name: Checkout
+
+      - uses: actions/setup-node@v4
+        name: Setup Node
+        with:
+          node-version: lts/*
+
+      - uses: docker/setup-compose-action@v1
+        name: Setup Docker
+
+      - name: Setup .env
+        run: |
+          cp docker/backend_config_files/.env.template docker/backend_config_files/.env
+
+      - name: Generate JWT Key
+        run: |
+          ./docker/backend_config_files/jwk-key-generator.sh
+
+      - name: Start Docker Containers
+        run: |
+          docker compose up --build -d
+
+      - name: Install dependencies
+        working-directory: ./client
+        run: npm install -g pnpm && pnpm install
+
+      - name: Install Playwright Browsers
+        working-directory: ./client
+        run: pnpm exec playwright install --with-deps
+
+      - name: Run Playwright tests
+        working-directory: ./client
+        run: pnpm exec playwright test
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: ./client/playwright-report/
+          retention-days: 30

client/.gitignore

@@ -21,4 +21,10 @@ dist-ssr
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
+*.sw?
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

client/README.md

@@ -15,7 +15,39 @@ docker build -t mentor-pulse-client-image .
 To run the container:
 
 ```
-docker run -d --name mentor-pulse-client-container -p 80:80 mentor-pulse-client-image
+docker run -d --name mentor-pulse-client-container -p 3000:3000 mentor-pulse-client-image
 ```
 
 Or use the docker compose file in the root directory to build the entire application including server services.
+
+## Testing (E2E/UI tests)
+
+The client is tested using E2E/UI tests. We use playwright as the framework for testing.
+
+### Execute tests
+
+1. Start Services: Start docker with `docker compose up --build`.
+2. Configure Node: Execute `nvm use` to use the correct node version.
+3. Run Tests: `pnpm exec playwright test`
+4. Show Report: `pnpm exec playwright show-report`
+
+## Execute tests with UI
+
+Alternatively, you can also execute the tests using a UI.
+
+1. Modify Configuration:
+
+- Comment out `teardown: 'teardown'` in the project `setup` in the [playwright config](playwright.config.ts).
+- Comment out `dependencies: ['setup']` in the projcet `chromium`
+
+2. Run Playwright UI: Execute the following command:
+
+```
+pnpm exec playwright test --ui
+```
+
+3. Run Projects
+
+- Firstly, execute the `setup` project.
+- Then execute the tests you want to run.
+- Finally, execute the `teardown` project.