Initial UI tests #4794

JC-wk · 2025-12-19T10:00:56Z

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 |                                  
-------------------------------------|---------|----------|---------|---------|----------------------------------

* Initial UI tests * Move to shared mocks * Fix failing tests * fix costs tag * fix costs test failures * fix(ui): resolve test failures in App.test.tsx - Updated the MSAL mock in `App.test.tsx` to use a class-based mock, resolving the `TypeError: ... is not a constructor` error. - Wrapped asynchronous operations in `act()` in `ConfirmCopyUrlToClipboard.test.tsx`, `ConfirmDisableEnableResource.test.tsx`, `GenericErrorBoundary.test.tsx`, and `SecuredByRole.test.tsx` to fix warnings and ensure proper state updates. * fix(ui): resolve test failures in App.test.tsx - Updated the MSAL mock in `App.test.tsx` to use a class-based mock, resolving the `TypeError: ... is not a constructor` error. - Wrapped asynchronous operations in `act()` in `ResourceCard.test.tsx` to fix warnings and ensure proper state updates. * fix(ui): resolve test failures and act warnings - Updated the MSAL mock in `App.test.tsx` to use a class-based mock, resolving the `TypeError: ... is not a constructor` error. - Wrapped asynchronous operations in `act()` in `ResourceCard.test.tsx`, `ExceptionLayout.test.tsx`, and `ConfirmDeleteResource.test.tsx` to fix warnings and ensure proper state updates. * fix tests * fix warnings --------- Co-authored-by: Marcus Robinson <[email protected]> Co-authored-by: James Griffin <[email protected]> Co-authored-by: James Chapman <[email protected]> Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>

github-actions · 2025-12-19T10:01:48Z

Unit Test Results

241 tests 241 ✅ 30s ⏱️
27 suites 0 💤
1 files 0 ❌

Results for commit 2a9436b.

♻️ This comment has been updated with latest results.

…tests

JC-wk · 2026-01-21T16:05:06Z

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

marrobi · 2026-01-28T08:42:51Z

/test-force-approve

UI Tests

github-actions · 2026-01-28T08:43:06Z

🤖 pr-bot 🤖

✅ Marking tests as complete (for commit 455e4ff)

(in response to this comment from @marrobi)

tamirkamara · 2026-01-28T08:46:42Z

.github/workflows/ui_test_results.yml

The 2 new workflows are similar to the existing ones. Can't this be done in the existing workflow that does unit tests?

sure, I'll give it a try now

@tamirkamara I have merged it in now, do you think the coverage report will be useful, or happy to remove it if not.

Makefile

…tests

JC-wk requested a review from a team as a code owner December 19, 2025 10:00

James Chapman added 4 commits December 19, 2025 10:10

bump ui version

4c48dc7

update changelog

894d744

create ui tests workflow

7be1886

Copy config.source.json to config.json

eb5925b

marrobi assigned Copilot Dec 19, 2025

James Chapman and others added 22 commits December 19, 2025 10:47

update retention

71b0fe5

Merge branch 'main' into ui-tests

61e3e2e

update version

228c02f

Merge branch 'ui-tests' of https://github.com/JC-wk/AzureTRE into ui-…

f6456b3

…tests

update yarn.lock

340611e

remove frozen lockfile

f999927

fix yarn install

aff37d5

publish test results

01a949c

add UI tests to PR Bot reports

a398404

add ui tests to pr bot

b71d922

fix lint errors and migrate eslint to @nabla/vite-plugin-eslint

a27c2f6

revert eslint, combine tests

80c3d71

update ui test

5406266

support download of multiple artifacts

f7981aa

publish results after test has finished

b75f990

rename

302f824

rename

9506884

wait for all tests before publishing results

c5e5032

add ---

98ab6dc

test results update

4b49973

fix repo path

d007ff6

rename artifact

4ab7061

James Chapman and others added 14 commits January 15, 2026 10:00

add package-lock.json to .gitignore to prevent future commits

fc1e2e1

copilot instructions

ae906a3

Merge branch 'main' into delete-package-lock

daee76b

Merge branch 'main' into delete-package-lock

45f3f87

Merge branch 'main' into ui-tests

8d680b4

fix linting issues

038c561

update tests

b6a8a9f

switch from unsupported vite-plugin-eslint to vite-plugin-checker

206e06c

update eslint

e9f28ac

Merge remote-tracking branch 'origin/delete-package-lock' into ui-tests

c2aaf0d

Add ESLint config file paths for validation

710fb3c

Merge remote-tracking branch 'TREfork/main' into ui-tests

a16fc27

update makefile and pipeline for correct linting of TSX files

fa81f85

Merge branch 'main' into ui-tests

85a39ab

JC-wk requested a review from tamirkamara January 21, 2026 16:03

James Chapman and others added 7 commits January 21, 2026 16:29

add ui-testing to docs menu

c1258c9

Merge branch 'microsoft:main' into main

43b5b02

update node min version

3ce86ed

Merge remote-tracking branch 'TREfork/main' into ui-tests

8ea402b

update ui version

76ad942

add test:ui command

0b1582e

Merge branch 'main' into ui-tests

455e4ff

tamirkamara reviewed Jan 28, 2026

View reviewed changes

James Chapman and others added 4 commits January 28, 2026 11:56

test workflow update

665a4b3

Merge branch 'ui-tests' of https://github.com/JC-wk/AzureTRE into ui-…

33545e0

…tests

fix linter error

7797c26

Merge branch 'main' into ui-tests

2a9436b

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Initial UI tests #4794

Initial UI tests #4794

Uh oh!

JC-wk commented Dec 19, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Dec 19, 2025 •

edited

Loading

Uh oh!

JC-wk commented Jan 21, 2026 •

edited

Loading

Uh oh!

marrobi commented Jan 28, 2026

Uh oh!

github-actions bot commented Jan 28, 2026

Uh oh!

tamirkamara Jan 28, 2026

Uh oh!

JC-wk Jan 28, 2026

Uh oh!

JC-wk Jan 28, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Initial UI tests #4794

Are you sure you want to change the base?

Initial UI tests #4794

Uh oh!

Conversation

JC-wk commented Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is being addressed

How is this addressed

Uh oh!

github-actions bot commented Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Unit Test Results

Uh oh!

JC-wk commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

marrobi commented Jan 28, 2026

Uh oh!

github-actions bot commented Jan 28, 2026

Uh oh!

tamirkamara Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

JC-wk Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

JC-wk Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

JC-wk commented Dec 19, 2025 •

edited

Loading

github-actions bot commented Dec 19, 2025 •

edited

Loading

JC-wk commented Jan 21, 2026 •

edited

Loading