test(web-app): add test end2end

- it implements a 1st version of it

web-app/tests/support/commands.ts

@@ -34,6 +34,27 @@ Cypress.Commands.add('getChartCanvas', (selector = 'canvas') => {
   return cy.get(selector)
 })
 
+// -- Command to select an option from a multiselect dropdown --
+Cypress.Commands.add('selectMultiselectOption', (selectId, optionText) => {
+  cy.get(`#${selectId}`).click()
+  cy.get('.multiselect__content-wrapper').contains(optionText).click()
+})
+
+// -- Command to wait for chart to load and be visible --
+Cypress.Commands.add('waitForChart', () => {
+  cy.get('.loading-state').should('not.exist')
+  cy.get('.chart-container canvas').should('be.visible')
+})
+
+// -- Command to check app loading state --
+Cypress.Commands.add('checkLoadingState', (isLoading) => {
+  if (isLoading) {
+    cy.get('.loading-state').should('be.visible')
+  } else {
+    cy.get('.loading-state').should('not.exist')
+  }
+})
+
 // Declare the types for the custom commands
 declare global {
   namespace Cypress {
@@ -42,6 +63,9 @@ declare global {
       getByDataCy(value: string): Chainable<JQuery<HTMLElement>>
       getByTestId(value: string): Chainable<JQuery<HTMLElement>>
       getChartCanvas(selector?: string): Chainable<JQuery<HTMLElement>>
+      selectMultiselectOption(selectId: string, optionText: string): Chainable<void>
+      waitForChart(): Chainable<void>
+      checkLoadingState(isLoading: boolean): Chainable<void>
     }
   }
 }