Support UI Testing

[AndreaCuneo]

Add E2E Testing of UI based on cypress.

Add UnitTesting of single Components. I'm currently undecided to use cypress or not for it (see this ).

Library support for:

• Mocking remote requests via MSW: support is both during developement, to use Mock API and/or during E2E
  • Adding a *.mocks.ts file, enable Mocks during Developement AND Testing. These are 'global', always enabled.
  • Mocks can be further added/overriden during Testing on each Test cases
  • Reset RTKQ cache between Test cases
  • Test correct RTKQ cache cleanup between tests
  • Avoid MSW worker and library to be included in build (neither in /public nor bundles)
• Navigation via Menu OR Router: navigation cannot be done using the Url bar (cy.visit) as that reloads the entire page, instead of navigating as an SPA.
  • Custom Cypress commands for Navigating via the Menu or the internal Router
  • support Navigating via 'closed' Accordion menu entries (or remove the Accordion ?)
  • Test for tracking the 'active' menù entry and ensuring Accordion is opened correctly in case of Hardlink usage to a page from a default closed section
• CI pipeline:
  • GihHub Actions
  • Azure Dev Ops

Next steps:

• Support for CodeCoverage
  • Library integration
  • GitHub CI
  • ADO CI
• Support for Testing the Build output
  • use build output via vite preview when using headless e2e:ci to ensure to test the same code that goes in PROD.
    • there is a slight conflict as in PROD we don't want to include MSW dependency (both for security and bundle size) but we need MSW to test the production build.
• Test all 'library' capabilities
  • GDPR Cookie Banner
  • Table Components including Pagination, Spinners and Error handling
  • Form Components including 'binding' remote call payload, validation messages, submit error handling
  • i18n translations testing, both support for cimode and for LocaleSwitcher component
  • Global Loading Bar
  • Global and Router Error Boundary
  • Auth: Login flow including Auth0 and AzureAD, token expiration and refresh
  • Authz: Permission handling, including protected routes and 'disabled' actions/buttons via hooks
  • Hardlinking, including after Login