Merge pull request #1713 from GSA/1654-cypress-e2e-error-handling

1654 cypress e2e error handling
GSA · Aug 20, 2024 · 9fd8334 · 9fd8334
2 parents 3520e63 + d3cfb52
commit 9fd8334
Show file tree

Hide file tree

Showing 10 changed files with 105 additions and 2 deletions.
diff --git a/benefit-finder/cypress/e2e/storybook/error-message-display.cy.js b/benefit-finder/cypress/e2e/storybook/error-message-display.cy.js
@@ -157,4 +157,63 @@ describe('Validate correct error messages display for negative scenarios', () =>
       })
     })
   })
+
+  it('Should include error count in alert', () => {
+    pageObjects.button().contains(EN_LOCALE_DATA.buttonGroup[1].value).click()
+    pageObjects
+      .bfAlertList()
+      .find('li')
+      .its('length') // Get the count of 'li' elements using the base element
+      .then(count => {
+        // Assert that the heading contains the count
+        pageObjects.alertHeading().should('include.text', count)
+      })
+  })
+
+  it('Should include list of error links and clicking on a link navigates to a specific field', () => {
+    pageObjects.button().contains(EN_LOCALE_DATA.buttonGroup[1].value).click()
+
+    pageObjects
+      .bfAlertList()
+      .find('a')
+      .each($el => {
+        cy.wrap($el)
+          .should('have.attr', 'href') // Check that each element has an 'href' attribute
+          .and('not.be.empty') // Ensure the 'href' attribute is not empty
+      })
+
+    pageObjects
+      .bfAlertList()
+      .find('a')
+      .each($el => {
+        cy.wrap($el).then($link => {
+          const href = $link.attr('href') // Get the href attribute value
+          cy.get(href).focus()
+          cy.get(href).should('have.focus') // Focus should be on the element
+        })
+      })
+  })
+
+  it('Should validate error label content overrides', () => {
+    pageObjects.button().contains(EN_LOCALE_DATA.buttonGroup[1].value).click()
+
+    const labelErrorMessage =
+      EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[0]
+        .section.fieldsets[1].fieldset.errorMessage
+    pageObjects
+      .relationshipToDeceasedError()
+      .should('be.visible')
+      .and('contain.text', labelErrorMessage)
+
+    pageObjects.dateOfBirthError().should('not.contain.text', labelErrorMessage)
+    pageObjects
+      .dateOfBirthMonthError()
+      .should('not.contain.text', labelErrorMessage)
+    pageObjects
+      .dateOfBirthDayError()
+      .should('not.contain.text', labelErrorMessage)
+    pageObjects
+      .dateOfBirthYearError()
+      .should('not.contain.text', labelErrorMessage)
+  })
 })
diff --git a/benefit-finder/cypress/support/pageObjects.js b/benefit-finder/cypress/support/pageObjects.js
@@ -49,6 +49,10 @@ class PageObjects {
     return cy.get('div#bf-section > div[role="alert"]')
   }
 
+  alertHeading() {
+    return cy.get('[data-testid="bf-alert-heading"]')
+  }
+
   bfAlertList() {
     return cy.get('[data-testid="bf-errors-list"]')
   }
@@ -135,6 +139,34 @@ class PageObjects {
     return cy.get('.bf-step-back-button')
   }
 
+  dateOfBirthError() {
+    return cy.get('[data-testid="error-description-applicant_date_of_birth"]')
+  }
+
+  dateOfBirthMonthError() {
+    return cy.get(
+      '[data-testid="month-error-description-applicant_date_of_birth_0"]'
+    )
+  }
+
+  dateOfBirthDayError() {
+    return cy.get(
+      '[data-testid="day-error-description-applicant_date_of_birth_0"]'
+    )
+  }
+
+  dateOfBirthYearError() {
+    return cy.get(
+      '[data-testid="year-error-description-applicant_date_of_birth_0"]'
+    )
+  }
+
+  relationshipToDeceasedError() {
+    return cy.get(
+      '[data-testid="error-description-applicant_relationship_to_the_deceased"]'
+    )
+  }
+
   zeroBenefitsViewHeading() {
     return cy.get('[data-testid="zero-benefits-view-heading"]')
   }

diff --git a/benefit-finder/src/shared/api/mock-data/current.js b/benefit-finder/src/shared/api/mock-data/current.js
@@ -65,6 +65,7 @@ const content = `{
                   "legend": "Relationship to the deceased",
                   "required": true,
                   "hint": "",
+                  "errorMessage": "Test overide error label",
                   "inputs": [
                     {
                       "inputCriteria": {

diff --git a/benefit-finder/src/shared/api/mock-data/current.json b/benefit-finder/src/shared/api/mock-data/current.json
@@ -65,6 +65,7 @@
                   "legend": "Relationship to the deceased",
                   "required": true,
                   "hint": "",
+                  "errorMessage": "Test overide error label",
                   "inputs": [
                     {
                       "inputCriteria": {

diff --git a/benefit-finder/src/shared/components/Alert/__tests__/__snapshots__/index.spec.jsx.snap b/benefit-finder/src/shared/components/Alert/__tests__/__snapshots__/index.spec.jsx.snap
@@ -15,6 +15,7 @@ exports[`Alert > renders a match to the previous snapshot when it has an error 1
       <h2
         aria-level="2"
         class="bf-usa-alert__heading usa-alert__heading font-family-sans"
