Initial UI tests

.devcontainer/devcontainer.json

@@ -280,7 +280,8 @@
         "mikestead.dotenv",
         "humao.rest-client",
         "timonwong.shellcheck",
-        "ms-azuretools.vscode-azurefunctions"
+        "ms-azuretools.vscode-azurefunctions",
+        "vitest.explorer"
       ]
     }
   },

.github/copilot-instructions.md

@@ -54,6 +54,7 @@ Azure TRE uses the following key technologies:
 ├── api_app               - API source code and docs
 ├── resource_processor    - VMSS Porter Runner
 ├── scripts               - Utility scripts
+├── ui                    - React-based web UI with TypeScript
 └── templates             - Resource templates
     ├── core/terraform    - Terraform definitions of Azure TRE core resources
     ├── shared_services   - Terraform definitions of shared services
@@ -81,6 +82,12 @@ Azure TRE uses the following key technologies:
 
 - **TypeScript/JavaScript**:
   - Follow standard ESLint configuration
+  - Use Vitest for testing React components
+  - Use React Testing Library for component testing
+  - Mock FluentUI components in tests due to JSDOM limitations
+  - Maintain 80% code coverage across branches, functions, lines, and statements
+  - Focus on testing user interactions and component behavior
+  - Use semantic queries (getByRole, getByLabelText) over test IDs when possible
 
 - **YAML**:
   - Use consistent indentation (2 spaces)

.github/workflows/test_results.yml

@@ -2,7 +2,7 @@
 # This workflow is required to publish test results from forks
 name: Test Results
 
-on:  # yamllint disable-line rule:truthy
+on: # yamllint disable-line rule:truthy
   workflow_run:
     workflows: ["Docker build"]
     types:
@@ -31,16 +31,16 @@ jobs:
         env:
           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
         run: |
-           mkdir -p artifacts && cd artifacts
+          mkdir -p artifacts && cd artifacts
 
-           artifacts_url=${{ github.event.workflow_run.artifacts_url }}
+          artifacts_url=${{ github.event.workflow_run.artifacts_url }}
 
-           gh api "$artifacts_url" -q '.artifacts[] | [.name, .archive_download_url] | @tsv' | while read -r artifact
-           do
-             IFS=$'\t' read -r name url <<< "$artifact"
-             gh api "$url" > "$name.zip"
-             unzip -d "$name" "$name.zip"
-           done
+          gh api "$artifacts_url" -q '.artifacts[] | [.name, .archive_download_url] | @tsv' | while read -r artifact
+          do
+            IFS=$'\t' read -r name url <<< "$artifact"
+            gh api "$url" > "$name.zip"
+            unzip -d "$name" "$name.zip"
+          done
 
       - name: Publish Test Results
         uses: EnricoMi/publish-unit-test-result-action@v2

.github/workflows/ui_test_results.yml

