Initial UI tests

[JC-wk]

Resolves #4785 #3869

What is being addressed

There is currently no testing of the TRE UI
Testing showed a couple of ui issues which have also been fixed

How is this addressed

• Creates Initial UI tests using vitest
• Fixed components with issues which were reported by the tests.
• Update documentation
• Updated CHANGELOG.md
• Incremented UI version
• Added github workflows to run vitest and report results as pr comments <-- not able to fully test till it's in main (see comment)
• added devcontainer extensions

yarn test:coverage
Test Files  27 passed (27)
      Tests  241 passed (241)
   Start at  10:24:37
   Duration  35.72s (transform 9.79s, setup 4.75s, collect 35.84s, tests 31.91s, environment 17.82s, prepare 2.18s)

 % Coverage report from v8
-------------------------------------|---------|----------|---------|---------|----------------------------------
File                                 | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                
-------------------------------------|---------|----------|---------|---------|----------------------------------
All files                            |   82.13 |    68.15 |   63.52 |   83.87 |                                  
 src                                 |   64.28 |      100 |   28.57 |   62.96 |                                  
  App.scss                           |       0 |        0 |       0 |       0 |                                  
  App.tsx                            |   64.28 |      100 |   28.57 |   62.96 | 59,82-142                        
 src/components/shared               |   91.86 |    80.81 |   81.11 |   91.76 |                                  
  CliCommand.tsx                     |      90 |     87.5 |   83.33 |      90 | 23,33                            
  ComplexItemDisplay.tsx             |    92.3 |      100 |   85.71 |    92.3 | 29                               
  ConfirmCopyUrlToClipboard.tsx      |    92.3 |      100 |      80 |    92.3 | 46                               
  ConfirmDeleteResource.tsx          |     100 |      100 |     100 |     100 |                                  
  ConfirmDisableEnableResource.tsx   |      92 |      100 |   66.66 |      92 | 93-102                           
  ConfirmUpgradeResource.tsx         |   97.05 |     87.5 |      80 |   96.96 | 123                              
  CostsTag.tsx                       |   93.54 |    95.23 |     100 |   93.54 | 58,87                            
  ErrorPanel.tsx                     |     100 |      100 |     100 |     100 |                                  
  ExceptionLayout.tsx                |     100 |    77.77 |     100 |     100 | 20                               
  Footer.tsx                         |   95.23 |       50 |   85.71 |   95.23 | 67                               
  GenericErrorBoundary.tsx           |     100 |      100 |     100 |     100 |                                  
  PowerStateBadge.tsx                |     100 |      100 |     100 |     100 |                                  
  ResourceBody.tsx                   |     100 |       75 |     100 |     100 | 54                               
  ResourceCard.tsx                   |   75.86 |     65.3 |      50 |   75.43 | 59-62,69-75,80-86,266-283        
  ResourceHeader.tsx                 |     100 |       75 |     100 |     100 | 55                               
  SecuredByRole.tsx                  |      95 |    89.47 |   83.33 |      95 | 49                               
  SharedServiceItem.tsx              |   90.47 |      100 |      60 |   90.47 | 31-32                            
  StatusBadge.tsx                    |     100 |    83.33 |     100 |     100 | 65                               
  TopNav.tsx                         |     100 |       50 |     100 |     100 | 23                               
  UserMenu.tsx                       |     100 |      100 |     100 |     100 |                                  
 src/components/shared/notifications |      25 |        0 |       0 |      25 |                                  
  operationsSlice.ts                 |      25 |        0 |       0 |      25 | 19-34                            
 src/contexts                        |     100 |      100 |       0 |     100 |                                  
  AppRolesContext.ts                 |     100 |      100 |       0 |     100 |                                  
  CostsContext.ts                    |     100 |      100 |       0 |     100 |                                  
  CreateUpdateResourceContext.ts     |     100 |      100 |       0 |     100 |                                  
  WorkspaceContext.ts                |     100 |      100 |       0 |     100 |                                  
 src/hooks                           |   72.72 |    56.66 |   81.81 |    73.4 |                                  
  customReduxHooks.ts                |     100 |      100 |     100 |     100 |                                  
  useAuthApiCall.ts                  |   84.84 |    74.35 |     100 |   84.12 | 90-91,130-134,159-161            
  useComponentManager.ts             |   45.16 |     23.8 |   66.66 |   48.27 | 44,47-84                         
 src/models                          |      68 |        0 |      50 |   80.95 |                                  
  apiEndpoints.ts                    |     100 |      100 |     100 |     100 |                                  
  exceptions.ts                      |     100 |      100 |     100 |     100 |                                  
  loadingState.ts                    |     100 |      100 |     100 |     100 |                                  
  operation.ts                       |     100 |      100 |     100 |     100 |                                  
  resource.ts                        |   27.27 |        0 |       0 |   42.85 | 61-64                            
  resourceType.ts                    |     100 |      100 |     100 |     100 |                                  
  roleNames.ts                       |     100 |      100 |     100 |     100 |                                  
 src/test-utils                      |   71.95 |    58.57 |   51.21 |   79.16 |                                  
  common-mocks.tsx                   |   47.36 |     7.14 |      15 |   58.62 | ...5,113-115,144,157-168,188-192 
  fluentui-mocks.tsx                 |   89.28 |    65.21 |   82.35 |   88.88 | 247,410,575                      
  index.tsx                          |     100 |      100 |     100 |     100 |                                  