+        data-testid="bf-alert-heading"
         role="heading"
       >
           
@@ -45,6 +46,7 @@ exports[`Alert > renders a match to the previous snapshot, default 1`] = `
       <h2
         aria-level="2"
         class="bf-usa-alert__heading usa-alert__heading font-family-sans"
+        data-testid="bf-alert-heading"
         role="heading"
       >
           
@@ -75,6 +77,7 @@ exports[`Alert > renders a match to the previous snapshot, error type with no er
       <h2
         aria-level="2"
         class="bf-usa-alert__heading usa-alert__heading font-family-sans"
+        data-testid="bf-alert-heading"
         role="heading"
       >
           

diff --git a/benefit-finder/src/shared/components/Alert/index.jsx b/benefit-finder/src/shared/components/Alert/index.jsx
@@ -93,6 +93,7 @@ const Alert = ({
           <Heading
             headingLevel={2}
             className="bf-usa-alert__heading usa-alert__heading"
+            data-testid="bf-alert-heading"
           >
             {heading?.prefix}&nbsp;{errorCount}&nbsp;{heading?.suffix}
           </Heading>

diff --git a/benefit-finder/src/shared/components/Date/index.jsx b/benefit-finder/src/shared/components/Date/index.jsx
@@ -52,6 +52,7 @@ const Date = ({
         {handleInvalid(invalid, `${id}_month`) && (
           <li
             id={`month-error-description-${id}`}
+            data-testid={`month-error-description-${id}`}
             className="bf-error-detail"
             aria-live="assertive"
           >
@@ -61,6 +62,7 @@ const Date = ({
         {handleInvalid(invalid, `${id}_day`) && (
           <li
             id={`day-error-description-${id}`}
+            data-testid={`day-error-description-${id}`}
             className="bf-error-detail"
             aria-live="assertive"
           >
@@ -70,6 +72,7 @@ const Date = ({
         {handleInvalid(invalid, `${id}_year`) && (
           <li
             id={`year-error-description-${id}`}
+            data-testid={`year-error-description-${id}`}
             className="bf-error-detail"
             aria-live="assertive"
           >

diff --git a/benefit-finder/src/shared/components/Fieldset/__tests__/__snapshots__/index.spec.jsx.snap b/benefit-finder/src/shared/components/Fieldset/__tests__/__snapshots__/index.spec.jsx.snap
@@ -25,6 +25,7 @@ exports[`Fieldset > renders a match to the previous error snapshot 1`] = `
       <div
         aria-live="assertive"
         class="bf-error-detail"
+        data-testid="error-description-applicant_date_of_birth_0"
         id="error-description-applicant_date_of_birth_0"
       >
         Fill out the legend field

diff --git a/benefit-finder/src/shared/components/Fieldset/index.jsx b/benefit-finder/src/shared/components/Fieldset/index.jsx
@@ -85,6 +85,7 @@ const Fieldset = ({
         {invalid === true && (
           <div
             id={`error-description-${id}`}
+            data-testid={`error-description-${id}`}
             className="bf-error-detail"
             aria-live="assertive"
           >

diff --git a/...finder/src/shared/components/LifeEventSection/__tests__/__snapshots__/index.spec.jsx.snap b/...finder/src/shared/components/LifeEventSection/__tests__/__snapshots__/index.spec.jsx.snap
@@ -80,6 +80,7 @@ exports[`LifeEventSection > renders a match to the previous snapshot 1`] = `
             <h2
               aria-level="2"
               class="bf-usa-alert__heading usa-alert__heading font-family-sans"
+              data-testid="bf-alert-heading"
               role="heading"
             >
               Your information contains 0 errors
@@ -306,7 +307,7 @@ exports[`LifeEventSection > renders a match to the previous snapshot 1`] = `
         >
           <fieldset
             class="bf-usa-fieldset usa-fieldset required-field  "
-            data-errormessage="Fill out the relationship to the deceased field"
+            data-errormessage="Test overide error label"
             id="applicant_relationship_to_the_deceased"
             required=""
           >
@@ -332,7 +333,7 @@ exports[`LifeEventSection > renders a match to the previous snapshot 1`] = `
                 aria-errormessage="error-description-applicant_relationship_to_the_deceased_0"
                 aria-invalid="false"
                 class="bf-usa-select usa-select "
-                data-errormessage="Fill out the relationship to the deceased field"
+                data-errormessage="Test overide error label"
                 id="applicant_relationship_to_the_deceased_0"
                 name="applicant_relationship_to_the_deceased_0"
               >