test(web-app): add cypress for unit test

web-app/tests/support/commands.ts

@@ -0,0 +1,49 @@
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+  // Implementation example for a login command
+  cy.visit('/login')
+  cy.get('[data-cy=email]').type(email)
+  cy.get('[data-cy=password]').type(password)
+  cy.get('[data-cy=submit]').click()
+})
+
+// -- This is a child command --
+Cypress.Commands.add('getByDataCy', { prevSubject: 'element' }, (subject, value) => {
+  return cy.wrap(subject).find(`[data-cy=${value}]`)
+})
+
+// -- This is a dual command --
+Cypress.Commands.add('getByTestId', { prevSubject: 'optional' }, (subject, value) => {
+  return subject 
+    ? cy.wrap(subject).find(`[data-testid=${value}]`) 
+    : cy.get(`[data-testid=${value}]`)
+})
+
+// -- Example command for chart testing --
+Cypress.Commands.add('getChartCanvas', (selector = 'canvas') => {
+  return cy.get(selector)
+})
+
+// Declare the types for the custom commands
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      login(email: string, password: string): Chainable<void>
+      getByDataCy(value: string): Chainable<JQuery<HTMLElement>>
+      getByTestId(value: string): Chainable<JQuery<HTMLElement>>
+      getChartCanvas(selector?: string): Chainable<JQuery<HTMLElement>>
+    }
+  }
+}
+
+export {}