@@ -0,0 +1,92 @@
+---
+# This workflow is required to publish test results from forks
+name: UI Test Results
+
+on: # yamllint disable-line rule:truthy
+  workflow_run:
+    workflows: ["UI Tests"]
+    types:
+      - completed
+# actionlint doesn't like the following line depite it being recommanded:
+# https://docs.github.com/en/actions/using-jobs/assigning-permissions-to-jobs#overview
+# permissions: {}
+
+jobs:
+  ui-test-results:
+    name: UI Test Results
+    runs-on: ubuntu-latest
+    if: github.event.workflow_run.conclusion != 'skipped'
+
+    permissions:
+      checks: write
+
+      # needed unless run with comment_mode: off
+      pull-requests: write
+
+      # required by download step to access artifacts API
+      actions: read
+
+    steps:
+      - name: Download and Extract Artifacts
+        env:
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+        run: |
+          mkdir -p artifacts && cd artifacts
+
+          artifacts_url=${{ github.event.workflow_run.artifacts_url }}
+
+          gh api "$artifacts_url" -q '.artifacts[] | [.name, .archive_download_url] | @tsv' | while read -r artifact
+          do
+            IFS=$'\t' read -r name url <<< "$artifact"
+            gh api "$url" > "$name.zip"
+            unzip -d "$name" "$name.zip"
+          done
+
+      - name: Publish Test Results
+        uses: EnricoMi/publish-unit-test-result-action@v2
+        with:
+          commit: ${{ github.event.workflow_run.head_sha }}
+          event_file: artifacts/UI Tests Event File/event.json
+          event_name: ${{ github.event.workflow_run.event }}
+          files: "artifacts/**/*.xml"
+          check_name: "UI Test Results"
+
+      # # The following step is the catch situations where the tests didn't run at all.
+      # - name: Check failure files
+      #   run: |
+      #     if compgen -G "artifacts/**/pytest*failed" > /dev/null; then
+      #       echo "Tests failure file(s) exist. Some tests have failed or didn't run at all! \
+      #         Check the artifacts for details."
+      #       exit 1
+      #     fi
+
+      # For PR builds triggered from comment builds, the GITHUB_REF is set to main
+      # so the checks aren't automatically associated with the PR
+      # If prHeadSha is specified then explicity mark the checks for that SHA
+      - name: Report check status
+        if: github.event.workflow_run.head_sha != ''
+        uses: LouisBrunner/[email protected]
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          # the name must be identical to the one received by the real job
+          sha: ${{ github.event.workflow_run.head_sha }}
+          name: "Test Results"
+          status: "completed"
+          conclusion: ${{ github.event.workflow_run.conclusion }}
+          details_url: "https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}"
+
+      ## Vitest Coverage Report
+      ## Check out the repository to obtain the vitest.config file
+      - name: Checkout repository
+        uses: actions/checkout@v5
+
+      - name: Download UI Test coverage report
+        uses: actions/download-artifact@v6
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          run-id: ${{ github.event.workflow_run.id }}
+
+      - name: Report coverage comparison
+        uses: davelosert/vitest-coverage-report-action@v2
+        with:
+          working-directory: ui/app/

.github/workflows/ui_tests.yml

@@ -0,0 +1,75 @@
+---
+name: UI Tests
+
+on: # yamllint disable-line rule:truthy
+  pull_request:
+    branches: [main]
+    paths:
+      - "ui/app/**"
+      - ".github/workflows/ui_tests.yml"
+  push:
+    branches: [main]
+    paths:
+      - "ui/app/**"
+
+# for each ref (branch/pr) run just the most recent,
+# cancel other pending/running ones
+concurrency:
+  group: "${{ github.workflow }}-${{ github.head_ref }}"
+  cancel-in-progress: true
+
+jobs:
+  vitest:
+    name: Run vitest
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      checks: write
+      pull-requests: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v5
+        with:
+          persist-credentials: false
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "24"
+
+      - name: Install dependencies
+        working-directory: ui/app
+        run: yarn install
+
+      - name: Copy config.source.json to config.json
+        working-directory: ui/app/src
+        run: cp config.source.json config.json
+
+      - name: Run vitest
+        working-directory: ui/app
+        run: yarn test:coverage --run --reporter=junit --outputFile=junit.xml
+
+      - name: Upload coverage report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: ui-test-coverage-report
+          path: ui/app/coverage
+          retention-days: 10
+
+      - name: Upload test results
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: ui-test-results
+          path: ui/app/junit.xml
+          retention-days: 10
+
+      # this step is required to publish test results from forks
+      - name: Upload Event File
+        uses: actions/upload-artifact@v4
+        with:
+          name: UI Tests Event File
+          path: ${{ github.event_path }}
+          retention-days: 10

CHANGELOG.md

@@ -9,6 +9,7 @@ ENHANCEMENTS:
 * API: Replace HTTP_422_UNPROCESSABLE_ENTITY response with HTTP_422_UNPROCESSABLE_CONTENT as per RFC 9110 ([#4742](https://github.com/microsoft/AzureTRE/issues/4742))
 * Change Group.ReadWrite.All permission to Group.Create for AUTO_WORKSPACE_GROUP_CREATION ([#4772](https://github.com/microsoft/AzureTRE/issues/4772))
 * Make workspace shared storage quota updateable ([#4314](https://github.com/microsoft/AzureTRE/issues/4314))
+* Implement UI testing with vitest ([#4794](https://github.com/microsoft/AzureTRE/pull/4794))
 
 BUG FIXES:
 * Fix circular dependancy in base workspace. ([#4756](https://github.com/microsoft/AzureTRE/pull/4756))