WORLDSERVICE-122: Cypress E2Es for ATI analytics for pages which use Reverb

cypress/e2e/specialFeatures/atiAnalytics/assertions/billboard.js

@@ -0,0 +1,58 @@
+import { interceptATIAnalyticsBeacons, COMPONENTS } from '../helpers';
+import { assertATIComponentClickEvent, assertATIComponentViewEvent } from '.';
+
+const { BILLBOARD } = COMPONENTS;
+
+export const assertBillboardComponentView = ({
+  pageIdentifier,
+  contentType,
+  useReverb,
+}) => {
+  it('should send a view event for the Billboard component', () => {
+    cy.url().then(url => {
+      interceptATIAnalyticsBeacons();
+      cy.visit(url);
+
+      cy.get('[data-testid="billboard-1"]').scrollIntoView({
+        duration: 1000,
+      });
+
+      assertATIComponentViewEvent({
+        component: BILLBOARD,
+        pageIdentifier,
+        contentType,
+        useReverb,
+      });
+    });
+  });
+};
+
+export const assertBillboardComponentClick = ({
+  pageIdentifier,
+  contentType,
+  useReverb,
+}) => {
+  it('should send a click event for the Billboard component', () => {
+    cy.url().then(url => {
+      interceptATIAnalyticsBeacons();
+      cy.visit(url);
+
+      cy.get('[data-testid="billboard-1"]').scrollIntoView({
+        duration: 1000,
+      });
+
+      // Click on first item
+      cy.get('[data-testid="billboard-1"]').find('a').first().click();
+
+      assertATIComponentClickEvent({
+        component: BILLBOARD,
+        pageIdentifier,
+        contentType,
+        useReverb,
+      });
+
+      // return to previous page
+      cy.visit(url);
+    });
+  });
+};

cypress/e2e/specialFeatures/atiAnalytics/assertions/featuresAnalysis.js

