Introduce E2E Tests for Calm Hub UI

[YoofiTT96]

Description

Introduces E2E tests using cypress testing framework and react testing library for queries.

Test specs cover:

• Home page
• Architectures page
• ADRs page
• Flows page
• Patterns page
• Visualiser page

The use of React Testing Library in the queries assist in maintainability as the queries are organised around how the users would interact with the application as opposed to how it is implemented.
Assertions are organied around what they should see as well as accessiblity roles of elements

This PR does not include changes for integrating it in the pipeline

Type of Change

• 🐛 Bug fix (non-breaking change which fixes an issue)
• ✨ New feature (non-breaking change which adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
• 📚 Documentation update
• 🎨 Code style/formatting changes
• ♻️ Refactoring (no functional changes)
• ⚡ Performance improvements
• ✅ Test additions or updates
• 🔧 Chore (maintenance, dependencies, CI, etc.)

Affected Components

• CLI (cli/)
• Shared (shared/)
• CALM Widgets (calm-widgets/)
• CALM Hub (calm-hub/)
• CALM Hub UI (calm-hub-ui/)
• Documentation (docs/)
• VS Code Extension (calm-plugins/vscode/)
• Dependencies
• CI/CD

Commit Message Format ✅

Testing

• I have tested my changes locally
• I have added/updated unit tests
• All existing tests pass

Checklist

• My commits follow the conventional commit format
• I have updated documentation if necessary
• I have added tests for my changes (if applicable)
• My changes follow the project's coding standards

[aamanrebello]

My only concern was the base URL in the cypress config.

[Copilot]

Pull request overview

This PR introduces end-to-end (E2E) testing infrastructure for the Calm Hub UI using Cypress and React Testing Library. The tests focus on user-facing behavior and accessibility, covering six key pages of the application. This is a foundational step toward comprehensive automated testing, though CI/CD integration is planned for future work.

Key Changes

• Added Cypress 15.7.0 and @testing-library/cypress for E2E testing with user-centric queries
• Implemented test specs for Home, Architectures, ADRs, Flows, Patterns, and Visualizer pages
• Enhanced UI components with test identifiers (data-cy attributes) and accessibility improvements (aria-label)

Reviewed changes

Copilot reviewed 21 out of 22 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
package-lock.json	Added Cypress dependencies and related packages for E2E testing
calm-hub-ui/package.json	Added cypress and @testing-library/cypress as devDependencies; added start-cypress script
calm-hub-ui/tsconfig.json	Added type definitions for Cypress and testing library
calm-hub-ui/cypress.config.ts	Cypress configuration using environment variables for baseUrl
calm-hub-ui/cypress/support/e2e.ts	Cypress support file setup
calm-hub-ui/cypress/support/commands.ts	Import testing-library commands for enhanced queries
calm-hub-ui/cypress/fixtures/*.json	Test fixture data for architectures, flows, patterns, and ADRs
calm-hub-ui/cypress/fixtures/constants.ts	Shared test constants for namespaces and resource types
calm-hub-ui/cypress/e2e/*.cy.ts	E2E test specs for all major pages using intercepts to stub API responses
calm-hub-ui/src/hub/components/json-renderer/JsonRenderer.tsx	Added data-cy attributes for test identification
calm-hub-ui/src/components/navbar/Navbar.tsx	Added aria-label for improved accessibility
calm-hub-ui/README.md	Documentation for running Cypress tests and test stubbing approach
calm-hub-ui/.env.example	Example environment variable configuration for test baseUrl

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.