From ac1de2b7277b97347f8ad63be8b2eb906dd3a6df Mon Sep 17 00:00:00 2001 From: Nehemiah Abuga <121119072+nehemiah-abuga@users.noreply.github.com> Date: Sun, 24 Nov 2024 18:36:05 -0700 Subject: [PATCH] PXBF-1863-cypress-remove-cy-wait: refactoring cypress tests to remove waits --- .../e2e/storybook/benefitAccordionGroup.cy.js | 49 ++- .../cypress/e2e/storybook/dataLayer.cy.js | 344 ++++++++++-------- .../e2e/storybook/openAllAccordions.cy.js | 5 +- 3 files changed, 212 insertions(+), 186 deletions(-) diff --git a/benefit-finder/cypress/e2e/storybook/benefitAccordionGroup.cy.js b/benefit-finder/cypress/e2e/storybook/benefitAccordionGroup.cy.js index 57af813aa..c80cb37b3 100644 --- a/benefit-finder/cypress/e2e/storybook/benefitAccordionGroup.cy.js +++ b/benefit-finder/cypress/e2e/storybook/benefitAccordionGroup.cy.js @@ -1,10 +1,12 @@ import * as utils from '../../support/utils' import * as BENEFITS_ELIBILITY_DATA from '../../fixtures/benefits-eligibility.json' +import { pageObjects } from '../../support/pageObjects' 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('BenefitAccordionGroup component tests', () => { @@ -17,33 +19,26 @@ describe('BenefitAccordionGroup component tests', () => { }) it('Validate opening individual accordion expands the clicked accordion and clicking it again closes it', () => { - // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(2500).then(() => { - // get the first visible accordion and check if it is expanded - cy.get('.bf-usa-accordion:visible .bf-usa-accordion__button') - .eq(0) - .should('have.attr', 'aria-expanded', 'false') - // get the first visible accordion and click it - cy.get('.bf-usa-accordion:visible .bf-usa-accordion__button') - .eq(0) - .click() - // get the first visible accordion and check if it is expanded - cy.get('.bf-usa-accordion:visible .bf-usa-accordion__button') - .eq(0) - .should('have.attr', 'aria-expanded', 'true') - // get the second visible accordion and check if it is expanded - cy.get('.bf-usa-accordion:visible .bf-usa-accordion__button') - .eq(1) - .should('have.attr', 'aria-expanded', 'false') - // get the first visible accordion and click it - cy.get('.bf-usa-accordion:visible .bf-usa-accordion__button') - .eq(0) - .click() - // get the first visible accordion and check if it is expanded - cy.get('.bf-usa-accordion:visible .bf-usa-accordion__button') - .eq(0) - .should('have.attr', 'aria-expanded', 'false') - }) + // get the first visible accordion and check if it is expanded + cy.get('.bf-usa-accordion:visible .bf-usa-accordion__button') + .eq(0) + .should('have.attr', 'aria-expanded', 'false') + // get the first visible accordion and click it + cy.get('.bf-usa-accordion:visible .bf-usa-accordion__button').eq(0).click() + // get the first visible accordion and check if it is expanded + cy.get('.bf-usa-accordion:visible .bf-usa-accordion__button') + .eq(0) + .should('have.attr', 'aria-expanded', 'true') + // get the second visible accordion and check if it is expanded + cy.get('.bf-usa-accordion:visible .bf-usa-accordion__button') + .eq(1) + .should('have.attr', 'aria-expanded', 'false') + // get the first visible accordion and click it + cy.get('.bf-usa-accordion:visible .bf-usa-accordion__button').eq(0).click() + // get the first visible accordion and check if it is expanded + cy.get('.bf-usa-accordion:visible .bf-usa-accordion__button') + .eq(0) + .should('have.attr', 'aria-expanded', 'false') }) it('Validate clicking Expand all opens all accordions', () => { diff --git a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js index ec2ebecb9..4176c7549 100644 --- a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js +++ b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js @@ -21,7 +21,6 @@ const selectedData = BENEFITS_ELIBILITY_DATA.scenario_1_covid.en.param const enResults = BENEFITS_ELIBILITY_DATA.scenario_1_covid.en.results const zero_benefit_view = BENEFITS_ELIBILITY_DATA.zero_benefit_view.en.results const scenario = utils.encodeURIFromObject(selectedData) -const wait = 1000 // calculate out elibibility counts we expect for our event values const eligibilityCount = { @@ -232,27 +231,25 @@ 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( - window.dataLayer.find(x => x.event === 'gtm.load'), - 'GTM is done loading' + // Check for GTM load event + cy.wrap(window.dataLayer).then(dataLayer => { + const gtmEvent = dataLayer.find(x => x.event === 'gtm.load') + assert.isDefined(gtmEvent, 'GTM is done loading') + }) + cy.wrap(window.dataLayer).then(dataLayer => { + const bfPageChangeEvent = dataLayer.find( + x => x.event === 'bf_page_change' ) - assert.isDefined( - window.dataLayer.find(x => x.event === 'bf_page_change'), - 'bf_page_change is loaded' + assert.isDefined(bfPageChangeEvent, 'bf_page_change is loaded') + + // get the last pushed event + const bfEventIndex = window.dataLayer.findIndex( + x => x.event === 'bf_page_change' ) - // eslint-disable-next-line cypress/no-unnecessary-waiting - 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) + const ev = { ...window.dataLayer[bfEventIndex] } + removeID(ev) - expect(ev).to.deep.equal(dataLayerValueIntro) - }) + expect(ev).to.deep.equal(dataLayerValueIntro) }) }) }) @@ -403,18 +400,25 @@ describe('Calls to Google Analytics Object', function () { dataLayerValueResultsViewEligible.bfData.eligibleBenefitCount.number ) .then(() => { - // we wait for the last event to fire - // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(wait).then(() => { - // get all the events in our layer that matches the event value - const ev = { - ...window.dataLayer.filter( - x => x?.event === dataLayerValueResultsViewEligible.event - ), - } - removeID(ev[0]) - - expect(ev[0]).to.deep.equal(dataLayerValueResultsViewEligible) + // Wait dynamically for the bf_page_change and bf_count events + cy.wrap(window.dataLayer).should(dataLayer => { + const matchingEvents = dataLayer.filter( + x => x?.event === dataLayerValueResultsViewEligible.event + ) + assert.isNotEmpty( + matchingEvents, + 'bf_page_change and bf_count events are triggered' + ) + }) + + // Validate the details of the first matching event + cy.wrap(window.dataLayer).then(dataLayer => { + const ev = dataLayer.filter( + x => x?.event === dataLayerValueResultsViewEligible.event + )[0] + removeID(ev) + + expect(ev).to.deep.equal(dataLayerValueResultsViewEligible) }) }) }) @@ -438,18 +442,26 @@ describe('Calls to Google Analytics Object', function () { 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(() => { + // Wait for the bf_accordion_open event dynamically + cy.wrap(window.dataLayer).should(dataLayer => { // get all the events in our layer that matches the event value - const ev = [ - ...window.dataLayer.filter( - x => x?.event === dataLayerValueAccordionOpen.event - ), - ] - removeID(ev[0]) - - expect(ev[0]).to.deep.equal(dataLayerValueAccordionOpen) + const matchingEvents = dataLayer.filter( + x => x?.event === dataLayerValueAccordionOpen.event + ) + assert.isNotEmpty( + matchingEvents, + 'bf_accordion_open event is triggered' + ) + }) + // Validate the last event details + cy.wrap(window.dataLayer).then(dataLayer => { + const ev = dataLayer.filter( + x => x?.event === dataLayerValueAccordionOpen.event + )[0] + + removeID(ev) + + expect(ev).to.deep.equal(dataLayerValueAccordionOpen) }) }) }) @@ -470,37 +482,56 @@ describe('Calls to Google Analytics Object', function () { dataLayerValueResultsViewEligible.bfData.eligibleBenefitCount.number ) .then(() => { + // Open accordion 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(() => { - // get all the events in our layer that matches the event value - const ev = [ - ...window.dataLayer.filter( - x => x?.event === dataLayerValueAccordionOpen.event - ), - ] - removeID(ev[0]) - - expect(ev[0]).to.deep.equal(dataLayerValueAccordionOpen) - pageObjects.accordionHeading().should('exist') - pageObjects - .benefitsAccordionLink(enResults.eligible.eligible_benefits[0]) - .invoke('removeAttr', 'href') - .click({ force: true }) - .then(() => { - // get all the events in our layer that matches the event value - const ev = [ - ...window.dataLayer.filter( - x => x?.event === dataLayerValueBenefitLink.event - ), - ] - removeID(ev[0]) - - expect(ev[0]).to.deep.equal(dataLayerValueBenefitLink) - }) + + // Wait dynamically for the bf_accordion_open event + cy.wrap(window.dataLayer).should(dataLayer => { + const matchingEvents = dataLayer.filter( + x => x?.event === dataLayerValueAccordionOpen.event + ) + assert.isNotEmpty( + matchingEvents, + 'bf_accordion_open event is triggered' + ) + }) + + // Validate bf_accordion_open event + cy.wrap(window.dataLayer).then(dataLayer => { + const ev = dataLayer.filter( + x => x?.event === dataLayerValueAccordionOpen.event + )[0] + removeID(ev) + + expect(ev).to.deep.equal(dataLayerValueAccordionOpen) + }) + + pageObjects.accordionHeading().should('exist') + pageObjects + .benefitsAccordionLink(enResults.eligible.eligible_benefits[0]) + .invoke('removeAttr', 'href') + .click({ force: true }) + + // Wait dynamically for the bf_benefit_link event + cy.wrap(window.dataLayer).should(dataLayer => { + const matchingEvents = dataLayer.filter( + x => x?.event === dataLayerValueBenefitLink.event + ) + assert.isNotEmpty( + matchingEvents, + 'bf_benefit_link event is triggered' + ) + }) + // Validate bf_benefit_link event + cy.wrap(window.dataLayer).then(dataLayer => { + const ev = dataLayer.filter( + x => x?.event === dataLayerValueBenefitLink.event + )[0] + removeID(ev) + + expect(ev).to.deep.equal(dataLayerValueBenefitLink) }) }) }) @@ -513,7 +544,7 @@ describe('Calls to Google Analytics Object', function () { cy.window().then(window => { assert.isDefined(window.dataLayer, 'window.dataLayer is defined') - // get visible benfits results + // get visible benefits results pageObjects .accordionHeading() .filter(':visible') @@ -522,49 +553,40 @@ describe('Calls to Google Analytics Object', function () { dataLayerValueResultsViewEligible.bfData.eligibleBenefitCount.number ) .then(() => { - // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(2500).then(() => { - // click not eligible benefits view - pageObjects - .notEligibleResultsButton() - .click() - .then(() => { - pageObjects - .accordionHeading() - .filter(':visible') - .should( - 'have.length', - dataLayerValueResultsViewNotEligible.bfData - .notEligibleBenefitCount.number + - dataLayerValueResultsViewNotEligible.bfData - .moreInfoBenefitCount.number - ) - .then(() => { - // we wait for the last event to fire - // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(2500).then(() => { - // get all the events in our layer that matches the event value - const ev = [ - ...window.dataLayer.filter( - x => - x?.event === - dataLayerValueResultsViewNotEligible.event - ), - ] + // click not eligible benefits view + pageObjects.notEligibleResultsButton().click() + // Validate updated accordion count for "Not Eligible Benefits" + pageObjects + .accordionHeading() + .filter(':visible') + .should( + 'have.length', + dataLayerValueResultsViewNotEligible.bfData + .notEligibleBenefitCount.number + + dataLayerValueResultsViewNotEligible.bfData.moreInfoBenefitCount + .number + ) - const bfEventIndex = ev.findIndex( - x => - x.bfData.viewTitle === - dataLayerValueResultsViewNotEligible.bfData.viewTitle - ) - removeID(ev[bfEventIndex]) + // get all the events in our layer that matches the event value + cy.wrap(window.dataLayer).should(dataLayer => { + const matchingEvents = dataLayer.filter( + x => x?.event === dataLayerValueResultsViewNotEligible.event + ) + assert.isNotEmpty( + matchingEvents, + 'bf_page_change and bf_count events are triggered' + ) - expect(ev[bfEventIndex]).to.deep.equal( - dataLayerValueResultsViewNotEligible - ) - }) - }) - }) + const bfEventIndex = matchingEvents.findIndex( + x => + x.bfData.viewTitle === + dataLayerValueResultsViewNotEligible.bfData.viewTitle + ) + removeID(matchingEvents[bfEventIndex]) + + expect(matchingEvents[bfEventIndex]).to.deep.equal( + dataLayerValueResultsViewNotEligible + ) }) }) }) @@ -976,61 +998,73 @@ describe('Calls to Google Analytics Object', function () { 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(() => { - // check last page change event - const ev = [ - ...window.dataLayer.filter( + cy.wrap(window.dataLayer).should( + dataLayer => { + const matchingEvents = dataLayer.filter( x => x?.event === dataLayerValueAccordionOpen.event - ), - ] - removeID(ev[0]) + ) + assert.isNotEmpty( + matchingEvents, + 'bf_accordion_open event is triggered' + ) + } + ) - expect(ev[0]).to.deep.equal( + // check last page change event + cy.wrap(window.dataLayer).then(dataLayer => { + const ev = dataLayer.filter( + x => + x?.event === + dataLayerValueAccordionOpen.event + )[0] + + removeID(ev) + + expect(ev).to.deep.equal( dataLayerValueAccordionOpen ) + }) - pageObjects - .benefitsAccordionLink( - enResults.eligible.eligible_benefits[0] + pageObjects + .benefitsAccordionLink( + enResults.eligible.eligible_benefits[0] + ) + .invoke('removeAttr', 'href') + .click() + .then(() => { + const ev = [ + ...window.dataLayer.filter( + x => + x?.event === + dataLayerValueBenefitLink.event + ), + ] + // delete ev[0]['gtm.uniqueEventId'] + removeID(ev[0]) + expect(ev[0]).to.deep.equal( + dataLayerValueBenefitLink ) - .invoke('removeAttr', 'href') - .click() - .then(() => { - const ev = [ - ...window.dataLayer.filter( - x => - x?.event === - dataLayerValueBenefitLink.event - ), - ] - // delete ev[0]['gtm.uniqueEventId'] - removeID(ev[0]) - expect(ev[0]).to.deep.equal( - dataLayerValueBenefitLink - ) - // loop through the data layer and remove any events that are gtm + // loop through the data layer and remove any events that are gtm - const bfDataLayer = - window.dataLayer.filter( - item => !item.event.includes('gtm') - ) + const bfDataLayer = + window.dataLayer.filter( + item => !item.event.includes('gtm') + ) - const cleanBfDataLayer = - bfDataLayer.map(item => { - removeID(item) - return item - }) + const cleanBfDataLayer = bfDataLayer.map( + item => { + removeID(item) + return item + } + ) - expect(cleanBfDataLayer).to.deep.equal( - dataLayerValues - ) - }) - }) + expect(cleanBfDataLayer).to.deep.equal( + dataLayerValues + ) + }) }) }) }) diff --git a/benefit-finder/cypress/e2e/storybook/openAllAccordions.cy.js b/benefit-finder/cypress/e2e/storybook/openAllAccordions.cy.js index 4a2739590..411c2b425 100644 --- a/benefit-finder/cypress/e2e/storybook/openAllAccordions.cy.js +++ b/benefit-finder/cypress/e2e/storybook/openAllAccordions.cy.js @@ -66,9 +66,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() @@ -105,4 +102,4 @@ describe('open all interaction tests', () => { }) }) }) -}) \ No newline at end of file +})