@@ -6,6 +6,7 @@ const { FEATURES } = COMPONENTS;
 export const assertFeaturesAnalysisComponentView = ({
   pageIdentifier,
   contentType,
+  useReverb,
 }) => {
   it('should send a view event for the Features & Analysis component', () => {
     cy.url().then(url => {
@@ -18,6 +19,7 @@ export const assertFeaturesAnalysisComponentView = ({
         component: FEATURES,
         pageIdentifier,
         contentType,
+        useReverb,
       });
     });
   });
@@ -26,6 +28,7 @@ export const assertFeaturesAnalysisComponentView = ({
 export const assertFeaturesAnalysisComponentClick = ({
   pageIdentifier,
   contentType,
+  useReverb,
 }) => {
   it.skip('should send a click event for the Features & Analysis component', () => {
     cy.url().then(url => {
@@ -44,6 +47,7 @@ export const assertFeaturesAnalysisComponentClick = ({
         component: FEATURES,
         pageIdentifier,
         contentType,
+        useReverb,
       });
 
       // return to previous page

cypress/e2e/specialFeatures/atiAnalytics/assertions/index.js

@@ -10,7 +10,6 @@ const assertATIPageViewEventParamsExist = ({
   applicationType,
 }) => {
   expect(params).to.have.property('s'); // destination
-  expect(params).to.have.property('s2'); // producer
   expect(params).to.have.property('p'); // page identifier
   expect(params).to.have.property('x2'); // application type
   expect(params).to.have.property('x3'); // application name
@@ -41,20 +40,23 @@ const assertATIPageViewEventParamsExist = ({
 
 const assertATIComponentViewEventParamsExist = params => {
   expect(params).to.have.property('s'); // destination
-  expect(params).to.have.property('s2'); // producer
   expect(params).to.have.property('p'); // page identifier
   expect(params).to.have.property('ati'); // view event
   expect(params).to.have.property('type');
   expect(params.type).to.equal('AT', 'params.type');
 };
 
-const assertATIComponentClickEventParamsExist = params => {
+const assertATIComponentClickEventParamsExist = ({ params, useReverb }) => {
   expect(params).to.have.property('s'); // destination
-  expect(params).to.have.property('s2'); // producer
-  expect(params).to.have.property('p'); // page identifier
   expect(params).to.have.property('atc'); // click event
   expect(params).to.have.property('type');
   expect(params.type).to.equal('AT', 'params.type');
+
+  if (useReverb) {
+    expect(params).to.have.property('patc'); // page identifier
+  } else {
+    expect(params).to.have.property('p'); // page identifier
+  }
 };
 
 export const assertPageView = ({
@@ -97,7 +99,7 @@ export const assertPageView = ({
 
 const getViewClickDetailsRegex = ({ contentType, component, pageIdentifier }) =>
   new RegExp(
-    `PUB-\\[${contentType}.*?\\]-\\[${component}.*?\\]-\\[.*?\\]-\\[.*?\\]-\\[${pageIdentifier}\\]-\\[.*?\\]-\\[.*?\\]-\\[.*?\\]`,
+    `PUB-\\[?${contentType}.*?\\]?-\\[?${component}.*?\\]?-\\[?.*?\\]?-\\[?.*?\\]?-\\[?${pageIdentifier}\\]?-\\[?.*?\\]?-\\[?.*?\\]?-\\[?.*?\\]?`,
     'g',
   );
 
@@ -130,20 +132,32 @@ export const assertATIComponentClickEvent = ({
   contentType,
   pageIdentifier,
   applicationType,
+  useReverb,
 }) =>
   cy
     .wait(`@${component}-ati-click`)
     .its('request.url')
     .then(url => {
       const params = getATIParamsFromURL(url);
 
-      assertATIComponentClickEventParamsExist(params);
+      assertATIComponentClickEventParamsExist({
+        params,
+        useReverb,
+        applicationType,
+      });
 
       if (applicationType === 'lite') {
         expect(params.app_type).to.equal(applicationType, 'params.app_type');
       }
 
-      expect(params.p).to.equal(pageIdentifier, 'params.p (page identifier)');
+      if (useReverb) {
+        expect(params.patc).to.equal(
+          pageIdentifier,
+          'params.patc (page identifier)',
+        );
+      } else {
+        expect(params.p).to.equal(pageIdentifier, 'params.p (page identifier)');
+      }
 
       expect(params.atc).to.match(
         getViewClickDetailsRegex({

cypress/e2e/specialFeatures/atiAnalytics/assertions/latestMedia.js

@@ -6,6 +6,7 @@ const { LATEST_MEDIA } = COMPONENTS;
 export const assertLatestMediaComponentView = ({
   pageIdentifier,
   contentType,
+  useReverb,
 }) => {
   it('should send a view event for the Latest Media component', () => {
     cy.url().then(url => {
@@ -18,6 +19,7 @@ export const assertLatestMediaComponentView = ({
         component: LATEST_MEDIA,
         pageIdentifier,
         contentType,
+        useReverb,
       });
     });
   });
@@ -26,6 +28,7 @@ export const assertLatestMediaComponentView = ({
 export const assertLatestMediaComponentClick = ({
   pageIdentifier,
   contentType,
+  useReverb,
 }) => {
   it('should send a click event for the Latest Media component', () => {
     cy.url().then(url => {
@@ -43,6 +46,7 @@ export const assertLatestMediaComponentClick = ({
         component: LATEST_MEDIA,
         pageIdentifier,
         contentType,
+        useReverb,
       });
 
       // return to previous page

cypress/e2e/specialFeatures/atiAnalytics/assertions/messageBanner.js

@@ -6,6 +6,7 @@ const { MESSAGE_BANNER } = COMPONENTS;
 export const assertMessageBannerComponentView = ({
   pageIdentifier,
   contentType,
+  useReverb,
 }) => {
   it('should send a view event for the Message Banner component', () => {
     cy.url().then(url => {
@@ -20,6 +21,7 @@ export const assertMessageBannerComponentView = ({
         component: MESSAGE_BANNER,
         pageIdentifier,
         contentType,
+        useReverb,
       });
     });
   });
@@ -28,6 +30,7 @@ export const assertMessageBannerComponentView = ({
 export const assertMessageBannerComponentClick = ({
   pageIdentifier,
   contentType,
+  useReverb,
 }) => {
   it('should send a click event for the Message Banner component', () => {
     cy.url().then(url => {
@@ -45,6 +48,7 @@ export const assertMessageBannerComponentClick = ({
         component: MESSAGE_BANNER,
         pageIdentifier,
         contentType,
+        useReverb,
       });
 
       // return to previous page

cypress/e2e/specialFeatures/atiAnalytics/assertions/mostRead.js

@@ -6,6 +6,7 @@ const { MOST_READ } = COMPONENTS;
 export const assertMostReadComponentView = ({
   pageIdentifier,
   contentType,
+  useReverb,
 }) => {
   it('should send a view event for the Most Read component', () => {
     cy.url().then(url => {
@@ -18,6 +19,7 @@ export const assertMostReadComponentView = ({
         component: MOST_READ,
         pageIdentifier,
         contentType,
+        useReverb,
       });
     });
   });
@@ -26,6 +28,7 @@ export const assertMostReadComponentView = ({
 export const assertMostReadComponentClick = ({
   pageIdentifier,
   contentType,
+  useReverb,
 }) => {
   it('should send a click event for the Most Read component', () => {
     cy.url().then(url => {
@@ -41,6 +44,7 @@ export const assertMostReadComponentClick = ({
         component: MOST_READ,
         pageIdentifier,
         contentType,
+        useReverb,
       });
 
       // return to previous page

cypress/e2e/specialFeatures/atiAnalytics/assertions/navigation.js

@@ -6,6 +6,7 @@ const { SCROLLABLE_NAVIGATION, DROPDOWN_NAVIGATION } = COMPONENTS;
 export const assertScrollableNavigationComponentView = ({
   pageIdentifier,
   contentType,
+  useReverb,
 }) => {
   it('should send a view event for the Scrollable Navigation component', () => {
     cy.url().then(url => {
@@ -15,10 +16,12 @@ export const assertScrollableNavigationComponentView = ({
       cy.get('[data-e2e="scrollable-nav"]').scrollIntoView({
         duration: 1000,
       });
+
       assertATIComponentViewEvent({
         component: SCROLLABLE_NAVIGATION,
         pageIdentifier,
         contentType,
+        useReverb,
       });
     });
   });
@@ -27,6 +30,7 @@ export const assertScrollableNavigationComponentView = ({
 export const assertScrollableNavigationComponentClick = ({
   pageIdentifier,
   contentType,
+  useReverb,
 }) => {
   it('should send a click event for the Scrollable Navigation component', () => {
     cy.url().then(url => {
@@ -44,6 +48,7 @@ export const assertScrollableNavigationComponentClick = ({
         component: SCROLLABLE_NAVIGATION,
         pageIdentifier,
         contentType,
+        useReverb,
       });
 
       // return to previous page
@@ -56,6 +61,7 @@ export const assertScrollableNavigationComponentClick = ({
 export const assertDropdownNavigationComponentView = ({
   pageIdentifier,
   contentType,
+  useReverb,
 }) => {
   it('should send a view event for the Dropdown Navigation component', () => {
     cy.url().then(url => {
@@ -69,6 +75,7 @@ export const assertDropdownNavigationComponentView = ({
         component: DROPDOWN_NAVIGATION,
         pageIdentifier,
         contentType,
+        useReverb,
       });
     });
   });
@@ -77,6 +84,7 @@ export const assertDropdownNavigationComponentView = ({
 export const assertDropdownNavigationComponentClick = ({
   pageIdentifier,
   contentType,
+  useReverb,
 }) => {
   it('should send a click event for the Dropdown Navigation component', () => {
     cy.url().then(url => {
@@ -93,6 +101,7 @@ export const assertDropdownNavigationComponentClick = ({
         component: DROPDOWN_NAVIGATION,
         pageIdentifier,
         contentType,
+        useReverb,
       });
 
       // Return to previous page

cypress/e2e/specialFeatures/atiAnalytics/assertions/relatedContent.js

@@ -6,6 +6,7 @@ const { RELATED_CONTENT } = COMPONENTS;
 export const assertRelatedContentComponentView = ({
   pageIdentifier,
   contentType,
+  useReverb,
 }) => {
   it('should send a view event for the Related Content component', () => {
     cy.url().then(url => {
@@ -20,6 +21,7 @@ export const assertRelatedContentComponentView = ({
         component: RELATED_CONTENT,
         pageIdentifier,
         contentType,
+        useReverb,
       });
     });
   });
@@ -28,6 +30,7 @@ export const assertRelatedContentComponentView = ({
 export const assertRelatedContentComponentClick = ({
   pageIdentifier,
   contentType,
+  useReverb,
 }) => {
   it('should send a click event for the Related Content component', () => {
     cy.url().then(url => {
@@ -45,6 +48,7 @@ export const assertRelatedContentComponentClick = ({
         component: RELATED_CONTENT,
         pageIdentifier,
         contentType,
+        useReverb,
       });
 
       // return to previous page

cypress/e2e/specialFeatures/atiAnalytics/assertions/relatedTopics.js

@@ -6,6 +6,7 @@ const { RELATED_TOPICS } = COMPONENTS;
 export const assertRelatedTopicsComponentView = ({
   pageIdentifier,
   contentType,
+  useReverb,
 }) => {
   it('should send a view event for the Related Topics component', () => {
     cy.url().then(url => {
@@ -20,6 +21,7 @@ export const assertRelatedTopicsComponentView = ({
         component: RELATED_TOPICS,
         pageIdentifier,
         contentType,
+        useReverb,
       });
     });
   });
@@ -28,6 +30,7 @@ export const assertRelatedTopicsComponentView = ({
 export const assertRelatedTopicsComponentClick = ({
   pageIdentifier,
   contentType,
+  useReverb,
 }) => {
   it('should send a click event for the Related Topics component', () => {
     cy.url().then(url => {
@@ -45,6 +48,7 @@ export const assertRelatedTopicsComponentClick = ({
         component: RELATED_TOPICS,
         pageIdentifier,
         contentType,
+        useReverb,
       });
 
       // return to previous page