From afefd53ab0d78d8cb3b3242fe33f23a55f799690 Mon Sep 17 00:00:00 2001 From: Nehemiah Abuga <121119072+nehemiah-abuga@users.noreply.github.com> Date: Tue, 3 Sep 2024 07:55:27 -0700 Subject: [PATCH 01/12] PXBF-1567-data-attributes-in-selectors: 1567 data attributes in selectors --- .../e2e/storybook/aria-attribute-state.cy.js | 22 +-- .../cypress/e2e/storybook/axe-a11y.cy.js | 4 +- .../cypress/e2e/storybook/dataLayer.cy.js | 19 ++- .../e2e/storybook/openAllAccordions.cy.js | 2 +- ...lected-criteria-eligibility-benefits.cy.js | 40 +++--- benefit-finder/cypress/support/pageObjects.js | 91 ++++++------ .../__snapshots__/index.spec.jsx.snap | 131 ++++++++++++++++++ .../__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 | 2 + .../BenefitAccordionGroup/index.jsx | 1 + .../__snapshots__/index.spec.jsx.snap | 1 + .../src/shared/components/Button/index.jsx | 1 + .../__snapshots__/index.spec.jsx.snap | 3 + .../shared/components/ButtonGroup/index.jsx | 5 +- .../__snapshots__/index.spec.jsx.snap | 3 + .../src/shared/components/Date/index.jsx | 3 + .../__snapshots__/index.spec.jsx.snap | 2 + .../src/shared/components/Fieldset/index.jsx | 1 + .../__snapshots__/index.spec.jsx.snap | 1 + .../src/shared/components/Intro/index.jsx | 2 +- .../KeyElegibilityCrieriaList/index.jsx | 5 +- .../__snapshots__/index.spec.jsx.snap | 25 ++++ .../components/LifeEventSection/index.jsx | 12 +- .../src/shared/components/Modal/index.jsx | 6 +- .../__snapshots__/index.spec.jsx.snap | 1 + .../__snapshots__/index.spec.jsx.snap | 1 + .../src/shared/components/Radio/index.jsx | 2 +- .../__snapshots__/index.spec.jsx.snap | 1 + .../shared/components/RadioGroup/index.jsx | 6 +- .../__snapshots__/index.spec.jsx.snap | 130 +++++++++++++++++ .../__snapshots__/index.spec.jsx.snap | 2 + .../ResultsView/components/Results/index.jsx | 1 + .../__snapshots__/index.spec.jsx.snap | 1 + .../__snapshots__/index.spec.jsx.snap | 1 + .../src/shared/components/Select/index.jsx | 1 + .../__snapshots__/index.spec.jsx.snap | 2 + .../components/StepBackButton/index.jsx | 1 + .../__snapshots__/index.spec.jsx.snap | 2 + .../__snapshots__/index.spec.jsx.snap | 4 + .../components/VerifySelectionsView/index.jsx | 1 + 43 files changed, 448 insertions(+), 101 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..f3fbe0f15 100644 --- a/benefit-finder/cypress/e2e/storybook/aria-attribute-state.cy.js +++ b/benefit-finder/cypress/e2e/storybook/aria-attribute-state.cy.js @@ -21,12 +21,12 @@ describe('Validate state of aria-invalid attribute', () => { it('Should have default state of "false" for select, input, and radio', () => { pageObjects - .selectField() + .applicantDateOfBirthMonth() .invoke('attr', 'aria-invalid') .should('eq', 'false') pageObjects - .inputField() + .applicantDateOfBirthDay() .invoke('attr', 'aria-invalid') .should('eq', 'false') @@ -40,31 +40,37 @@ describe('Validate state of aria-invalid attribute', () => { pageObjects.button().contains(EN_LOCALE_DATA.buttonGroup[1].value).click() pageObjects - .selectField() + .applicantDateOfBirthMonth() .invoke('attr', 'aria-invalid') .should('eq', 'true') - pageObjects.inputField().invoke('attr', 'aria-invalid').should('eq', 'true') + pageObjects + .applicantDateOfBirthYear() + .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() + .applicantRelationshipToDeceased() + .invoke('attr', 'aria-invalid') + .should('eq', 'true') + pageObjects + .applicantDateOfBirthDay() .invoke('attr', 'aria-invalid') .should('eq', 'true') - pageObjects.inputField().invoke('attr', 'aria-invalid').should('eq', 'true') utils.dataInputs({ dob, relation, status }) pageObjects - .selectField() + .applicantMaritalStatus() .invoke('attr', 'aria-invalid') .should('eq', 'false') pageObjects - .inputField() + .applicantDateOfBirthYear() .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 0966b4d96..b6ecc938a 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-analytics-content')}` ) .click() @@ -149,7 +149,7 @@ describe(`Validate code passes axe scanning`, () => { // get the heading of the first in the list cy.get(`[data-analytics="bf-usa-accordion"]`).then(accordionItems => { pageObjects - .accordion( + .accordionByTitle( `${accordionItems[0].getAttribute('data-analytics-content')}` ) .click() diff --git a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js index 85046ed42..a7641c65f 100644 --- a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js +++ b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js @@ -395,7 +395,7 @@ describe('Calls to Google Analytics Object', function () { assert.isDefined(window.dataLayer, 'window.dataLayer is defined') pageObjects - .benefitsAccordion() + .accordionHeading() .filter(':visible') .should( 'have.length', @@ -426,14 +426,16 @@ describe('Calls to Google Analytics Object', function () { 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(() => { @@ -458,14 +460,16 @@ describe('Calls to Google Analytics Object', function () { 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(() => { @@ -515,7 +519,7 @@ describe('Calls to Google Analytics Object', function () { .click() .then(() => { pageObjects - .benefitsAccordion() + .accordionHeading() .filter(':visible') .should( 'have.length', @@ -650,6 +654,7 @@ describe('Calls to Google Analytics Object', function () { it('clicking open all on results page has a bf_open_all_accordions event', function () { cy.visit(`${utils.storybookUri}${scenario}`) + pageObjects.accordionHeading().should('exist') cy.window().then(window => { assert.isDefined(window.dataLayer, 'window.dataLayer is defined') @@ -1003,7 +1008,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/openAllAccordions.cy.js b/benefit-finder/cypress/e2e/storybook/openAllAccordions.cy.js index 442ad25cb..e827a8803 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', () => { @@ -67,7 +68,6 @@ describe('open all interaction tests', () => { it('from the not eligible view, validate clicking open all expands the accordions, then toggling eligible view, sets them back to close', () => { // make sure all the accordions on not eligible view are closed // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(1000) // TODO: figure out why we have to wait here pageObjects .notEligibleResultsButton() .click() 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 d8c79f7c6..d22f37049 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 @@ -31,13 +31,10 @@ describe('Validate correct eligibility benefits display based on selected criter ) pageObjects - .benefitSectionFieldset() - .contains( + .radioButtonById( EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[0] - .section.fieldsets[3].fieldset.inputs[0].inputCriteria.label + .section.fieldsets[3].fieldset.inputs[0].inputCriteria.id ) - .parent() - .find('.usa-radio__label') .contains('Yes') .click() @@ -48,24 +45,18 @@ describe('Validate correct eligibility benefits display based on selected criter cy.enterDateOfDeath(dateOfDeath.month, dateOfDeath.day, dateOfDeath.year) pageObjects - .benefitSectionFieldset() - .contains( + .radioButtonById( EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[1] - .section.fieldsets[2].fieldset.legend + .section.fieldsets[2].fieldset.inputs[0].inputCriteria.id ) - .parent() - .find('.usa-radio__label') .contains('Yes') .click() pageObjects - .benefitSectionFieldset() - .contains( + .radioButtonById( EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[1] - .section.fieldsets[3].fieldset.legend + .section.fieldsets[3].fieldset.inputs[0].inputCriteria.id ) - .parent() - .find('.usa-radio__label') .contains('Yes') .click() @@ -76,9 +67,12 @@ describe('Validate correct eligibility benefits display based on selected criter .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() - .find('.bf-key-eligibility-criteria-list li') + .parent() + .parent() + .parent() + .find('[data-testid="bf-key-eligibility-criteria-list"] li') .should( 'contain', EN_DOLO_MOCK_DATA.data.benefits[23].benefit.eligibility[0].label @@ -112,7 +106,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 +164,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 +182,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 +197,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 +211,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/pageObjects.js b/benefit-finder/cypress/support/pageObjects.js index fb6b68357..ee587586b 100644 --- a/benefit-finder/cypress/support/pageObjects.js +++ b/benefit-finder/cypress/support/pageObjects.js @@ -1,52 +1,48 @@ -/// +/// class PageObjects { button() { return cy.get('.usa-button') } - stepIndicator() { - return cy.get('.usa-step-indicator') - } - applicantDateOfBirthMonth() { - return cy.get('#applicant_date_of_birth_0_month') + return cy.get('[data-testid="applicant_date_of_birth_0_month"]') } applicantDateOfBirthDay() { - return cy.get('#applicant_date_of_birth_0_day') + return cy.get('[data-testid="applicant_date_of_birth_0_day"]') } applicantDateOfBirthYear() { - return cy.get('#applicant_date_of_birth_0_year') + return cy.get('[data-testid="applicant_date_of_birth_0_year"]') } applicantDateOfDeathMonth() { - return cy.get('#deceased_date_of_death_0_month') + return cy.get('[data-testid="deceased_date_of_death_0_month"]') } applicantDateOfDeathDay() { - return cy.get('#deceased_date_of_death_0_day') + return cy.get('[data-testid="deceased_date_of_death_0_day"]') } applicantDateOfDeathYear() { - return cy.get('#deceased_date_of_death_0_year') + return cy.get('[data-testid="deceased_date_of_death_0_year"]') } applicantDateOfFuneralMonth() { - return cy.get('#deceased_date_of_funeral_0_month') + return cy.get('[data-testid="deceased_date_of_funeral_0_month"]') } applicantDateOfFuneralDay() { - return cy.get('#deceased_date_of_funeral_0_day') + return cy.get('[data-testid="deceased_date_of_funeral_0_day"]') } applicantDateOfFuneralYear() { - return cy.get('#deceased_date_of_funeral_0_year') + return cy.get('[data-testid="deceased_date_of_funeral_0_year"]') } benefitSectionAlert() { - return cy.get('div#bf-section > div[role="alert"]') + return cy.get('[data-testid="alert"]') } alertHeading() { @@ -62,73 +58,68 @@ class PageObjects { } applicantRelationshipToDeceased() { - return cy.get('#applicant_relationship_to_the_deceased_0') + return cy.get('[data-testid="applicant_relationship_to_the_deceased_0"]') } applicantMaritalStatus() { - return cy.get('#applicant_marital_status_0') + return cy.get('[data-testid="applicant_marital_status_0"]') } benefitSectionFieldset() { - return cy.get('#bf-section .usa-fieldset') - } - - buttonGroup() { - return cy.get('.usa-button-group li') + return cy.get('[data-testid="fieldset"]') } - accordion(heading) { - return cy.get(`[data-analytics-content="${heading}"]`) + benefitSectionFieldsetById(id) { + return this.benefitSectionFieldset().filter(`#${id}`) } - benefitsAccordion() { - return cy.get('.usa-accordion__button') + radioButtonById(id) { + return this.benefitSectionFieldsetById(id).find('[data-testid="radio"]') } - benefitsAccordionLink(accordionHeading) { - return cy.get( - `[data-analytics-content="${accordionHeading}"] a[data-testid="bf-benefit-link"]` - ) - } - - menuButton() { - return cy.get('.usa-menu-btn') + buttonGroup() { + return cy.get('[data-testid="button-group"] li') } - mobileMenu() { - return cy.get('.usagov-mobile-menu') + accordionHeading() { + return cy.get('[data-testid="accordion-heading"]') } - breadCrumbList() { - return cy.get('.usa-breadcrumb__list') + accordion() { + return cy.get('[data-testid="benefit"]') } - cardGroup() { - return cy.get('.usa-card-group li') + accordionByTitle(title) { + return this.accordionHeading().contains(new RegExp(`^${title}$`)) } - selectField() { - return cy.get('main .bf-usa-select') + benefitsAccordionLink(title) { + return this.accordionHeading() + .contains(new RegExp(`^${title}$`)) + .parent() + .parent() + .parent() + .find('a[data-testid="bf-benefit-link"]') } - inputField() { - return cy.get('main .usa-input') + keyEligibilityCriteriaList() { + return cy.get('[data-testid="bf-key-eligibility-criteria-list"] li') } 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() { @@ -136,7 +127,7 @@ class PageObjects { } stepBackLink() { - return cy.get('.bf-step-back-button') + return cy.get('[data-testid="bf-step-back-button"]') } dateOfBirthError() { 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 158697732..08baa7ede 100644 --- a/benefit-finder/src/App/__tests__/__snapshots__/index.spec.jsx.snap +++ b/benefit-finder/src/App/__tests__/__snapshots__/index.spec.jsx.snap @@ -244,6 +244,7 @@ exports[`loads intro 1`] = ` > {modal === false ? ( - ) : ( diff --git a/benefit-finder/src/shared/components/Modal/index.jsx b/benefit-finder/src/shared/components/Modal/index.jsx index 2622cb75c..894b2ef01 100644 --- a/benefit-finder/src/shared/components/Modal/index.jsx +++ b/benefit-finder/src/shared/components/Modal/index.jsx @@ -181,7 +181,10 @@ const Modal = ({ handleKeyValidation(e) && handleCloseModal(triggerRef) && navFunction() } return ( -