From 057ff1a3394aefd08ba95940f965c7a24218abe6 Mon Sep 17 00:00:00 2001 From: scottqueen-bixal Date: Tue, 23 Jul 2024 06:36:22 -0400 Subject: [PATCH 01/16] PXBF-1548-update-gtm-e2e-tests: include benefit link data layer event coverage --- .../cypress/e2e/storybook/dataLayer.cy.js | 208 ++++++++++++++++-- benefit-finder/cypress/support/pageObjects.js | 4 + .../BenefitAccordionGroup/index.jsx | 1 + 3 files changed, 193 insertions(+), 20 deletions(-) diff --git a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js index 31dc6e51a..07d631ade 100644 --- a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js +++ b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js @@ -4,33 +4,66 @@ import { dataLayerUtils } from '../../../src/shared/utils' 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' const { intro, lifeEventSection, resultsView, openAllBenefitAccordions } = dataLayerUtils.dataLayerStructure +const { lifeEventForm } = content.data + +const selectedData = BENEFITS_ELIBILITY_DATA.scenario_1_covid.en.param +const enResults = BENEFITS_ELIBILITY_DATA.scenario_1_covid.en.results +const scenario = utils.encodeURIFromObject(selectedData) + +const eligibilityCount = { + eligibleBenefitCount: { + number: enResults.eligible.length, + string: `${enResults.eligible.length}`, + }, + moreInfoBenefitCount: { + number: enResults.moreInformationNeeded.length, + string: `${enResults.moreInformationNeeded.length}`, + }, + notEligibleBenefitCount: { + number: + enResults.total_benefits - + (enResults.eligible.length + enResults.moreInformationNeeded.length), + string: `${ + enResults.total_benefits - + (enResults.eligible.length + enResults.moreInformationNeeded.length) + }`, + }, +} + const dataLayerValues = [ { event: intro.event, bfData: { pageView: intro.bfData.pageView, - viewTitle: 'Benefit finder: death of a loved one', + viewTitle: lifeEventForm.title, }, }, { event: lifeEventSection.event, bfData: { pageView: `${lifeEventSection.bfData.pageView}-1`, - viewTitle: 'About the applicant', + viewTitle: lifeEventForm.sectionsEligibilityCriteria[0].section.heading, }, }, { event: resultsView.event, bfData: { pageView: resultsView.bfData.pageView[0], - viewTitle: 'Your potential benefits', - eligibleBenefitCount: { number: 4, string: '4' }, - moreInfoBenefitCount: { number: 1, string: '1' }, - notEligibleBenefitCount: { number: 25, string: '25' }, + viewTitle: EN_LOCALE_DATA.resultsView.eligible.chevron.heading, + ...eligibilityCount, + }, + }, + { + event: resultsView.event, + bfData: { + pageView: resultsView.bfData.pageView[1], + viewTitle: EN_LOCALE_DATA.resultsView.notEligible.chevron.heading, + ...eligibilityCount, }, }, { @@ -39,8 +72,25 @@ const dataLayerValues = [ accordionsOpen: openAllBenefitAccordions.bfData.accordionsOpen, }, }, + { + event: 'bf_accordion_open', + bfData: { + benefitTitle: enResults.eligible.eligible_benefits[0], + }, + }, + { + event: 'bf_benefit_link', + bfData: { + benefitTitle: enResults.eligible.eligible_benefits[0], + }, + }, ] +// check incrmenting events +// check modal event +// check benefit accordion event +// check benefitLink event + describe('Basic Data Layer Checks', () => { it('has a dataLayer and loads GTM', () => { cy.visit(utils.storybookUri) @@ -95,10 +145,7 @@ describe('Calls to Google Analytics Object', function () { }) }) - it('results page has a bf_page_change and bf_count events', function () { - const selectedData = BENEFITS_ELIBILITY_DATA.scenario_1_covid.en.param - const enResults = BENEFITS_ELIBILITY_DATA.scenario_1_covid.en.results - const scenario = utils.encodeURIFromObject(selectedData) + it('results page with eligible benefits has a bf_page_change and bf_count events', function () { cy.visit(`${utils.storybookUri}${scenario}`) cy.window().then(window => { @@ -107,7 +154,10 @@ describe('Calls to Google Analytics Object', function () { pageObjects .benefitsAccordion() .filter(':visible') - .should('have.length', enResults.eligible.length) + .should( + 'have.length', + dataLayerValues[2].bfData.eligibleBenefitCount.number + ) .then(() => { // we wait for the last event to fire // eslint-disable-next-line cypress/no-unnecessary-waiting @@ -126,9 +176,123 @@ 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}`) + + cy.window().then(window => { + assert.isDefined(window.dataLayer, 'window.dataLayer is defined') + + pageObjects + .benefitsAccordion() + .filter(':visible') + .should( + 'have.length', + dataLayerValues[2].bfData.eligibleBenefitCount.number + ) + .then(() => { + pageObjects.accordion(enResults.eligible.eligible_benefits[0]).click() + // we wait for the last event to fire + // eslint-disable-next-line cypress/no-unnecessary-waiting + cy.wait(100).then(() => { + // check last page change event + const ev = [ + ...window.dataLayer.filter( + x => x?.event === dataLayerValues[5].event + ), + ] + delete ev[0]['gtm.uniqueEventId'] + + expect(ev[0]).to.deep.equal(dataLayerValues[5]) + }) + }) + }) + }) + + 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}`) + + cy.window().then(window => { + assert.isDefined(window.dataLayer, 'window.dataLayer is defined') + + pageObjects + .benefitsAccordion() + .filter(':visible') + .should( + 'have.length', + dataLayerValues[2].bfData.eligibleBenefitCount.number + ) + .then(() => { + pageObjects.accordion(enResults.eligible.eligible_benefits[0]).click() + // we wait for the last event to fire + // eslint-disable-next-line cypress/no-unnecessary-waiting + cy.wait(100).then(() => { + // check last page change event + const ev = [ + ...window.dataLayer.filter( + x => x?.event === dataLayerValues[5].event + ), + ] + delete ev[0]['gtm.uniqueEventId'] + + expect(ev[0]).to.deep.equal(dataLayerValues[5]) + }) + + pageObjects + .benefitsAccordionLink(enResults.eligible.eligible_benefits[0]) + .invoke('removeAttr', 'href') + .click() + .then(() => { + const ev = [ + ...window.dataLayer.filter( + x => x?.event === dataLayerValues[6].event + ), + ] + delete ev[0]['gtm.uniqueEventId'] + expect(ev[0]).to.deep.equal(dataLayerValues[6]) + }) + }) + }) + }) + + it('results page with not eligible benefits has a bf_page_change and bf_count events', function () { + cy.visit(`${utils.storybookUri}${scenario}`) + + // click not eligible benefits view + pageObjects.notEligibleResultsButton().click() + + cy.window().then(window => { + assert.isDefined(window.dataLayer, 'window.dataLayer is defined') + + pageObjects + .benefitsAccordion() + .filter(':visible') + .should( + 'have.length', + dataLayerValues[3].bfData.notEligibleBenefitCount.number + + dataLayerValues[3].bfData.moreInfoBenefitCount.number + ) + .then(() => { + // we wait for the last event to fire + // eslint-disable-next-line cypress/no-unnecessary-waiting + cy.wait(100).then(() => { + // check last page change event + const ev = [ + ...window.dataLayer.filter( + x => x?.event === dataLayerValues[3].event + ), + ] + delete ev[1]['gtm.uniqueEventId'] + console.log(ev[1]) + + expect(ev[1]).to.deep.equal(dataLayerValues[3]) + }) + }) + }) + }) + it('clicking open all on results page has a bf_open_all_accordions event', function () { - const selectedData = BENEFITS_ELIBILITY_DATA.scenario_1_covid.en.param const scenario = utils.encodeURIFromObject(selectedData) + cy.visit(`${utils.storybookUri}${scenario}`) cy.window().then(window => { @@ -139,14 +303,15 @@ describe('Calls to Google Analytics Object', function () { .click() .then(() => { // check last page change event - const ev = { + const ev = [ ...window.dataLayer.filter( - x => x?.event === dataLayerValues[3].event + x => x?.event === dataLayerValues[4].event ), - } + ] + console.log(ev) delete ev[0]['gtm.uniqueEventId'] - expect(dataLayerValues[3]).to.deep.equal(ev[0]) + expect(ev[0]).to.deep.equal(dataLayerValues[4]) }) pageObjects @@ -154,15 +319,18 @@ describe('Calls to Google Analytics Object', function () { .click() .then(() => { // check last page change event - const ev = { + const ev = [ ...window.dataLayer.filter( - x => x?.event === dataLayerValues[3].event + x => x?.event === dataLayerValues[4].event ), - } + ] + console.log(ev) // we ignore dedup here so there can be multiple fires delete ev[1]['gtm.uniqueEventId'] - expect(dataLayerValues[4]).to.not.deep.equal(ev[1]) + expect(ev[1].bfData.accordionsOpen).to.equal( + !dataLayerValues[4].bfData.accordionsOpen + ) }) }) }) diff --git a/benefit-finder/cypress/support/pageObjects.js b/benefit-finder/cypress/support/pageObjects.js index b9d2cbccc..7fc911d3c 100644 --- a/benefit-finder/cypress/support/pageObjects.js +++ b/benefit-finder/cypress/support/pageObjects.js @@ -77,6 +77,10 @@ class PageObjects { return cy.get('.usa-accordion__button') } + benefitsAccordionLink(accordionHeading) { + return cy.get(`[data-analytics-content="${accordionHeading}"] a`) + } + menuButton() { return cy.get('.usa-menu-btn') } diff --git a/benefit-finder/src/shared/components/BenefitAccordionGroup/index.jsx b/benefit-finder/src/shared/components/BenefitAccordionGroup/index.jsx index 3c9d4977a..11ef22b09 100644 --- a/benefit-finder/src/shared/components/BenefitAccordionGroup/index.jsx +++ b/benefit-finder/src/shared/components/BenefitAccordionGroup/index.jsx @@ -244,6 +244,7 @@ const BenefitAccordionGroup = ({ target="_blank" rel="noopener noreferrer" onClick={() => handleBenefitLinkClick(title)} + data-testid="bf-benefit-link" > {visitLabel} {agency.title}{' '} {sourceIsEnglish && SourceIsEnglish === true From feb0fb1247bc761391f11cf0da9c3b3f824be66a Mon Sep 17 00:00:00 2001 From: scottqueen-bixal Date: Tue, 23 Jul 2024 06:45:49 -0400 Subject: [PATCH 02/16] PXBF-1548-update-gtm-e2e-tests: updated snaps --- .../__snapshots__/index.spec.jsx.snap | 60 +++++++++++++++++++ .../__snapshots__/index.spec.jsx.snap | 1 + .../__snapshots__/index.spec.jsx.snap | 60 +++++++++++++++++++ 3 files changed, 121 insertions(+) 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 b512d6850..3e9af63f7 100644 --- a/benefit-finder/src/App/__tests__/__snapshots__/index.spec.jsx.snap +++ b/benefit-finder/src/App/__tests__/__snapshots__/index.spec.jsx.snap @@ -632,6 +632,7 @@ exports[`loads window query scenario 1 1`] = ` renders a match to the previous snapshot 1`] = Date: Tue, 23 Jul 2024 07:10:26 -0400 Subject: [PATCH 03/16] PXBF-1548-update-gtm-e2e-tests: extract array into individually scoped object assertions --- .../cypress/e2e/storybook/dataLayer.cy.js | 160 ++++++++++-------- 1 file changed, 90 insertions(+), 70 deletions(-) diff --git a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js index 07d631ade..b3b2a0455 100644 --- a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js +++ b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js @@ -35,61 +35,81 @@ const eligibilityCount = { }, } -const dataLayerValues = [ - { - event: intro.event, - bfData: { - pageView: intro.bfData.pageView, - viewTitle: lifeEventForm.title, - }, +const dataLayerValueIntro = { + event: intro.event, + bfData: { + pageView: intro.bfData.pageView, + viewTitle: lifeEventForm.title, }, - { - event: lifeEventSection.event, - bfData: { - pageView: `${lifeEventSection.bfData.pageView}-1`, - viewTitle: lifeEventForm.sectionsEligibilityCriteria[0].section.heading, - }, +} + +const dataLayerValueFormStepOne = { + event: lifeEventSection.event, + bfData: { + pageView: `${lifeEventSection.bfData.pageView}-1`, + viewTitle: lifeEventForm.sectionsEligibilityCriteria[0].section.heading, + }, +} + +const dataLayerValueFormStepTwo = { + event: lifeEventSection.event, + bfData: { + pageView: `${lifeEventSection.bfData.pageView}-2`, + viewTitle: lifeEventForm.sectionsEligibilityCriteria[1].section.heading, }, - { - event: resultsView.event, - bfData: { - pageView: resultsView.bfData.pageView[0], - viewTitle: EN_LOCALE_DATA.resultsView.eligible.chevron.heading, - ...eligibilityCount, - }, +} + +const dataLayerValueResultsViewEligible = { + event: resultsView.event, + bfData: { + pageView: resultsView.bfData.pageView[0], + viewTitle: EN_LOCALE_DATA.resultsView.eligible.chevron.heading, + ...eligibilityCount, }, - { - event: resultsView.event, - bfData: { - pageView: resultsView.bfData.pageView[1], - viewTitle: EN_LOCALE_DATA.resultsView.notEligible.chevron.heading, - ...eligibilityCount, - }, +} + +const dataLayerValueResultsViewNotEligible = { + event: resultsView.event, + bfData: { + pageView: resultsView.bfData.pageView[1], + viewTitle: EN_LOCALE_DATA.resultsView.notEligible.chevron.heading, + ...eligibilityCount, }, - { - event: openAllBenefitAccordions.event, - bfData: { - accordionsOpen: openAllBenefitAccordions.bfData.accordionsOpen, - }, +} + +const dataLayerValueOpenAllAccordions = { + event: openAllBenefitAccordions.event, + bfData: { + accordionsOpen: openAllBenefitAccordions.bfData.accordionsOpen, }, - { - event: 'bf_accordion_open', - bfData: { - benefitTitle: enResults.eligible.eligible_benefits[0], - }, +} + +const dataLayerValueAccordionOpen = { + event: 'bf_accordion_open', + bfData: { + benefitTitle: enResults.eligible.eligible_benefits[0], }, - { - event: 'bf_benefit_link', - bfData: { - benefitTitle: enResults.eligible.eligible_benefits[0], - }, +} + +const dataLayerValueBenefitLink = { + event: 'bf_benefit_link', + bfData: { + benefitTitle: enResults.eligible.eligible_benefits[0], }, -] +} + +// const dataLayerValueFormCompletionModal = { +// event: 'bf_page_change', +// bfData: { +// pageView: 'bf-form-completion-modal', +// viewTitle: resultsView.bfData.pageView[1], +// }, +// } + +// const dataLayerValues = [] // check incrmenting events // check modal event -// check benefit accordion event -// check benefitLink event describe('Basic Data Layer Checks', () => { it('has a dataLayer and loads GTM', () => { @@ -120,12 +140,12 @@ describe('Calls to Google Analytics Object', function () { const ev = { ...window.dataLayer[window.dataLayer.length - 1] } delete ev['gtm.uniqueEventId'] - expect(ev).to.deep.equal(dataLayerValues[0]) + expect(ev).to.deep.equal(dataLayerValueIntro) }) }) }) - it('homepage has a bf_page_change event', function () { + it('first form step bf_page_change event', function () { cy.visit(utils.storybookUri) pageObjects.button().contains(EN_LOCALE_DATA.intro.button).click() @@ -140,7 +160,7 @@ describe('Calls to Google Analytics Object', function () { const ev = { ...window.dataLayer[window.dataLayer.length - 1] } delete ev['gtm.uniqueEventId'] - expect(dataLayerValues[1]).to.deep.equal(ev) + expect(ev).to.deep.equal(dataLayerValueFormStepOne) }) }) }) @@ -156,7 +176,7 @@ describe('Calls to Google Analytics Object', function () { .filter(':visible') .should( 'have.length', - dataLayerValues[2].bfData.eligibleBenefitCount.number + dataLayerValueResultsViewEligible.bfData.eligibleBenefitCount.number ) .then(() => { // we wait for the last event to fire @@ -165,12 +185,12 @@ describe('Calls to Google Analytics Object', function () { // check last page change event const ev = { ...window.dataLayer.filter( - x => x?.event === dataLayerValues[2].event + x => x?.event === dataLayerValueResultsViewEligible.event ), } delete ev[0]['gtm.uniqueEventId'] - expect(ev[0]).to.deep.equal(dataLayerValues[2]) + expect(ev[0]).to.deep.equal(dataLayerValueResultsViewEligible) }) }) }) @@ -187,7 +207,7 @@ describe('Calls to Google Analytics Object', function () { .filter(':visible') .should( 'have.length', - dataLayerValues[2].bfData.eligibleBenefitCount.number + dataLayerValueResultsViewEligible.bfData.eligibleBenefitCount.number ) .then(() => { pageObjects.accordion(enResults.eligible.eligible_benefits[0]).click() @@ -197,12 +217,12 @@ describe('Calls to Google Analytics Object', function () { // check last page change event const ev = [ ...window.dataLayer.filter( - x => x?.event === dataLayerValues[5].event + x => x?.event === dataLayerValueAccordionOpen.event ), ] delete ev[0]['gtm.uniqueEventId'] - expect(ev[0]).to.deep.equal(dataLayerValues[5]) + expect(ev[0]).to.deep.equal(dataLayerValueAccordionOpen) }) }) }) @@ -219,7 +239,7 @@ describe('Calls to Google Analytics Object', function () { .filter(':visible') .should( 'have.length', - dataLayerValues[2].bfData.eligibleBenefitCount.number + dataLayerValueResultsViewEligible.bfData.eligibleBenefitCount.number ) .then(() => { pageObjects.accordion(enResults.eligible.eligible_benefits[0]).click() @@ -229,12 +249,12 @@ describe('Calls to Google Analytics Object', function () { // check last page change event const ev = [ ...window.dataLayer.filter( - x => x?.event === dataLayerValues[5].event + x => x?.event === dataLayerValueAccordionOpen.event ), ] delete ev[0]['gtm.uniqueEventId'] - expect(ev[0]).to.deep.equal(dataLayerValues[5]) + expect(ev[0]).to.deep.equal(dataLayerValueAccordionOpen) }) pageObjects @@ -244,11 +264,11 @@ describe('Calls to Google Analytics Object', function () { .then(() => { const ev = [ ...window.dataLayer.filter( - x => x?.event === dataLayerValues[6].event + x => x?.event === dataLayerValueBenefitLink.event ), ] delete ev[0]['gtm.uniqueEventId'] - expect(ev[0]).to.deep.equal(dataLayerValues[6]) + expect(ev[0]).to.deep.equal(dataLayerValueBenefitLink) }) }) }) @@ -268,8 +288,10 @@ describe('Calls to Google Analytics Object', function () { .filter(':visible') .should( 'have.length', - dataLayerValues[3].bfData.notEligibleBenefitCount.number + - dataLayerValues[3].bfData.moreInfoBenefitCount.number + dataLayerValueResultsViewNotEligible.bfData.notEligibleBenefitCount + .number + + dataLayerValueResultsViewNotEligible.bfData.moreInfoBenefitCount + .number ) .then(() => { // we wait for the last event to fire @@ -278,21 +300,19 @@ describe('Calls to Google Analytics Object', function () { // check last page change event const ev = [ ...window.dataLayer.filter( - x => x?.event === dataLayerValues[3].event + x => x?.event === dataLayerValueResultsViewNotEligible.event ), ] delete ev[1]['gtm.uniqueEventId'] console.log(ev[1]) - expect(ev[1]).to.deep.equal(dataLayerValues[3]) + expect(ev[1]).to.deep.equal(dataLayerValueResultsViewNotEligible) }) }) }) }) - it('clicking open all on results page has a bf_open_all_accordions event', function () { - const scenario = utils.encodeURIFromObject(selectedData) - + it.only('clicking open all on results page has a bf_open_all_accordions event', function () { cy.visit(`${utils.storybookUri}${scenario}`) cy.window().then(window => { @@ -305,13 +325,13 @@ describe('Calls to Google Analytics Object', function () { // check last page change event const ev = [ ...window.dataLayer.filter( - x => x?.event === dataLayerValues[4].event + x => x?.event === dataLayerValueOpenAllAccordions.event ), ] console.log(ev) delete ev[0]['gtm.uniqueEventId'] - expect(ev[0]).to.deep.equal(dataLayerValues[4]) + expect(ev[0]).to.deep.equal(dataLayerValueOpenAllAccordions) }) pageObjects @@ -321,7 +341,7 @@ describe('Calls to Google Analytics Object', function () { // check last page change event const ev = [ ...window.dataLayer.filter( - x => x?.event === dataLayerValues[4].event + x => x?.event === dataLayerValueOpenAllAccordions.event ), ] console.log(ev) @@ -329,7 +349,7 @@ describe('Calls to Google Analytics Object', function () { delete ev[1]['gtm.uniqueEventId'] expect(ev[1].bfData.accordionsOpen).to.equal( - !dataLayerValues[4].bfData.accordionsOpen + !dataLayerValueOpenAllAccordions.bfData.accordionsOpen ) }) }) From 2cc09615f40e5b4a708567c3d734a3ff76d1c902 Mon Sep 17 00:00:00 2001 From: scottqueen-bixal Date: Tue, 23 Jul 2024 09:00:51 -0400 Subject: [PATCH 04/16] PXBF-1548-update-gtm-e2e-tests: include zero benefits and full user journey coverage --- .../cypress/e2e/storybook/dataLayer.cy.js | 776 +++++++++++++++++- .../fixtures/benefits-eligibility.json | 6 +- 2 files changed, 758 insertions(+), 24 deletions(-) diff --git a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js index b3b2a0455..d2c854e5f 100644 --- a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js +++ b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js @@ -13,6 +13,7 @@ const { lifeEventForm } = content.data 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 eligibilityCount = { @@ -35,6 +36,28 @@ const eligibilityCount = { }, } +const zeroBenefitsEligibilityCount = { + eligibleBenefitCount: { + number: zero_benefit_view.eligible.length, + string: `${zero_benefit_view.eligible.length}`, + }, + moreInfoBenefitCount: { + number: zero_benefit_view.moreInformationNeeded.length, + string: `${zero_benefit_view.moreInformationNeeded.length}`, + }, + notEligibleBenefitCount: { + number: + zero_benefit_view.total_benefits - + (zero_benefit_view.eligible.length + + zero_benefit_view.moreInformationNeeded.length), + string: `${ + zero_benefit_view.total_benefits - + (zero_benefit_view.eligible.length + + zero_benefit_view.moreInformationNeeded.length) + }`, + }, +} + const dataLayerValueIntro = { event: intro.event, bfData: { @@ -98,18 +121,58 @@ const dataLayerValueBenefitLink = { }, } -// const dataLayerValueFormCompletionModal = { -// event: 'bf_page_change', -// bfData: { -// pageView: 'bf-form-completion-modal', -// viewTitle: resultsView.bfData.pageView[1], -// }, -// } +const dataLayerValueFormCompletionModal = { + event: 'bf_page_change', + bfData: { + pageView: 'bf-form-completion-modal', + viewTitle: `${lifeEventForm.sectionsEligibilityCriteria[1].section.heading} modal`, + }, +} + +const dataLayerValueVerifySecletions = { + event: 'bf_page_change', + bfData: { + pageView: 'bf-verify-selections', + viewTitle: EN_LOCALE_DATA.verifySelectionsView.heading, + }, +} + +const dataLayerValueZeroResultsViewEligible = { + event: resultsView.event, + bfData: { + pageView: resultsView.bfData.pageView[0], + viewTitle: EN_LOCALE_DATA.resultsView.zeroBenefits.chevron.heading, + ...zeroBenefitsEligibilityCount, + }, +} + +const dataLayerValueZeroResultsViewNotEligible = { + event: resultsView.event, + bfData: { + pageView: resultsView.bfData.pageView[1], + viewTitle: EN_LOCALE_DATA.resultsView.zeroBenefits.chevron.heading, + ...zeroBenefitsEligibilityCount, + }, +} + +const dataLayerValues = [ + dataLayerValueIntro, + dataLayerValueFormStepOne, + dataLayerValueFormStepTwo, + dataLayerValueFormCompletionModal, + dataLayerValueVerifySecletions, + dataLayerValueZeroResultsViewEligible, + dataLayerValueZeroResultsViewNotEligible, + dataLayerValueOpenAllAccordions, + { ...dataLayerValueOpenAllAccordions, bfData: { accordionsOpen: false } }, + dataLayerValueAccordionOpen, + dataLayerValueBenefitLink, +] -// const dataLayerValues = [] +const removeID = item => delete item['gtm.uniqueEventId'] -// check incrmenting events -// check modal event +// confirm full user journey +// no eligible results events describe('Basic Data Layer Checks', () => { it('has a dataLayer and loads GTM', () => { @@ -138,7 +201,8 @@ describe('Calls to Google Analytics Object', function () { .then(() => { // get the last pushed event const ev = { ...window.dataLayer[window.dataLayer.length - 1] } - delete ev['gtm.uniqueEventId'] + removeID(ev) + // delete ev['gtm.uniqueEventId'] expect(ev).to.deep.equal(dataLayerValueIntro) }) @@ -158,9 +222,159 @@ describe('Calls to Google Analytics Object', function () { .then(() => { // get the last pushed event const ev = { ...window.dataLayer[window.dataLayer.length - 1] } - delete ev['gtm.uniqueEventId'] + // delete ev['gtm.uniqueEventId'] + removeID(ev) + + expect(ev).to.deep.equal(dataLayerValueFormStepOne) + }) + }) + }) + + it('second form step bf_page_change event, asserts incrmenting values', function () { + cy.visit(utils.storybookUri) + pageObjects.button().contains(EN_LOCALE_DATA.intro.button).click() + + cy.window().then(window => { + assert.isDefined(window.dataLayer, 'window.dataLayer is defined') + + pageObjects + .button() + .contains(EN_LOCALE_DATA.buttonGroup[1].value) + .then(() => { + // get the last pushed event + const ev = { ...window.dataLayer[window.dataLayer.length - 1] } + // delete ev['gtm.uniqueEventId'] + removeID(ev) + + expect(ev).to.deep.equal(dataLayerValueFormStepOne) + + // fill out required fields + const dateOfBirth = utils.getDateByOffset(-(18 * 365.2425 - 1)) + 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 + ) + + pageObjects + .button() + .contains(EN_LOCALE_DATA.buttonGroup[1].value) + .click() + .then(() => { + // get the last pushed event + const ev = [ + ...window.dataLayer.filter( + x => x?.event === dataLayerValueFormStepTwo.event + ), + ] + + removeID(ev[2]) + // delete ev[2]['gtm.uniqueEventId'] + + expect(ev[2]).to.deep.equal(dataLayerValueFormStepTwo) + }) + }) + }) + }) + + it('clicking Continue on the final form step opens a modal and triggers the modal event', function () { + cy.visit(utils.storybookUri) + pageObjects.button().contains(EN_LOCALE_DATA.intro.button).click() + + cy.window().then(window => { + assert.isDefined(window.dataLayer, 'window.dataLayer is defined') + + pageObjects + .button() + .contains(EN_LOCALE_DATA.buttonGroup[1].value) + .then(() => { + // get the last pushed event + const ev = { ...window.dataLayer[window.dataLayer.length - 1] } + // delete ev['gtm.uniqueEventId'] + removeID(ev) expect(ev).to.deep.equal(dataLayerValueFormStepOne) + + // fill out required fields + const dateOfBirth = utils.getDateByOffset(-(18 * 365.2425 - 1)) + 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 + ) + + pageObjects + .button() + .contains(EN_LOCALE_DATA.buttonGroup[1].value) + .click() + .then(() => { + // get the last pushed event + const ev = [ + ...window.dataLayer.filter( + x => x?.event === dataLayerValueFormStepTwo.event + ), + ] + + // delete ev[2]['gtm.uniqueEventId'] + removeID(ev[2]) + + expect(ev[2]).to.deep.equal(dataLayerValueFormStepTwo) + + // Date of death - 30 days ago + const dateOfDeath = utils.getDateByOffset(-30) + cy.enterDateOfDeath( + dateOfDeath.month, + dateOfDeath.day, + dateOfDeath.year + ) + + pageObjects + .button() + .contains(EN_LOCALE_DATA.buttonGroup[1].value) + .click() + .then(() => { + const ev = [ + ...window.dataLayer.filter( + x => x?.event === dataLayerValueFormCompletionModal.event + ), + ] + + // delete ev[3]['gtm.uniqueEventId'] + removeID(ev[3]) + + expect(ev[3]).to.deep.equal(dataLayerValueFormCompletionModal) + }) + }) }) }) }) @@ -188,7 +402,7 @@ describe('Calls to Google Analytics Object', function () { x => x?.event === dataLayerValueResultsViewEligible.event ), } - delete ev[0]['gtm.uniqueEventId'] + removeID(ev[0]) expect(ev[0]).to.deep.equal(dataLayerValueResultsViewEligible) }) @@ -220,7 +434,8 @@ describe('Calls to Google Analytics Object', function () { x => x?.event === dataLayerValueAccordionOpen.event ), ] - delete ev[0]['gtm.uniqueEventId'] + // delete ev[0]['gtm.uniqueEventId'] + removeID(ev[0]) expect(ev[0]).to.deep.equal(dataLayerValueAccordionOpen) }) @@ -252,7 +467,8 @@ describe('Calls to Google Analytics Object', function () { x => x?.event === dataLayerValueAccordionOpen.event ), ] - delete ev[0]['gtm.uniqueEventId'] + // delete ev[0]['gtm.uniqueEventId'] + removeID(ev[0]) expect(ev[0]).to.deep.equal(dataLayerValueAccordionOpen) }) @@ -267,7 +483,8 @@ describe('Calls to Google Analytics Object', function () { x => x?.event === dataLayerValueBenefitLink.event ), ] - delete ev[0]['gtm.uniqueEventId'] + // delete ev[0]['gtm.uniqueEventId'] + removeID(ev[0]) expect(ev[0]).to.deep.equal(dataLayerValueBenefitLink) }) }) @@ -303,8 +520,8 @@ describe('Calls to Google Analytics Object', function () { x => x?.event === dataLayerValueResultsViewNotEligible.event ), ] - delete ev[1]['gtm.uniqueEventId'] - console.log(ev[1]) + // delete ev[1]['gtm.uniqueEventId'] + removeID(ev[1]) expect(ev[1]).to.deep.equal(dataLayerValueResultsViewNotEligible) }) @@ -312,7 +529,113 @@ describe('Calls to Google Analytics Object', function () { }) }) - it.only('clicking open all on results page has a bf_open_all_accordions event', function () { + it('clicking Continue on the final form step opens a modal, clicking Review selections loads the verification view and a bf_page_change event', function () { + cy.visit(utils.storybookUri) + pageObjects.button().contains(EN_LOCALE_DATA.intro.button).click() + + cy.window().then(window => { + assert.isDefined(window.dataLayer, 'window.dataLayer is defined') + + pageObjects + .button() + .contains(EN_LOCALE_DATA.buttonGroup[1].value) + .then(() => { + // get the last pushed event + const ev = { ...window.dataLayer[window.dataLayer.length - 1] } + // delete ev['gtm.uniqueEventId'] + removeID(ev) + + expect(ev).to.deep.equal(dataLayerValueFormStepOne) + + // fill out required fields + const dateOfBirth = utils.getDateByOffset(-(18 * 365.2425 - 1)) + 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 + ) + + pageObjects + .button() + .contains(EN_LOCALE_DATA.buttonGroup[1].value) + .click() + .then(() => { + // get the last pushed event + const ev = [ + ...window.dataLayer.filter( + x => x?.event === dataLayerValueFormStepTwo.event + ), + ] + + // delete ev[2]['gtm.uniqueEventId'] + removeID(ev[2]) + + expect(ev[2]).to.deep.equal(dataLayerValueFormStepTwo) + + // Date of death - 30 days ago + const dateOfDeath = utils.getDateByOffset(-30) + cy.enterDateOfDeath( + dateOfDeath.month, + dateOfDeath.day, + dateOfDeath.year + ) + + pageObjects + .button() + .contains(EN_LOCALE_DATA.buttonGroup[1].value) + .click() + .then(() => { + const ev = [ + ...window.dataLayer.filter( + x => x?.event === dataLayerValueFormCompletionModal.event + ), + ] + + // delete ev[3]['gtm.uniqueEventId'] + removeID(ev[3]) + + expect(ev[3]).to.deep.equal(dataLayerValueFormCompletionModal) + + pageObjects + .button() + .contains('Review selections') + .click() + .then(() => { + const ev = [ + ...window.dataLayer.filter( + x => x?.event === dataLayerValueVerifySecletions.event + ), + ] + + // delete ev[4]['gtm.uniqueEventId'] + removeID(ev[4]) + + expect(ev[4]).to.deep.equal( + dataLayerValueVerifySecletions + ) + }) + }) + }) + }) + }) + }) + + it('clicking open all on results page has a bf_open_all_accordions event', function () { cy.visit(`${utils.storybookUri}${scenario}`) cy.window().then(window => { @@ -328,8 +651,9 @@ describe('Calls to Google Analytics Object', function () { x => x?.event === dataLayerValueOpenAllAccordions.event ), ] - console.log(ev) - delete ev[0]['gtm.uniqueEventId'] + + // delete ev[0]['gtm.uniqueEventId'] + removeID(ev[0]) expect(ev[0]).to.deep.equal(dataLayerValueOpenAllAccordions) }) @@ -344,9 +668,10 @@ describe('Calls to Google Analytics Object', function () { x => x?.event === dataLayerValueOpenAllAccordions.event ), ] - console.log(ev) + // we ignore dedup here so there can be multiple fires - delete ev[1]['gtm.uniqueEventId'] + // delete ev[1]['gtm.uniqueEventId'] + removeID(ev[1]) expect(ev[1].bfData.accordionsOpen).to.equal( !dataLayerValueOpenAllAccordions.bfData.accordionsOpen @@ -354,4 +679,409 @@ describe('Calls to Google Analytics Object', function () { }) }) }) + + it('navigating through all the form results in zeroBenefits views', function () { + cy.visit(utils.storybookUri) + pageObjects.button().contains(EN_LOCALE_DATA.intro.button).click() + + cy.window().then(window => { + assert.isDefined(window.dataLayer, 'window.dataLayer is defined') + + pageObjects + .button() + .contains(EN_LOCALE_DATA.buttonGroup[1].value) + .then(() => { + // get the last pushed event + const ev = { ...window.dataLayer[window.dataLayer.length - 1] } + // delete ev['gtm.uniqueEventId'] + removeID(ev) + + expect(ev).to.deep.equal(dataLayerValueFormStepOne) + + // fill out required fields + const dateOfBirth = utils.getDateByOffset(-(18 * 365.2425 - 1)) + 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 + ) + + pageObjects + .button() + .contains(EN_LOCALE_DATA.buttonGroup[1].value) + .click() + .then(() => { + // get the last pushed event + const ev = [ + ...window.dataLayer.filter( + x => x?.event === dataLayerValueFormStepTwo.event + ), + ] + + // delete ev[2]['gtm.uniqueEventId'] + removeID(ev[2]) + + expect(ev[2]).to.deep.equal(dataLayerValueFormStepTwo) + + // Date of death - 30 days ago + const dateOfDeath = utils.getDateByOffset(-30) + cy.enterDateOfDeath( + dateOfDeath.month, + dateOfDeath.day, + dateOfDeath.year + ) + + pageObjects + .button() + .contains(EN_LOCALE_DATA.buttonGroup[1].value) + .click() + .then(() => { + const ev = [ + ...window.dataLayer.filter( + x => x?.event === dataLayerValueFormCompletionModal.event + ), + ] + + // delete ev[3]['gtm.uniqueEventId'] + removeID(ev[3]) + + expect(ev[3]).to.deep.equal(dataLayerValueFormCompletionModal) + + pageObjects + .button() + .contains('Review selections') + .click() + .then(() => { + const ev = [ + ...window.dataLayer.filter( + x => x?.event === dataLayerValueVerifySecletions.event + ), + ] + + // delete ev[4]['gtm.uniqueEventId'] + removeID(ev[4]) + + expect(ev[4]).to.deep.equal( + dataLayerValueVerifySecletions + ) + + pageObjects + .button() + .contains(EN_LOCALE_DATA.buttonGroup[1].value) + .click() + .then(() => { + // cy.wait(200) + const ev = [ + ...window.dataLayer.filter( + x => + x?.event === + dataLayerValueZeroResultsViewEligible.event + ), + ] + + // delete ev[5]['gtm.uniqueEventId'] + removeID(ev[5]) + + expect(ev[5]).to.deep.equal( + dataLayerValueZeroResultsViewEligible + ) + + pageObjects + .seeAllBenefitsButton() + .click() + .then(() => { + const ev = [ + ...window.dataLayer.filter( + x => + x?.event === + dataLayerValueZeroResultsViewNotEligible.event + ), + ] + + delete ev[6]['gtm.uniqueEventId'] + removeID(ev[6]) + + expect(ev[6]).to.deep.equal( + dataLayerValueZeroResultsViewNotEligible + ) + }) + }) + }) + }) + }) + }) + }) + }) + + it('navigating through all the test steps produces a deep equal comparison to our expected dataLayer array values', function () { + cy.visit(utils.storybookUri) + pageObjects.button().contains(EN_LOCALE_DATA.intro.button).click() + + cy.window().then(window => { + assert.isDefined(window.dataLayer, 'window.dataLayer is defined') + + pageObjects + .button() + .contains(EN_LOCALE_DATA.buttonGroup[1].value) + .then(() => { + // get the last pushed event + const ev = { ...window.dataLayer[window.dataLayer.length - 1] } + // delete ev['gtm.uniqueEventId'] + removeID(ev) + + expect(ev).to.deep.equal(dataLayerValueFormStepOne) + + // fill out required fields + const dateOfBirth = utils.getDateByOffset(-(18 * 365.2425 - 1)) + 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 + ) + + pageObjects + .button() + .contains(EN_LOCALE_DATA.buttonGroup[1].value) + .click() + .then(() => { + // get the last pushed event + const ev = [ + ...window.dataLayer.filter( + x => x?.event === dataLayerValueFormStepTwo.event + ), + ] + + // delete ev[2]['gtm.uniqueEventId'] + removeID(ev[2]) + + expect(ev[2]).to.deep.equal(dataLayerValueFormStepTwo) + + // Date of death - 30 days ago + const dateOfDeath = utils.getDateByOffset(-30) + cy.enterDateOfDeath( + dateOfDeath.month, + dateOfDeath.day, + dateOfDeath.year + ) + + pageObjects + .button() + .contains(EN_LOCALE_DATA.buttonGroup[1].value) + .click() + .then(() => { + const ev = [ + ...window.dataLayer.filter( + x => x?.event === dataLayerValueFormCompletionModal.event + ), + ] + + // delete ev[3]['gtm.uniqueEventId'] + removeID(ev[3]) + + expect(ev[3]).to.deep.equal(dataLayerValueFormCompletionModal) + + pageObjects + .button() + .contains('Review selections') + .click() + .then(() => { + const ev = [ + ...window.dataLayer.filter( + x => x?.event === dataLayerValueVerifySecletions.event + ), + ] + + // delete ev[4]['gtm.uniqueEventId'] + removeID(ev[4]) + + expect(ev[4]).to.deep.equal( + dataLayerValueVerifySecletions + ) + + pageObjects + .button() + .contains(EN_LOCALE_DATA.buttonGroup[1].value) + .click() + .then(() => { + // cy.wait(200) + const ev = [ + ...window.dataLayer.filter( + x => + x?.event === + dataLayerValueZeroResultsViewEligible.event + ), + ] + + // delete ev[5]['gtm.uniqueEventId'] + removeID(ev[5]) + + expect(ev[5]).to.deep.equal( + dataLayerValueZeroResultsViewEligible + ) + + pageObjects + .seeAllBenefitsButton() + .click() + .then(() => { + const ev = [ + ...window.dataLayer.filter( + x => + x?.event === + dataLayerValueZeroResultsViewNotEligible.event + ), + ] + + // delete ev[6]['gtm.uniqueEventId'] + removeID(ev[6]) + + expect(ev[6]).to.deep.equal( + dataLayerValueZeroResultsViewNotEligible + ) + }) + // confirm zero benefits event and view + // click see all benefits + pageObjects + .expandAll() + .click() + .then(() => { + // check last page change event + const ev = [ + ...window.dataLayer.filter( + x => + x?.event === + dataLayerValueOpenAllAccordions.event + ), + ] + + // delete ev[0]['gtm.uniqueEventId'] + removeID(ev[0]) + + expect(ev[0]).to.deep.equal( + dataLayerValueOpenAllAccordions + ) + pageObjects + .expandAll() + .click() + .then(() => { + // check last page change event + const ev = [ + ...window.dataLayer.filter( + x => + x?.event === + dataLayerValueOpenAllAccordions.event + ), + ] + + // we ignore dedup here so there can be multiple fires + // delete ev[1]['gtm.uniqueEventId'] + removeID(ev[1]) + + expect(ev[1].bfData.accordionsOpen).to.equal( + !dataLayerValueOpenAllAccordions.bfData + .accordionsOpen + ) + + pageObjects + .accordion( + enResults.eligible.eligible_benefits[0] + ) + .click() + // we wait for the last event to fire + // eslint-disable-next-line cypress/no-unnecessary-waiting + cy.wait(100).then(() => { + // check last page change event + const ev = [ + ...window.dataLayer.filter( + x => + x?.event === + dataLayerValueAccordionOpen.event + ), + ] + console.log(ev) + // delete ev[0]['gtm.uniqueEventId'] + removeID(ev[0]) + + expect(ev[0]).to.deep.equal( + dataLayerValueAccordionOpen + ) + + 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 + ) + + // loop through the data layer and remove any events that are gtm + + const bfDataLayer = + window.dataLayer.filter( + item => !item.event.includes('gtm') + ) + + const cleanBfDataLayer = + bfDataLayer.map(item => { + removeID(item) + return item + }) + + console.log(cleanBfDataLayer) + + expect(cleanBfDataLayer).to.deep.equal( + dataLayerValues + ) + }) + }) + }) + }) + }) + }) + }) + }) + }) + }) + }) }) diff --git a/benefit-finder/cypress/fixtures/benefits-eligibility.json b/benefit-finder/cypress/fixtures/benefits-eligibility.json index 3a6083967..232c05fb7 100644 --- a/benefit-finder/cypress/fixtures/benefits-eligibility.json +++ b/benefit-finder/cypress/fixtures/benefits-eligibility.json @@ -230,7 +230,11 @@ "results": { "eligible": { "length": 0 - } + }, + "moreInformationNeeded": { + "length": 22 + }, + "total_benefits": 30 } } } From b19d4b578e3617ee6d98936e2c749b47b40818da Mon Sep 17 00:00:00 2001 From: scottqueen-bixal Date: Tue, 23 Jul 2024 09:18:38 -0400 Subject: [PATCH 05/16] PXBF-1548-update-gtm-e2e-tests: remove readme test comment --- benefit-finder/README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/benefit-finder/README.md b/benefit-finder/README.md index 3dee722bf..3a4a6290a 100644 --- a/benefit-finder/README.md +++ b/benefit-finder/README.md @@ -334,5 +334,3 @@ npm run generate:component ``` > It's important to export components from the root of the shared index file. This is where you will import and destructure across other documents. - -test \ No newline at end of file From ec86afa2582e37d1545ea9d49da3e3134191ffe6 Mon Sep 17 00:00:00 2001 From: scottqueen-bixal Date: Tue, 23 Jul 2024 09:19:09 -0400 Subject: [PATCH 06/16] PXBF-1548-update-gtm-e2e-tests: comment test suite for dataLayer values --- .../cypress/e2e/storybook/dataLayer.cy.js | 74 ++++++------------- 1 file changed, 22 insertions(+), 52 deletions(-) diff --git a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js index d2c854e5f..36bf25615 100644 --- a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js +++ b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js @@ -6,16 +6,16 @@ import * as EN_LOCALE_DATA from '../../../../benefit-finder/src/shared/locales/e import * as BENEFITS_ELIBILITY_DATA from '../../fixtures/benefits-eligibility.json' import content from '../../../src/shared/api/mock-data/current.json' +// establish some common data points from our mock values and scenarios const { intro, lifeEventSection, resultsView, openAllBenefitAccordions } = dataLayerUtils.dataLayerStructure - const { lifeEventForm } = content.data - 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) +// calculate out elibibility counts we expect for our event values const eligibilityCount = { eligibleBenefitCount: { number: enResults.eligible.length, @@ -58,6 +58,7 @@ const zeroBenefitsEligibilityCount = { }, } +// create an object for each of our dataLayer assertions const dataLayerValueIntro = { event: intro.event, bfData: { @@ -155,6 +156,7 @@ const dataLayerValueZeroResultsViewNotEligible = { }, } +// create a combined dataLayer assertions array, this is what we might expect to see for a user journey value that triggers all the events expected const dataLayerValues = [ dataLayerValueIntro, dataLayerValueFormStepOne, @@ -171,9 +173,7 @@ const dataLayerValues = [ const removeID = item => delete item['gtm.uniqueEventId'] -// confirm full user journey -// no eligible results events - +// check to make sure our data layer exists describe('Basic Data Layer Checks', () => { it('has a dataLayer and loads GTM', () => { cy.visit(utils.storybookUri) @@ -202,7 +202,6 @@ describe('Calls to Google Analytics Object', function () { // get the last pushed event const ev = { ...window.dataLayer[window.dataLayer.length - 1] } removeID(ev) - // delete ev['gtm.uniqueEventId'] expect(ev).to.deep.equal(dataLayerValueIntro) }) @@ -222,7 +221,6 @@ describe('Calls to Google Analytics Object', function () { .then(() => { // get the last pushed event const ev = { ...window.dataLayer[window.dataLayer.length - 1] } - // delete ev['gtm.uniqueEventId'] removeID(ev) expect(ev).to.deep.equal(dataLayerValueFormStepOne) @@ -243,7 +241,6 @@ describe('Calls to Google Analytics Object', function () { .then(() => { // get the last pushed event const ev = { ...window.dataLayer[window.dataLayer.length - 1] } - // delete ev['gtm.uniqueEventId'] removeID(ev) expect(ev).to.deep.equal(dataLayerValueFormStepOne) @@ -276,15 +273,13 @@ describe('Calls to Google Analytics Object', function () { .contains(EN_LOCALE_DATA.buttonGroup[1].value) .click() .then(() => { - // get the last pushed event + // get all the events in our layer that matches the event value const ev = [ ...window.dataLayer.filter( x => x?.event === dataLayerValueFormStepTwo.event ), ] - removeID(ev[2]) - // delete ev[2]['gtm.uniqueEventId'] expect(ev[2]).to.deep.equal(dataLayerValueFormStepTwo) }) @@ -305,7 +300,6 @@ describe('Calls to Google Analytics Object', function () { .then(() => { // get the last pushed event const ev = { ...window.dataLayer[window.dataLayer.length - 1] } - // delete ev['gtm.uniqueEventId'] removeID(ev) expect(ev).to.deep.equal(dataLayerValueFormStepOne) @@ -338,14 +332,12 @@ describe('Calls to Google Analytics Object', function () { .contains(EN_LOCALE_DATA.buttonGroup[1].value) .click() .then(() => { - // get the last pushed event + // get all the events in our layer that matches the event value const ev = [ ...window.dataLayer.filter( x => x?.event === dataLayerValueFormStepTwo.event ), ] - - // delete ev[2]['gtm.uniqueEventId'] removeID(ev[2]) expect(ev[2]).to.deep.equal(dataLayerValueFormStepTwo) @@ -363,13 +355,12 @@ describe('Calls to Google Analytics Object', function () { .contains(EN_LOCALE_DATA.buttonGroup[1].value) .click() .then(() => { + // get all the events in our layer that matches the event value const ev = [ ...window.dataLayer.filter( x => x?.event === dataLayerValueFormCompletionModal.event ), ] - - // delete ev[3]['gtm.uniqueEventId'] removeID(ev[3]) expect(ev[3]).to.deep.equal(dataLayerValueFormCompletionModal) @@ -396,7 +387,7 @@ describe('Calls to Google Analytics Object', function () { // we wait for the last event to fire // eslint-disable-next-line cypress/no-unnecessary-waiting cy.wait(100).then(() => { - // check last page change event + // get all the events in our layer that matches the event value const ev = { ...window.dataLayer.filter( x => x?.event === dataLayerValueResultsViewEligible.event @@ -428,13 +419,12 @@ describe('Calls to Google Analytics Object', function () { // we wait for the last event to fire // eslint-disable-next-line cypress/no-unnecessary-waiting cy.wait(100).then(() => { - // check last page change event + // get all the events in our layer that matches the event value const ev = [ ...window.dataLayer.filter( x => x?.event === dataLayerValueAccordionOpen.event ), ] - // delete ev[0]['gtm.uniqueEventId'] removeID(ev[0]) expect(ev[0]).to.deep.equal(dataLayerValueAccordionOpen) @@ -461,13 +451,12 @@ describe('Calls to Google Analytics Object', function () { // we wait for the last event to fire // eslint-disable-next-line cypress/no-unnecessary-waiting cy.wait(100).then(() => { - // check last page change event + // get all the events in our layer that matches the event value const ev = [ ...window.dataLayer.filter( x => x?.event === dataLayerValueAccordionOpen.event ), ] - // delete ev[0]['gtm.uniqueEventId'] removeID(ev[0]) expect(ev[0]).to.deep.equal(dataLayerValueAccordionOpen) @@ -478,13 +467,14 @@ describe('Calls to Google Analytics Object', function () { .invoke('removeAttr', 'href') .click() .then(() => { + // get all the events in our layer that matches the event value 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) }) }) @@ -514,13 +504,12 @@ describe('Calls to Google Analytics Object', function () { // we wait for the last event to fire // eslint-disable-next-line cypress/no-unnecessary-waiting cy.wait(100).then(() => { - // check last page change event + // get all the events in our layer that matches the event value const ev = [ ...window.dataLayer.filter( x => x?.event === dataLayerValueResultsViewNotEligible.event ), ] - // delete ev[1]['gtm.uniqueEventId'] removeID(ev[1]) expect(ev[1]).to.deep.equal(dataLayerValueResultsViewNotEligible) @@ -542,7 +531,6 @@ describe('Calls to Google Analytics Object', function () { .then(() => { // get the last pushed event const ev = { ...window.dataLayer[window.dataLayer.length - 1] } - // delete ev['gtm.uniqueEventId'] removeID(ev) expect(ev).to.deep.equal(dataLayerValueFormStepOne) @@ -575,14 +563,12 @@ describe('Calls to Google Analytics Object', function () { .contains(EN_LOCALE_DATA.buttonGroup[1].value) .click() .then(() => { - // get the last pushed event + // get all the events in our layer that matches the event value const ev = [ ...window.dataLayer.filter( x => x?.event === dataLayerValueFormStepTwo.event ), ] - - // delete ev[2]['gtm.uniqueEventId'] removeID(ev[2]) expect(ev[2]).to.deep.equal(dataLayerValueFormStepTwo) @@ -600,13 +586,12 @@ describe('Calls to Google Analytics Object', function () { .contains(EN_LOCALE_DATA.buttonGroup[1].value) .click() .then(() => { + // get all the events in our layer that matches the event value const ev = [ ...window.dataLayer.filter( x => x?.event === dataLayerValueFormCompletionModal.event ), ] - - // delete ev[3]['gtm.uniqueEventId'] removeID(ev[3]) expect(ev[3]).to.deep.equal(dataLayerValueFormCompletionModal) @@ -616,13 +601,12 @@ describe('Calls to Google Analytics Object', function () { .contains('Review selections') .click() .then(() => { + // get all the events in our layer that matches the event value const ev = [ ...window.dataLayer.filter( x => x?.event === dataLayerValueVerifySecletions.event ), ] - - // delete ev[4]['gtm.uniqueEventId'] removeID(ev[4]) expect(ev[4]).to.deep.equal( @@ -651,8 +635,6 @@ describe('Calls to Google Analytics Object', function () { x => x?.event === dataLayerValueOpenAllAccordions.event ), ] - - // delete ev[0]['gtm.uniqueEventId'] removeID(ev[0]) expect(ev[0]).to.deep.equal(dataLayerValueOpenAllAccordions) @@ -662,15 +644,12 @@ describe('Calls to Google Analytics Object', function () { .expandAll() .click() .then(() => { - // check last page change event + // get all the events in our layer that matches the event value const ev = [ ...window.dataLayer.filter( x => x?.event === dataLayerValueOpenAllAccordions.event ), ] - - // we ignore dedup here so there can be multiple fires - // delete ev[1]['gtm.uniqueEventId'] removeID(ev[1]) expect(ev[1].bfData.accordionsOpen).to.equal( @@ -693,7 +672,6 @@ describe('Calls to Google Analytics Object', function () { .then(() => { // get the last pushed event const ev = { ...window.dataLayer[window.dataLayer.length - 1] } - // delete ev['gtm.uniqueEventId'] removeID(ev) expect(ev).to.deep.equal(dataLayerValueFormStepOne) @@ -726,14 +704,12 @@ describe('Calls to Google Analytics Object', function () { .contains(EN_LOCALE_DATA.buttonGroup[1].value) .click() .then(() => { - // get the last pushed event + // get all the events in our layer that matches the event value const ev = [ ...window.dataLayer.filter( x => x?.event === dataLayerValueFormStepTwo.event ), ] - - // delete ev[2]['gtm.uniqueEventId'] removeID(ev[2]) expect(ev[2]).to.deep.equal(dataLayerValueFormStepTwo) @@ -756,8 +732,6 @@ describe('Calls to Google Analytics Object', function () { x => x?.event === dataLayerValueFormCompletionModal.event ), ] - - // delete ev[3]['gtm.uniqueEventId'] removeID(ev[3]) expect(ev[3]).to.deep.equal(dataLayerValueFormCompletionModal) @@ -767,13 +741,12 @@ describe('Calls to Google Analytics Object', function () { .contains('Review selections') .click() .then(() => { + // get all the events in our layer that matches the event value const ev = [ ...window.dataLayer.filter( x => x?.event === dataLayerValueVerifySecletions.event ), ] - - // delete ev[4]['gtm.uniqueEventId'] removeID(ev[4]) expect(ev[4]).to.deep.equal( @@ -785,7 +758,7 @@ describe('Calls to Google Analytics Object', function () { .contains(EN_LOCALE_DATA.buttonGroup[1].value) .click() .then(() => { - // cy.wait(200) + // get all the events in our layer that matches the event value const ev = [ ...window.dataLayer.filter( x => @@ -793,8 +766,6 @@ describe('Calls to Google Analytics Object', function () { dataLayerValueZeroResultsViewEligible.event ), ] - - // delete ev[5]['gtm.uniqueEventId'] removeID(ev[5]) expect(ev[5]).to.deep.equal( @@ -805,6 +776,7 @@ describe('Calls to Google Analytics Object', function () { .seeAllBenefitsButton() .click() .then(() => { + // get all the events in our layer that matches the event value const ev = [ ...window.dataLayer.filter( x => @@ -812,8 +784,6 @@ describe('Calls to Google Analytics Object', function () { dataLayerValueZeroResultsViewNotEligible.event ), ] - - delete ev[6]['gtm.uniqueEventId'] removeID(ev[6]) expect(ev[6]).to.deep.equal( From b6fc6402c2f80ab1f69e7185f9923e3a737567e5 Mon Sep 17 00:00:00 2001 From: scottqueen-bixal Date: Tue, 23 Jul 2024 10:04:45 -0400 Subject: [PATCH 07/16] PXBF-1548-update-gtm-e2e-tests: increase time wait --- .../cypress/e2e/storybook/dataLayer.cy.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js index 36bf25615..f7dad71fa 100644 --- a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js +++ b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js @@ -14,6 +14,7 @@ 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 = { @@ -386,7 +387,7 @@ describe('Calls to Google Analytics Object', function () { .then(() => { // we wait for the last event to fire // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(100).then(() => { + cy.wait(wait).then(() => { // get all the events in our layer that matches the event value const ev = { ...window.dataLayer.filter( @@ -418,7 +419,7 @@ describe('Calls to Google Analytics Object', function () { pageObjects.accordion(enResults.eligible.eligible_benefits[0]).click() // we wait for the last event to fire // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(100).then(() => { + cy.wait(wait).then(() => { // get all the events in our layer that matches the event value const ev = [ ...window.dataLayer.filter( @@ -450,7 +451,7 @@ describe('Calls to Google Analytics Object', function () { pageObjects.accordion(enResults.eligible.eligible_benefits[0]).click() // we wait for the last event to fire // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(100).then(() => { + cy.wait(wait).then(() => { // get all the events in our layer that matches the event value const ev = [ ...window.dataLayer.filter( @@ -503,7 +504,7 @@ describe('Calls to Google Analytics Object', function () { .then(() => { // we wait for the last event to fire // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(100).then(() => { + cy.wait(wait).then(() => { // get all the events in our layer that matches the event value const ev = [ ...window.dataLayer.filter( @@ -903,7 +904,6 @@ describe('Calls to Google Analytics Object', function () { .contains(EN_LOCALE_DATA.buttonGroup[1].value) .click() .then(() => { - // cy.wait(200) const ev = [ ...window.dataLayer.filter( x => @@ -911,8 +911,6 @@ describe('Calls to Google Analytics Object', function () { dataLayerValueZeroResultsViewEligible.event ), ] - - // delete ev[5]['gtm.uniqueEventId'] removeID(ev[5]) expect(ev[5]).to.deep.equal( @@ -988,7 +986,7 @@ describe('Calls to Google Analytics Object', function () { .click() // we wait for the last event to fire // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(100).then(() => { + cy.wait(wait).then(() => { // check last page change event const ev = [ ...window.dataLayer.filter( From 6d4ba04e41491153abf8c820ef6f235412beb92e Mon Sep 17 00:00:00 2001 From: scottqueen-bixal Date: Tue, 23 Jul 2024 10:44:24 -0400 Subject: [PATCH 08/16] PXBF-1548-update-gtm-e2e-tests: nest benefit link click in async effect --- .../cypress/e2e/storybook/dataLayer.cy.js | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js index f7dad71fa..134843769 100644 --- a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js +++ b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js @@ -434,7 +434,7 @@ 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 () { + it.only('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}`) cy.window().then(window => { @@ -461,23 +461,23 @@ describe('Calls to Google Analytics Object', function () { removeID(ev[0]) expect(ev[0]).to.deep.equal(dataLayerValueAccordionOpen) - }) - - pageObjects - .benefitsAccordionLink(enResults.eligible.eligible_benefits[0]) - .invoke('removeAttr', 'href') - .click() - .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) - }) + pageObjects + .benefitsAccordionLink(enResults.eligible.eligible_benefits[0]) + .invoke('removeAttr', 'href') + .click() + .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) + }) + }) }) }) }) From 54a9919afe1d3145412e6ff8b27da44cb93aa06c Mon Sep 17 00:00:00 2001 From: scottqueen-bixal Date: Tue, 23 Jul 2024 11:31:07 -0400 Subject: [PATCH 09/16] PXBF-1548-update-gtm-e2e-tests: updated dataLayer test --- .../cypress/e2e/storybook/dataLayer.cy.js | 35 +++++++++---------- 1 file changed, 16 insertions(+), 19 deletions(-) diff --git a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js index 134843769..38ce6d3e5 100644 --- a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js +++ b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js @@ -461,22 +461,23 @@ describe('Calls to Google Analytics Object', function () { removeID(ev[0]) expect(ev[0]).to.deep.equal(dataLayerValueAccordionOpen) + cy.wait(wait).then(() => { + pageObjects + .benefitsAccordionLink(enResults.eligible.eligible_benefits[0]) + .invoke('removeAttr', 'href') + .click() + .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]) - pageObjects - .benefitsAccordionLink(enResults.eligible.eligible_benefits[0]) - .invoke('removeAttr', 'href') - .click() - .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) - }) + expect(ev[0]).to.deep.equal(dataLayerValueBenefitLink) + }) + }) }) }) }) @@ -995,8 +996,6 @@ describe('Calls to Google Analytics Object', function () { dataLayerValueAccordionOpen.event ), ] - console.log(ev) - // delete ev[0]['gtm.uniqueEventId'] removeID(ev[0]) expect(ev[0]).to.deep.equal( @@ -1036,8 +1035,6 @@ describe('Calls to Google Analytics Object', function () { return item }) - console.log(cleanBfDataLayer) - expect(cleanBfDataLayer).to.deep.equal( dataLayerValues ) From 7350e21516dc5d80eb75890ba8e259d8f321ed03 Mon Sep 17 00:00:00 2001 From: scottqueen-bixal Date: Tue, 23 Jul 2024 14:16:48 -0400 Subject: [PATCH 10/16] PXBF-1548-update-gtm-e2e-tests: remove only --- benefit-finder/cypress/e2e/storybook/dataLayer.cy.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js index 38ce6d3e5..32462396a 100644 --- a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js +++ b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js @@ -143,7 +143,7 @@ const dataLayerValueZeroResultsViewEligible = { event: resultsView.event, bfData: { pageView: resultsView.bfData.pageView[0], - viewTitle: EN_LOCALE_DATA.resultsView.zeroBenefits.chevron.heading, + viewTitle: EN_LOCALE_DATA.resultsView.zeroBenefits.eligible.chevron.heading, ...zeroBenefitsEligibilityCount, }, } @@ -152,7 +152,8 @@ const dataLayerValueZeroResultsViewNotEligible = { event: resultsView.event, bfData: { pageView: resultsView.bfData.pageView[1], - viewTitle: EN_LOCALE_DATA.resultsView.zeroBenefits.chevron.heading, + viewTitle: + EN_LOCALE_DATA.resultsView.zeroBenefits.notEligible.chevron.heading, ...zeroBenefitsEligibilityCount, }, } @@ -434,7 +435,7 @@ describe('Calls to Google Analytics Object', function () { }) }) - it.only('clicking a obfuscated link in an open accordion on the results page with eligible benefits has a bf_benefit_link event', 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}`) cy.window().then(window => { From f61606be52dde2e4cc8396c7f9ec090bcd7d61bc Mon Sep 17 00:00:00 2001 From: scottqueen-bixal Date: Tue, 23 Jul 2024 14:24:10 -0400 Subject: [PATCH 11/16] PXBF-1548-update-gtm-e2e-tests: update to 2k ms --- benefit-finder/cypress/e2e/storybook/dataLayer.cy.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js index 32462396a..682e09503 100644 --- a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js +++ b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js @@ -435,7 +435,7 @@ 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 () { + it.only('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}`) cy.window().then(window => { @@ -462,7 +462,8 @@ describe('Calls to Google Analytics Object', function () { removeID(ev[0]) expect(ev[0]).to.deep.equal(dataLayerValueAccordionOpen) - cy.wait(wait).then(() => { + + cy.wait(wait * 2).then(() => { pageObjects .benefitsAccordionLink(enResults.eligible.eligible_benefits[0]) .invoke('removeAttr', 'href') From 522c1d1ec3cb7d8158ed9bbd82f62b0293d1c329 Mon Sep 17 00:00:00 2001 From: scottqueen-bixal Date: Tue, 23 Jul 2024 15:08:36 -0400 Subject: [PATCH 12/16] PXBF-1548-update-gtm-e2e-tests: wait 3 --- .../cypress/e2e/storybook/dataLayer.cy.js | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js index 682e09503..6d48618f1 100644 --- a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js +++ b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js @@ -462,24 +462,24 @@ describe('Calls to Google Analytics Object', function () { removeID(ev[0]) expect(ev[0]).to.deep.equal(dataLayerValueAccordionOpen) - - cy.wait(wait * 2).then(() => { - pageObjects - .benefitsAccordionLink(enResults.eligible.eligible_benefits[0]) - .invoke('removeAttr', 'href') - .click() - .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) - }) - }) + cy.wait(wait * 3) + // cy.wait(wait * 3).then(() => { + pageObjects + .benefitsAccordionLink(enResults.eligible.eligible_benefits[0]) + .invoke('removeAttr', 'href') + .click() + .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) + }) + // }) }) }) }) From 616efd76bcbf2484829022fc40c4fa3271a7006e Mon Sep 17 00:00:00 2001 From: scottqueen-bixal Date: Tue, 23 Jul 2024 16:45:13 -0400 Subject: [PATCH 13/16] PXBF-1548-update-gtm-e2e-tests: double click --- benefit-finder/cypress/e2e/storybook/dataLayer.cy.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js index 6d48618f1..5cc1d7778 100644 --- a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js +++ b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js @@ -435,7 +435,7 @@ describe('Calls to Google Analytics Object', function () { }) }) - it.only('clicking a obfuscated link in an open accordion on the results page with eligible benefits has a bf_benefit_link event', 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}`) cy.window().then(window => { @@ -462,12 +462,13 @@ describe('Calls to Google Analytics Object', function () { removeID(ev[0]) expect(ev[0]).to.deep.equal(dataLayerValueAccordionOpen) - cy.wait(wait * 3) + cy.wait(wait) // cy.wait(wait * 3).then(() => { pageObjects .benefitsAccordionLink(enResults.eligible.eligible_benefits[0]) .invoke('removeAttr', 'href') .click() + .click() // second click because cypress failing in safari .then(() => { // get all the events in our layer that matches the event value const ev = [ From 1e5b7ee3a8f6ea92a5626b7f286ada20d41c8bc5 Mon Sep 17 00:00:00 2001 From: scottqueen-bixal Date: Tue, 23 Jul 2024 16:56:38 -0400 Subject: [PATCH 14/16] PXBF-1548-update-gtm-e2e-tests: update page object selector --- benefit-finder/cypress/support/pageObjects.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/benefit-finder/cypress/support/pageObjects.js b/benefit-finder/cypress/support/pageObjects.js index 662f69391..561db5e8c 100644 --- a/benefit-finder/cypress/support/pageObjects.js +++ b/benefit-finder/cypress/support/pageObjects.js @@ -78,7 +78,9 @@ class PageObjects { } benefitsAccordionLink(accordionHeading) { - return cy.get(`[data-analytics-content="${accordionHeading}"] a`) + return cy.get( + `[data-analytics-content="${accordionHeading}"] a[data-testid="bf-benefit-link"]` + ) } menuButton() { From 7fbb40fb17405d81c371114ce416e6a361b61bc5 Mon Sep 17 00:00:00 2001 From: scottqueen-bixal Date: Tue, 23 Jul 2024 16:56:47 -0400 Subject: [PATCH 15/16] PXBF-1548-update-gtm-e2e-tests: try --- .../cypress/e2e/storybook/dataLayer.cy.js | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js index 5cc1d7778..910fd9b6f 100644 --- a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js +++ b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js @@ -435,7 +435,7 @@ 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 () { + it.only('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}`) cy.window().then(window => { @@ -462,13 +462,13 @@ describe('Calls to Google Analytics Object', function () { removeID(ev[0]) expect(ev[0]).to.deep.equal(dataLayerValueAccordionOpen) - cy.wait(wait) - // cy.wait(wait * 3).then(() => { + // we wait for the last event to fire + // eslint-disable-next-line cypress/no-unnecessary-waiting + cy.wait(2500) pageObjects .benefitsAccordionLink(enResults.eligible.eligible_benefits[0]) .invoke('removeAttr', 'href') .click() - .click() // second click because cypress failing in safari .then(() => { // get all the events in our layer that matches the event value const ev = [ @@ -480,7 +480,6 @@ describe('Calls to Google Analytics Object', function () { expect(ev[0]).to.deep.equal(dataLayerValueBenefitLink) }) - // }) }) }) }) @@ -932,8 +931,6 @@ describe('Calls to Google Analytics Object', function () { dataLayerValueZeroResultsViewNotEligible.event ), ] - - // delete ev[6]['gtm.uniqueEventId'] removeID(ev[6]) expect(ev[6]).to.deep.equal( @@ -954,8 +951,6 @@ describe('Calls to Google Analytics Object', function () { dataLayerValueOpenAllAccordions.event ), ] - - // delete ev[0]['gtm.uniqueEventId'] removeID(ev[0]) expect(ev[0]).to.deep.equal( @@ -975,7 +970,6 @@ describe('Calls to Google Analytics Object', function () { ] // we ignore dedup here so there can be multiple fires - // delete ev[1]['gtm.uniqueEventId'] removeID(ev[1]) expect(ev[1].bfData.accordionsOpen).to.equal( From 576985e81326dc4b05ce3736b06e42cb21565ec2 Mon Sep 17 00:00:00 2001 From: scottqueen-bixal Date: Tue, 23 Jul 2024 17:06:14 -0400 Subject: [PATCH 16/16] PXBF-1548-update-gtm-e2e-tests: force click --- benefit-finder/cypress/e2e/storybook/dataLayer.cy.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js index 910fd9b6f..777a74f82 100644 --- a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js +++ b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js @@ -435,7 +435,7 @@ describe('Calls to Google Analytics Object', function () { }) }) - it.only('clicking a obfuscated link in an open accordion on the results page with eligible benefits has a bf_benefit_link event', 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}`) cy.window().then(window => { @@ -468,7 +468,7 @@ describe('Calls to Google Analytics Object', function () { pageObjects .benefitsAccordionLink(enResults.eligible.eligible_benefits[0]) .invoke('removeAttr', 'href') - .click() + .click({ force: true }) .then(() => { // get all the events in our layer that matches the event value const ev = [