Initial UI tests

.devcontainer/devcontainer.json

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

.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
   - Use Yarn for package management
 
 - **YAML**:

.github/workflows/build_validation_develop.yml

@@ -102,6 +102,8 @@ jobs:
           VALIDATE_DOCKERFILE_HADOLINT: true
           VALIDATE_TSX: true
           VALIDATE_TYPESCRIPT_ES: true
+          TYPESCRIPT_ES_CONFIG_FILE: ../../ui/app/eslint.config.js
+          TSX_CONFIG_FILE: ../../ui/app/eslint.config.js
 
       - name: Docs validation
         if: ${{ steps.filter.outputs.docs == 'true' }}

.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/checks-action@v2.0.0
+        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))
 * Update Porter, AzureCLI, Terraform and its providers across the solution ([#4799](https://github.com/microsoft/AzureTRE/issues/4799))
 * Update `api_healthcheck.sh` script with fixed 10-second check intervals and 7-minute timeout for improved API health monitoring ([#4807](https://github.com/microsoft/AzureTRE/issues/4807))
 * Update SuperLinter to version 8.3.2 ([#4815](https://github.com/microsoft/AzureTRE/issues/4815))

Makefile

@@ -9,7 +9,6 @@ ACR_DOMAIN_SUFFIX?=`az cloud show --query suffixes.acrLoginServerEndpoint --outp
 ACR_NAME?=`echo "$${ACR_NAME}" | tr A-Z a-z`
 ACR_FQDN?="${ACR_NAME}${ACR_DOMAIN_SUFFIX}"
 FULL_IMAGE_NAME_PREFIX:=${ACR_FQDN}/${IMAGE_NAME_PREFIX}
-LINTER_REGEX_INCLUDE?=all # regular expression used to specify which files to include in local linting (defaults to "all")
 E2E_TESTS_NUMBER_PROCESSES_DEFAULT=4  # can be overridden in e2e_tests/.env
 
 target_title = @echo -e "\n\e[34m»»» 🧩 \e[96m$(1)\e[0m..."
@@ -255,6 +254,8 @@ lint: ## 🧹 Lint all files
 		-e VALIDATE_TYPESCRIPT_ES=true \
 		-e FILTER_REGEX_INCLUDE=${LINTER_REGEX_INCLUDE} \
 		-e VALIDATE_ALL_CODEBASE=true \
+		-e TYPESCRIPT_ES_CONFIG_FILE=../../ui/app/eslint.config.js \
+		-e TSX_CONFIG_FILE=../../ui/app/eslint.config.js \
 		-v $${LOCAL_WORKSPACE_FOLDER}:/tmp/lint \
 		ghcr.io/super-linter/super-linter:slim-v8.3.2