-------------------------------------|---------|----------|---------|---------|----------------------------------

[github-actions]

Unit Test Results

0 tests   0 ✅  0s ⏱️
0 suites  0 💤
0 files    0 ❌

Results for commit 0b1582e.

♻️ This comment has been updated with latest results.

[Copilot]

Pull request overview

This PR introduces comprehensive UI testing infrastructure for the Azure TRE UI using Vitest and React Testing Library. The implementation includes test utilities, component tests, and CI/CD integration to ensure code quality and maintainability.

Changes:

• Implements Vitest testing framework with 80% coverage thresholds for branches, functions, lines, and statements
• Creates reusable test utilities and FluentUI mocks to simplify test authoring
• Adds 27 test files covering core components, hooks, and models with 241 passing tests
• Fixes bugs discovered during testing (optional chaining issues in Footer, CostsTag, and missing React keys in CliCommand)
• Adds comprehensive documentation and GitHub Actions workflows for automated testing

Reviewed changes

Copilot reviewed 43 out of 45 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
vite.config.ts	Adds Vitest configuration with coverage thresholds and exclusions
setupTests.ts	Configures global test environment, mocks browser APIs, and initializes FluentUI
test-utils/	Provides reusable test utilities, FluentUI mocks, and common test data
**/*.test.tsx	Component and hook test files with comprehensive coverage
Footer.tsx	Fixes optional chaining for health.services to prevent undefined errors
CostsTag.tsx	Adds optional chaining for costs arrays and fixes shimmer loading logic
CliCommand.tsx	Adds missing React key prop to mapped elements
docs/tre-developers/ui-testing.md	New comprehensive testing documentation
.github/workflows/ui_tests.yml	GitHub Actions workflow for running tests on PR/push
.github/workflows/ui_test_results.yml	Workflow for publishing test results from forks
CHANGELOG.md	Documents the new UI testing feature
package.json	Bumps version to 0.8.21 and adds @vitest/ui dependency

Files not reviewed (1)

• ui/app/package-lock.json: Language not supported

[JC-wk]

Hi @tamirkamara I've added the fixes for the super-linter issues in to this branch. We could update eslint to flag more stuff like use of "any" as an example if we want to in a separate PR.
see: https://github.com/microsoft/AzureTRE/actions/runs/21216368345/job/61038518710?pr=4794

  2026-01-21 15:59:30 [INFO]   User-provided configuration file (/github/workspace/.github/linters/.tflint.hcl) exists
  2026-01-21 15:59:30 [INFO]   User-provided configuration file (/github/workspace/.github/linters/../../ui/app/eslint.config.js) exists
  2026-01-21 15:59:30 [INFO]   User-provided configuration file (/github/workspace/.github/linters/../../ui/app/eslint.config.js) exists
  2026-01-21 15:59:30 [INFO]   User-provided configuration file (/github/workspace/.github/linters/.yaml-lint.yml) exists

example eslint https://github.com/JC-wk/AzureTRE/blob/eslint/ui/app/eslint.config.js