From df53d3a79ad8e25eb4c1ea76a09198d0760c1041 Mon Sep 17 00:00:00 2001 From: Nehemiah Abuga <121119072+nehemiah-abuga@users.noreply.github.com> Date: Wed, 30 Oct 2024 19:24:03 -0700 Subject: [PATCH 1/2] PXBF-1567-data-attributes-selectors-updated: update selectors to use data attributes --- .../e2e/storybook/aria-attribute-state.cy.js | 25 ++- .../cypress/e2e/storybook/axe-a11y.cy.js | 4 +- .../cypress/e2e/storybook/dataLayer.cy.js | 184 ++++++------------ .../e2e/storybook/error-message-display.cy.js | 18 +- .../e2e/storybook/openAllAccordions.cy.js | 1 + ...lected-criteria-eligibility-benefits.cy.js | 96 ++++----- benefit-finder/cypress/support/commands.js | 20 +- benefit-finder/cypress/support/pageObjects.js | 117 +++-------- benefit-finder/cypress/support/utils.js | 25 ++- .../__snapshots__/index.spec.jsx.snap | 1 + .../__snapshots__/index.spec.jsx.snap | 1 + .../__snapshots__/index.spec.jsx.snap | 13 ++ .../__snapshots__/index.spec.jsx.snap | 174 +++++++++++++++++ .../__snapshots__/index.spec.jsx.snap | 2 + .../__snapshots__/index.spec.jsx.snap | 2 + .../__snapshots__/index.spec.jsx.snap | 1 + .../src/shared/components/Accordion/index.jsx | 5 +- .../__snapshots__/index.spec.jsx.snap | 3 + .../src/shared/components/Alert/index.jsx | 1 + .../__snapshots__/index.spec.jsx.snap | 1 + .../BenefitAccordionGroup/index.jsx | 1 + .../__snapshots__/index.spec.jsx.snap | 1 + .../src/shared/components/Button/index.jsx | 1 + .../__snapshots__/index.spec.jsx.snap | 2 + .../__snapshots__/index.spec.jsx.snap | 1 + .../src/shared/components/Date/index.jsx | 7 +- .../__snapshots__/index.spec.jsx.snap | 4 +- .../src/shared/components/Fieldset/index.jsx | 3 +- .../shared/components/Icon/index_icons.jsx | 1 + .../src/shared/components/Modal/index.jsx | 5 +- .../__snapshots__/index.spec.jsx.snap | 1 + .../__snapshots__/index.spec.jsx.snap | 1 + .../shared/components/RadioGroup/index.jsx | 6 +- .../__snapshots__/index.spec.jsx.snap | 1 + 34 files changed, 417 insertions(+), 312 deletions(-) diff --git a/benefit-finder/cypress/e2e/storybook/aria-attribute-state.cy.js b/benefit-finder/cypress/e2e/storybook/aria-attribute-state.cy.js index 6938be712..cfbca35bd 100644 --- a/benefit-finder/cypress/e2e/storybook/aria-attribute-state.cy.js +++ b/benefit-finder/cypress/e2e/storybook/aria-attribute-state.cy.js @@ -9,6 +9,9 @@ const dob = utils.getDateByOffset(-(18 * 365.2425 - 1)) const relation = EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[0].section .fieldsets[1].fieldset.inputs[0].inputCriteria.values[1].value +const relationshipId = + EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[0].section + .fieldsets[1].fieldset.inputs[0].inputCriteria.id const status = EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[0].section .fieldsets[2].fieldset.inputs[0].inputCriteria.values[1].value @@ -21,12 +24,12 @@ describe('Validate state of aria-invalid attribute', () => { it('Should have default state of "false" for select, input, and radio', () => { pageObjects - .selectField() + .fieldsetById(relationshipId) .invoke('attr', 'aria-invalid') .should('eq', 'false') pageObjects - .inputField() + .benefitMemorableDateById('day') .invoke('attr', 'aria-invalid') .should('eq', 'false') @@ -40,31 +43,37 @@ describe('Validate state of aria-invalid attribute', () => { pageObjects.button().contains(EN_LOCALE_DATA.buttonGroup[1].value).click() pageObjects - .selectField() + .fieldsetById(relationshipId) .invoke('attr', 'aria-invalid') .should('eq', 'true') - pageObjects.inputField().invoke('attr', 'aria-invalid').should('eq', 'true') + pageObjects + .benefitMemorableDateById('day') + .invoke('attr', 'aria-invalid') + .should('eq', 'true') }) it('Should have state of "false" when previous was true but error has been resolved', () => { pageObjects.button().contains(EN_LOCALE_DATA.buttonGroup[1].value).click() pageObjects - .selectField() + .fieldsetById(relationshipId) + .invoke('attr', 'aria-invalid') + .should('eq', 'true') + pageObjects + .benefitMemorableDateById('day') .invoke('attr', 'aria-invalid') .should('eq', 'true') - pageObjects.inputField().invoke('attr', 'aria-invalid').should('eq', 'true') utils.dataInputs({ dob, relation, status }) pageObjects - .selectField() + .fieldsetById(relationshipId) .invoke('attr', 'aria-invalid') .should('eq', 'false') pageObjects - .inputField() + .benefitMemorableDateById('day') .invoke('attr', 'aria-invalid') .should('eq', 'false') }) diff --git a/benefit-finder/cypress/e2e/storybook/axe-a11y.cy.js b/benefit-finder/cypress/e2e/storybook/axe-a11y.cy.js index a784b3344..2b0e4b5a6 100644 --- a/benefit-finder/cypress/e2e/storybook/axe-a11y.cy.js +++ b/benefit-finder/cypress/e2e/storybook/axe-a11y.cy.js @@ -123,7 +123,7 @@ describe(`Validate code passes axe scanning`, () => { .should('eq', 'bf-result-view') pageObjects - .accordion( + .accordionByTitle( `${accordionItems[0].getAttribute('data-test-accordion-title')}` ) .click() @@ -149,7 +149,7 @@ describe(`Validate code passes axe scanning`, () => { // get the heading of the first in the list cy.get(`[data-testid="bf-usa-accordion"]`).then(accordionItems => { pageObjects - .accordion( + .accordionByTitle( `${accordionItems[0].getAttribute('data-test-accordion-title')}` ) .click() diff --git a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js index 4398f5eab..03d652e56 100644 --- a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js +++ b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js @@ -5,6 +5,7 @@ import { pageObjects } from '../../support/pageObjects' import * as EN_LOCALE_DATA from '../../../../benefit-finder/src/shared/locales/en/en.json' import * as BENEFITS_ELIBILITY_DATA from '../../fixtures/benefits-eligibility.json' import content from '../../../src/shared/api/mock-data/current.json' +import * as EN_DOLO_MOCK_DATA from '../../../../benefit-finder/src/shared/api/mock-data/current.json' // establish some common data points from our mock values and scenarios const { @@ -191,6 +192,19 @@ const dataLayerValues = [ const removeID = item => delete item['gtm.uniqueEventId'] +const relationshipId = + EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[0].section + .fieldsets[1].fieldset.inputs[0].inputCriteria.id +const relationshipValue = + EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[0].section + .fieldsets[1].fieldset.inputs[0].inputCriteria.values[1].value +const maritalStatusId = + EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[0].section + .fieldsets[2].fieldset.inputs[0].inputCriteria.id +const maritalStatusValue = + EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[0].section + .fieldsets[2].fieldset.inputs[0].inputCriteria.values[1].value + // check to make sure our data layer exists describe('Basic Data Layer Checks', () => { it('has a dataLayer and loads GTM', () => { @@ -217,7 +231,6 @@ describe('Calls to Google Analytics Object', function () { .button() .contains(EN_LOCALE_DATA.intro.button) .then(() => { - // eslint-disable-next-line cypress/no-unnecessary-waiting cy.wait(wait).then(() => { assert.isDefined( @@ -228,17 +241,14 @@ describe('Calls to Google Analytics Object', function () { window.dataLayer.find(x => x.event === 'bf_page_change'), 'bf_page_change is loaded' ) + // get the last pushed event + const bfEventIndex = window.dataLayer.findIndex( + x => x.event === 'bf_page_change' + ) + const ev = { ...window.dataLayer[bfEventIndex] } + removeID(ev) - cy.wait(500).then(() => { - // get the last pushed event - const bfEventIndex = window.dataLayer.findIndex( - x => x.event === 'bf_page_change' - ) - const ev = { ...window.dataLayer[bfEventIndex] } - removeID(ev) - - expect(ev).to.deep.equal(dataLayerValueIntro) - }) + expect(ev).to.deep.equal(dataLayerValueIntro) }) }) }) @@ -286,23 +296,9 @@ describe('Calls to Google Analytics Object', function () { cy.visit('/iframe.html?args=&id=app--primary&viewMode=story') pageObjects.button().contains(EN_LOCALE_DATA.intro.button).click() - cy.enterDateOfBirth( - dateOfBirth.month, - dateOfBirth.day, - dateOfBirth.year - ) - pageObjects - .applicantRelationshipToDeceased() - .select( - lifeEventForm.sectionsEligibilityCriteria[0].section.fieldsets[1] - .fieldset.inputs[0].inputCriteria.values[1].value - ) - pageObjects - .applicantMaritalStatus() - .select( - lifeEventForm.sectionsEligibilityCriteria[0].section.fieldsets[2] - .fieldset.inputs[0].inputCriteria.values[1].value - ) + cy.enterDate(dateOfBirth.month, dateOfBirth.day, dateOfBirth.year) + pageObjects.fieldsetById(relationshipId).select(relationshipValue) + pageObjects.fieldsetById(maritalStatusId).select(maritalStatusValue) pageObjects .button() @@ -345,23 +341,9 @@ describe('Calls to Google Analytics Object', function () { cy.visit('/iframe.html?args=&id=app--primary&viewMode=story') pageObjects.button().contains(EN_LOCALE_DATA.intro.button).click() - cy.enterDateOfBirth( - dateOfBirth.month, - dateOfBirth.day, - dateOfBirth.year - ) - pageObjects - .applicantRelationshipToDeceased() - .select( - lifeEventForm.sectionsEligibilityCriteria[0].section.fieldsets[1] - .fieldset.inputs[0].inputCriteria.values[1].value - ) - pageObjects - .applicantMaritalStatus() - .select( - lifeEventForm.sectionsEligibilityCriteria[0].section.fieldsets[2] - .fieldset.inputs[0].inputCriteria.values[1].value - ) + cy.enterDate(dateOfBirth.month, dateOfBirth.day, dateOfBirth.year) + pageObjects.fieldsetById(relationshipId).select(relationshipValue) + pageObjects.fieldsetById(maritalStatusId).select(maritalStatusValue) pageObjects .button() @@ -380,11 +362,7 @@ describe('Calls to Google Analytics Object', function () { // Date of death - 30 days ago const dateOfDeath = utils.getDateByOffset(-30) - cy.enterDateOfDeath( - dateOfDeath.month, - dateOfDeath.day, - dateOfDeath.year - ) + cy.enterDate(dateOfDeath.month, dateOfDeath.day, dateOfDeath.year) pageObjects .button() @@ -408,12 +386,13 @@ describe('Calls to Google Analytics Object', function () { it('results page with eligible benefits has a bf_page_change and bf_count events', function () { cy.visit(`${utils.storybookUri}${scenario}`) + pageObjects.accordionHeading().should('exist') cy.window().then(window => { assert.isDefined(window.dataLayer, 'window.dataLayer is defined') pageObjects - .benefitsAccordion() + .accordionHeading() .filter(':visible') .should( 'have.length', @@ -439,19 +418,22 @@ describe('Calls to Google Analytics Object', function () { it('clicking an accordion on the results page with eligible benefits has a bf_accordion_open event', function () { cy.visit(`${utils.storybookUri}${scenario}`) + pageObjects.accordionHeading().should('exist') cy.window().then(window => { assert.isDefined(window.dataLayer, 'window.dataLayer is defined') pageObjects - .benefitsAccordion() + .accordionHeading() .filter(':visible') .should( 'have.length', dataLayerValueResultsViewEligible.bfData.eligibleBenefitCount.number ) .then(() => { - pageObjects.accordion(enResults.eligible.eligible_benefits[0]).click() + pageObjects + .accordionByTitle(enResults.eligible.eligible_benefits[0]) + .click() // we wait for the last event to fire // eslint-disable-next-line cypress/no-unnecessary-waiting cy.wait(wait).then(() => { @@ -471,19 +453,22 @@ describe('Calls to Google Analytics Object', function () { it('clicking a obfuscated link in an open accordion on the results page with eligible benefits has a bf_benefit_link event', function () { cy.visit(`${utils.storybookUri}${scenario}`) + pageObjects.accordionHeading().should('exist') cy.window().then(window => { assert.isDefined(window.dataLayer, 'window.dataLayer is defined') pageObjects - .benefitsAccordion() + .accordionHeading() .filter(':visible') .should( 'have.length', dataLayerValueResultsViewEligible.bfData.eligibleBenefitCount.number ) .then(() => { - pageObjects.accordion(enResults.eligible.eligible_benefits[0]).click() + pageObjects + .accordionByTitle(enResults.eligible.eligible_benefits[0]) + .click() // we wait for the last event to fire // eslint-disable-next-line cypress/no-unnecessary-waiting cy.wait(wait).then(() => { @@ -496,9 +481,7 @@ describe('Calls to Google Analytics Object', function () { removeID(ev[0]) expect(ev[0]).to.deep.equal(dataLayerValueAccordionOpen) - // we wait for the last event to fire - // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(2500) + pageObjects.accordionHeading().should('exist') pageObjects .benefitsAccordionLink(enResults.eligible.eligible_benefits[0]) .invoke('removeAttr', 'href') @@ -521,13 +504,14 @@ describe('Calls to Google Analytics Object', function () { it('results page with not eligible benefits has a bf_page_change and bf_count events', function () { cy.visit(`${utils.storybookUri}${scenario}`) + pageObjects.accordionHeading().should('exist') cy.window().then(window => { assert.isDefined(window.dataLayer, 'window.dataLayer is defined') // get visible benfits results pageObjects - .benefitsAccordion() + .accordionHeading() .filter(':visible') .should( 'have.length', @@ -542,7 +526,7 @@ describe('Calls to Google Analytics Object', function () { .click() .then(() => { pageObjects - .benefitsAccordion() + .accordionHeading() .filter(':visible') .should( 'have.length', @@ -604,23 +588,9 @@ describe('Calls to Google Analytics Object', function () { cy.visit('/iframe.html?args=&id=app--primary&viewMode=story') pageObjects.button().contains(EN_LOCALE_DATA.intro.button).click() - cy.enterDateOfBirth( - dateOfBirth.month, - dateOfBirth.day, - dateOfBirth.year - ) - pageObjects - .applicantRelationshipToDeceased() - .select( - lifeEventForm.sectionsEligibilityCriteria[0].section.fieldsets[1] - .fieldset.inputs[0].inputCriteria.values[1].value - ) - pageObjects - .applicantMaritalStatus() - .select( - lifeEventForm.sectionsEligibilityCriteria[0].section.fieldsets[2] - .fieldset.inputs[0].inputCriteria.values[1].value - ) + cy.enterDate(dateOfBirth.month, dateOfBirth.day, dateOfBirth.year) + pageObjects.fieldsetById(relationshipId).select(relationshipValue) + pageObjects.fieldsetById(maritalStatusId).select(maritalStatusValue) pageObjects .button() @@ -639,11 +609,7 @@ describe('Calls to Google Analytics Object', function () { // Date of death - 30 days ago const dateOfDeath = utils.getDateByOffset(-30) - cy.enterDateOfDeath( - dateOfDeath.month, - dateOfDeath.day, - dateOfDeath.year - ) + cy.enterDate(dateOfDeath.month, dateOfDeath.day, dateOfDeath.year) pageObjects .button() @@ -745,23 +711,9 @@ describe('Calls to Google Analytics Object', function () { cy.visit('/iframe.html?args=&id=app--primary&viewMode=story') pageObjects.button().contains(EN_LOCALE_DATA.intro.button).click() - cy.enterDateOfBirth( - dateOfBirth.month, - dateOfBirth.day, - dateOfBirth.year - ) - pageObjects - .applicantRelationshipToDeceased() - .select( - lifeEventForm.sectionsEligibilityCriteria[0].section.fieldsets[1] - .fieldset.inputs[0].inputCriteria.values[1].value - ) - pageObjects - .applicantMaritalStatus() - .select( - lifeEventForm.sectionsEligibilityCriteria[0].section.fieldsets[2] - .fieldset.inputs[0].inputCriteria.values[1].value - ) + cy.enterDate(dateOfBirth.month, dateOfBirth.day, dateOfBirth.year) + pageObjects.fieldsetById(relationshipId).select(relationshipValue) + pageObjects.fieldsetById(maritalStatusId).select(maritalStatusValue) pageObjects .button() @@ -780,11 +732,7 @@ describe('Calls to Google Analytics Object', function () { // Date of death - 30 days ago const dateOfDeath = utils.getDateByOffset(-30) - cy.enterDateOfDeath( - dateOfDeath.month, - dateOfDeath.day, - dateOfDeath.year - ) + cy.enterDate(dateOfDeath.month, dateOfDeath.day, dateOfDeath.year) pageObjects .button() @@ -885,23 +833,9 @@ describe('Calls to Google Analytics Object', function () { cy.visit('/iframe.html?args=&id=app--primary&viewMode=story') pageObjects.button().contains(EN_LOCALE_DATA.intro.button).click() - cy.enterDateOfBirth( - dateOfBirth.month, - dateOfBirth.day, - dateOfBirth.year - ) - pageObjects - .applicantRelationshipToDeceased() - .select( - lifeEventForm.sectionsEligibilityCriteria[0].section.fieldsets[1] - .fieldset.inputs[0].inputCriteria.values[1].value - ) - pageObjects - .applicantMaritalStatus() - .select( - lifeEventForm.sectionsEligibilityCriteria[0].section.fieldsets[2] - .fieldset.inputs[0].inputCriteria.values[1].value - ) + cy.enterDate(dateOfBirth.month, dateOfBirth.day, dateOfBirth.year) + pageObjects.fieldsetById(relationshipId).select(relationshipValue) + pageObjects.fieldsetById(maritalStatusId).select(maritalStatusValue) pageObjects .button() @@ -922,11 +856,7 @@ describe('Calls to Google Analytics Object', function () { // Date of death - 30 days ago const dateOfDeath = utils.getDateByOffset(-30) - cy.enterDateOfDeath( - dateOfDeath.month, - dateOfDeath.day, - dateOfDeath.year - ) + cy.enterDate(dateOfDeath.month, dateOfDeath.day, dateOfDeath.year) pageObjects .button() @@ -1038,7 +968,7 @@ describe('Calls to Google Analytics Object', function () { ) pageObjects - .accordion( + .accordionByTitle( enResults.eligible.eligible_benefits[0] ) .click() diff --git a/benefit-finder/cypress/e2e/storybook/error-message-display.cy.js b/benefit-finder/cypress/e2e/storybook/error-message-display.cy.js index 32fe80695..806e39462 100644 --- a/benefit-finder/cypress/e2e/storybook/error-message-display.cy.js +++ b/benefit-finder/cypress/e2e/storybook/error-message-display.cy.js @@ -197,23 +197,27 @@ describe('Validate correct error messages display for negative scenarios', () => it('Should validate error label content overrides', () => { pageObjects.button().contains(EN_LOCALE_DATA.buttonGroup[1].value).click() - const labelErrorMessage = + const relationErrorMessageOvveride = EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[0] .section.fieldsets[1].fieldset.errorMessage pageObjects - .relationshipToDeceasedError() + .errorDescription() + .eq(1) .should('be.visible') - .and('contain.text', labelErrorMessage) + .and('contain.text', relationErrorMessageOvveride) - pageObjects.dateOfBirthError().should('not.contain.text', labelErrorMessage) + pageObjects + .errorDescription() + .eq(0) + .should('not.contain.text', relationErrorMessageOvveride) pageObjects .dateOfBirthMonthError() - .should('not.contain.text', labelErrorMessage) + .should('not.contain.text', relationErrorMessageOvveride) pageObjects .dateOfBirthDayError() - .should('not.contain.text', labelErrorMessage) + .should('not.contain.text', relationErrorMessageOvveride) pageObjects .dateOfBirthYearError() - .should('not.contain.text', labelErrorMessage) + .should('not.contain.text', relationErrorMessageOvveride) }) }) diff --git a/benefit-finder/cypress/e2e/storybook/openAllAccordions.cy.js b/benefit-finder/cypress/e2e/storybook/openAllAccordions.cy.js index c4d393b03..fc5e00ca6 100644 --- a/benefit-finder/cypress/e2e/storybook/openAllAccordions.cy.js +++ b/benefit-finder/cypress/e2e/storybook/openAllAccordions.cy.js @@ -6,6 +6,7 @@ beforeEach(() => { const selectedData = BENEFITS_ELIBILITY_DATA.scenario_1_covid.en.param const scenario = utils.encodeURIFromObject(selectedData) cy.visit(`${utils.storybookUri}${scenario}`) + pageObjects.accordionHeading().should('exist') }) describe('open all interaction tests', () => { diff --git a/benefit-finder/cypress/e2e/storybook/selected-criteria-eligibility-benefits.cy.js b/benefit-finder/cypress/e2e/storybook/selected-criteria-eligibility-benefits.cy.js index 5c2b1e05a..198203fd1 100644 --- a/benefit-finder/cypress/e2e/storybook/selected-criteria-eligibility-benefits.cy.js +++ b/benefit-finder/cypress/e2e/storybook/selected-criteria-eligibility-benefits.cy.js @@ -1,4 +1,4 @@ -/// +/// import { pageObjects } from '../../support/pageObjects' import * as utils from '../../support/utils' @@ -8,6 +8,28 @@ import content from '../../../../benefit-finder/src/shared/api/mock-data/current import * as EN_LOCALE_DATA from '../../../../benefit-finder/src/shared/locales/en/en.json' const { data } = JSON.parse(content) +const relationshipId = + EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[0].section + .fieldsets[1].fieldset.inputs[0].inputCriteria.id +const relationshipValue = + EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[0].section + .fieldsets[1].fieldset.inputs[0].inputCriteria.values[1].value +const maritalStatusId = + EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[0].section + .fieldsets[2].fieldset.inputs[0].inputCriteria.id +const maritalStatusValue = + EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[0].section + .fieldsets[2].fieldset.inputs[0].inputCriteria.values[1].value +const citizenshipStatusId = + EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[0].section + .fieldsets[3].fieldset.inputs[0].inputCriteria.id +const paidIntoSocialSecurityId = + EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[1].section + .fieldsets[2].fieldset.inputs[0].inputCriteria.id +const publicSafetyOfficerId = + EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[1].section + .fieldsets[3].fieldset.inputs[0].inputCriteria.id + describe('Validate correct eligibility benefits display based on selected criteria/options', () => { it('Should render Survivor Benefits for Child benefit accordion correctly based on selected cretiria options', () => { // 18 years ago minus one day - applicant under 18 years old @@ -16,68 +38,38 @@ describe('Validate correct eligibility benefits display based on selected criter cy.visit('/iframe.html?args=&id=app--primary&viewMode=story') pageObjects.button().contains(EN_LOCALE_DATA.intro.button).click() - cy.enterDateOfBirth(dateOfBirth.month, dateOfBirth.day, dateOfBirth.year) - pageObjects - .applicantRelationshipToDeceased() - .select( - EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[0] - .section.fieldsets[1].fieldset.inputs[0].inputCriteria.values[1].value - ) - pageObjects - .applicantMaritalStatus() - .select( - EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[0] - .section.fieldsets[2].fieldset.inputs[0].inputCriteria.values[1].value - ) + cy.enterDate(dateOfBirth.month, dateOfBirth.day, dateOfBirth.year) + pageObjects.fieldsetById(relationshipId).select(relationshipValue) + pageObjects.fieldsetById(maritalStatusId).select(maritalStatusValue) - pageObjects - .benefitSectionFieldset() - .contains( - EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[0] - .section.fieldsets[3].fieldset.inputs[0].inputCriteria.label - ) - .parent() - .find('.usa-radio__label') - .contains('Yes') - .click() + pageObjects.fieldsetById(citizenshipStatusId).eq(0).click({ force: true }) pageObjects.button().contains(EN_LOCALE_DATA.buttonGroup[1].value).click() // Date of death - 30 days ago const dateOfDeath = utils.getDateByOffset(-30) - cy.enterDateOfDeath(dateOfDeath.month, dateOfDeath.day, dateOfDeath.year) + cy.enterDate(dateOfDeath.month, dateOfDeath.day, dateOfDeath.year) pageObjects - .benefitSectionFieldset() - .contains( - EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[1] - .section.fieldsets[2].fieldset.legend - ) - .parent() - .find('.usa-radio__label') - .contains('Yes') - .click() + .fieldsetById(paidIntoSocialSecurityId) + .eq(0) + .click({ force: true }) - pageObjects - .benefitSectionFieldset() - .contains( - EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[1] - .section.fieldsets[3].fieldset.legend - ) - .parent() - .find('.usa-radio__label') - .contains('Yes') - .click() + pageObjects.fieldsetById(publicSafetyOfficerId).eq(0).click({ force: true }) pageObjects.button().contains(EN_LOCALE_DATA.buttonGroup[1].value).click() pageObjects - .buttonGroup() + .modalButtonGroup() .contains(EN_LOCALE_DATA.reviewSelectionModal.buttonGroup[1].value) .click() + pageObjects - .accordion(EN_DOLO_MOCK_DATA.data.benefits[23].benefit.title) + .accordionByTitle(EN_DOLO_MOCK_DATA.data.benefits[23].benefit.title) .click() + .parent() + .parent() + .parent() .find('.bf-key-eligibility-criteria-list li') .should( 'contain', @@ -112,7 +104,7 @@ describe('Validate correct eligibility benefits display based on selected criter cy.visit(`${utils.storybookUri}${scenario}`) pageObjects - .benefitsAccordion() + .accordionHeading() .filter(':visible') .should('have.length', enResults.eligible.length) .and( @@ -170,7 +162,7 @@ describe('Validate correct eligibility benefits display based on selected criter cy.visit(`${utils.storybookUri}${scenario}`) pageObjects - .benefitsAccordion() + .accordionHeading() .filter(':visible') .should('have.length', enResults.eligible.length) .and( @@ -188,7 +180,7 @@ describe('Validate correct eligibility benefits display based on selected criter cy.visit(`${utils.storybookUri}${scenario}`) pageObjects - .benefitsAccordion() + .accordionHeading() .filter(':visible') .should('have.length', enResults.eligible.length) .and( @@ -203,9 +195,7 @@ describe('Validate correct eligibility benefits display based on selected criter const scenario = utils.encodeURIFromObject(selectedData) cy.visit(`${utils.storybookUri}${scenario}`) pageObjects.expandAll().click() - pageObjects - .keyEligibilityCriteriaListIcon() - .should('have.class', 'bf-checkmark--green') + pageObjects.iconGreenCheck().should('exist') }) it('Should display Zero benefit view when no benefit are eligible', () => { @@ -219,7 +209,7 @@ describe('Validate correct eligibility benefits display based on selected criter .should('contain', EN_LOCALE_DATA.resultsView.zeroBenefits.heading) pageObjects - .benefitsAccordion() + .accordionHeading() .filter(':visible') .should('have.length', enResults.eligible.length) diff --git a/benefit-finder/cypress/support/commands.js b/benefit-finder/cypress/support/commands.js index 611481b72..398334da6 100644 --- a/benefit-finder/cypress/support/commands.js +++ b/benefit-finder/cypress/support/commands.js @@ -26,20 +26,8 @@ import { pageObjects } from './pageObjects' -Cypress.Commands.add('enterDateOfBirth', (month, day, year) => { - pageObjects.applicantDateOfBirthMonth().select(month) - pageObjects.applicantDateOfBirthDay().type(day) - pageObjects.applicantDateOfBirthYear().type(year) -}) - -Cypress.Commands.add('enterDateOfDeath', (month, day, year) => { - pageObjects.applicantDateOfDeathMonth().select(month) - pageObjects.applicantDateOfDeathDay().type(day) - pageObjects.applicantDateOfDeathYear().type(year) -}) - -Cypress.Commands.add('enterDateOfFuneral', (month, day, year) => { - pageObjects.applicantDateOfFuneralMonth().select(month) - pageObjects.applicantDateOfFuneralDay().type(day) - pageObjects.applicantDateOfFuneralYear().type(year) +Cypress.Commands.add('enterDate', (month, day, year) => { + pageObjects.benefitMemorableDateById('month').select(month) + pageObjects.benefitMemorableDateById('day').type(day) + pageObjects.benefitMemorableDateById('year').type(year) }) diff --git a/benefit-finder/cypress/support/pageObjects.js b/benefit-finder/cypress/support/pageObjects.js index f4399283d..9dc78727d 100644 --- a/benefit-finder/cypress/support/pageObjects.js +++ b/benefit-finder/cypress/support/pageObjects.js @@ -5,48 +5,16 @@ class PageObjects { return cy.get('.usa-button') } - stepIndicator() { - return cy.get('.usa-step-indicator') + benefitMemorableDate() { + return cy.get('[data-testid="bf-usa-memorable-date"]') } - applicantDateOfBirthMonth() { - return cy.get('#applicant_date_of_birth_0_month') - } - - applicantDateOfBirthDay() { - return cy.get('#applicant_date_of_birth_0_day') - } - - applicantDateOfBirthYear() { - return cy.get('#applicant_date_of_birth_0_year') - } - - applicantDateOfDeathMonth() { - return cy.get('#deceased_date_of_death_0_month') - } - - applicantDateOfDeathDay() { - return cy.get('#deceased_date_of_death_0_day') - } - - applicantDateOfDeathYear() { - return cy.get('#deceased_date_of_death_0_year') - } - - applicantDateOfFuneralMonth() { - return cy.get('#deceased_date_of_funeral_0_month') - } - - applicantDateOfFuneralDay() { - return cy.get('#deceased_date_of_funeral_0_day') - } - - applicantDateOfFuneralYear() { - return cy.get('#deceased_date_of_funeral_0_year') + benefitMemorableDateById(id) { + return this.benefitMemorableDate().find(`[id$="${id}"]`) } benefitSectionAlert() { - return cy.get('div#bf-section > div[role="alert"]') + return cy.get('[data-testid="alert"]') } alertHeading() { @@ -61,34 +29,33 @@ class PageObjects { return cy.get('[data-testid="bf-errors-list-item"]') } - applicantRelationshipToDeceased() { - return cy.get('#applicant_relationship_to_the_deceased_0') - } - - applicantMaritalStatus() { - return cy.get('#applicant_marital_status_0') + fieldset() { + return cy.get('[data-testid="fieldset"]') } - benefitSectionFieldset() { - return cy.get('#bf-section .usa-fieldset') + fieldsetById(id) { + return this.fieldset().find(`[id^="${id}"]`) } - buttonGroup() { - return cy.get('.usa-button-group li') + modalButtonGroup() { + return cy.get('[data-testid="modal-button-group"]') } - accordion(heading) { - return cy.get(`[data-test-accordion-title="${heading}"]`) + accordionHeading() { + return cy.get('[data-testid="accordion-heading"]') } - benefitsAccordion() { - return cy.get('.usa-accordion__button') + accordionByTitle(title) { + return this.accordionHeading().contains(new RegExp(`^${title}$`)) } - benefitsAccordionLink(accordionHeading) { - return cy.get( - `[data-test-accordion-title="${accordionHeading}"] a[data-testid="bf-benefit-link"]` - ) + benefitsAccordionLink(title) { + return this.accordionHeading() + .contains(new RegExp(`^${title}$`)) + .parent() + .parent() + .parent() + .find('a[data-testid="bf-benefit-link"]') } menuButton() { @@ -107,60 +74,40 @@ class PageObjects { return cy.get('.usa-card-group li') } - selectField() { - return cy.get('main .bf-usa-select') - } - - inputField() { - return cy.get('main .usa-input') - } - radioGroup() { - return cy.get('main .radio-group') + return cy.get('[data-testid="radio-group"]') } expandAll() { - return cy.get('.bf-expand-all') + return cy.get('[data-testid="bf-expand-all"]') } - keyEligibilityCriteriaListIcon() { - return cy.get('.usa-accordion .bf-usa-list svg') + iconGreenCheck() { + return cy.get('[data-testid="icon-green-check"]') } benefitResultsView() { - return cy.get('.bf-result-view') + return cy.get('[data-testid="bf-result-view"]') } notEligibleResultsButton() { return cy.get('[data-testid="bf-result-view-unmet-button"]') } - dateOfBirthError() { - return cy.get('[data-testid="error-description-applicant_date_of_birth"]') + errorDescription() { + return cy.get('[data-testid="error-description"]') } dateOfBirthMonthError() { - return cy.get( - '[data-testid="month-error-description-applicant_date_of_birth_0"]' - ) + return cy.get('[data-testid="month-error-description"]') } dateOfBirthDayError() { - return cy.get( - '[data-testid="day-error-description-applicant_date_of_birth_0"]' - ) + return cy.get('[data-testid="day-error-description"]') } 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"]' - ) + return cy.get('[data-testid="year-error-description"]') } zeroBenefitsViewHeading() { diff --git a/benefit-finder/cypress/support/utils.js b/benefit-finder/cypress/support/utils.js index 0adb6d73f..f85803edb 100644 --- a/benefit-finder/cypress/support/utils.js +++ b/benefit-finder/cypress/support/utils.js @@ -1,4 +1,5 @@ import { pageObjects } from '../support/pageObjects' +import * as EN_DOLO_MOCK_DATA from '../../../benefit-finder/src/shared/api/mock-data/current.json' export function getDateByOffset(offset) { const date = new Date(Date.now()) @@ -32,11 +33,23 @@ export const storybookUri = `/iframe.html?args=&id=app--primary&viewMode=story&` export const dataInputs = ({ dob, relation, status, dod }) => { // input date of birth - dob && cy.enterDateOfBirth(dob.month, dob.day, dob.year) - // input relation to deceaseed - relation && pageObjects.applicantRelationshipToDeceased().select(relation) - // input relation to deceaseed - status && pageObjects.applicantMaritalStatus().select(status) + dob && cy.enterDate(dob.month, dob.day, dob.year) + // input relation to deceased + relation && + pageObjects + .fieldsetById( + EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[0] + .section.fieldsets[1].fieldset.inputs[0].inputCriteria.id + ) + .select(relation) + // input marital status + status && + pageObjects + .fieldsetById( + EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[0] + .section.fieldsets[2].fieldset.inputs[0].inputCriteria.id + ) + .select(status) // input date of death - dod && cy.enterDateOfDeath(dod.month, dod.day, dod.year) + dod && cy.enterDate(dod.month, dod.day, dod.year) } diff --git a/benefit-finder/src/App/__tests__/__snapshots__/index.spec.jsx.snap b/benefit-finder/src/App/__tests__/__snapshots__/index.spec.jsx.snap index 1a212f51e..b59123c18 100644 --- a/benefit-finder/src/App/__tests__/__snapshots__/index.spec.jsx.snap +++ b/benefit-finder/src/App/__tests__/__snapshots__/index.spec.jsx.snap @@ -245,6 +245,7 @@ exports[`loads intro 1`] = ` > diff --git a/benefit-finder/src/shared/components/Button/__tests__/__snapshots__/index.spec.jsx.snap b/benefit-finder/src/shared/components/Button/__tests__/__snapshots__/index.spec.jsx.snap index f3e8c2fe0..4e04b8d37 100644 --- a/benefit-finder/src/shared/components/Button/__tests__/__snapshots__/index.spec.jsx.snap +++ b/benefit-finder/src/shared/components/Button/__tests__/__snapshots__/index.spec.jsx.snap @@ -4,6 +4,7 @@ exports[`Button > renders a match to the previous snapshot 1`] = `