WORLDSERVICE-122: Cypress E2E tests for ATI Analytics

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

@@ -0,0 +1,53 @@
+import { interceptATIAnalyticsBeacons, COMPONENTS } from '../helpers';
+import { assertATIComponentClickEvent, assertATIComponentViewEvent } from '.';
+
+const { FEATURES } = COMPONENTS;
+
+export const assertFeaturesAnalysisComponentView = ({
+  pageIdentifier,
+  contentType,
+}) => {
+  it('should send a view event for the Features & Analysis component', () => {
+    cy.url().then(url => {
+      interceptATIAnalyticsBeacons();
+      cy.visit(url);
+
+      cy.get('[data-testid="features"]').scrollIntoView({ duration: 1000 });
+
+      assertATIComponentViewEvent({
+        component: FEATURES,
+        pageIdentifier,
+        contentType,
+      });
+    });
+  });
+};
+
+export const assertFeaturesAnalysisComponentClick = ({
+  pageIdentifier,
+  contentType,
+}) => {
+  it.skip('should send a click event for the Features & Analysis component', () => {
+    cy.url().then(url => {
+      interceptATIAnalyticsBeacons();
+      cy.visit(url);
+
+      cy.get('[data-testid="features"]').scrollIntoView({ duration: 1000 });
+
+      // Click on first item
+      cy.get('[data-testid="features"]')
+        .find('a')
+        .first()
+        .click({ force: true });
+
+      assertATIComponentClickEvent({
+        component: FEATURES,
+        pageIdentifier,
+        contentType,
+      });
+
+      // return to previous page
+      cy.visit(url);
+    });
+  });
+};

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

@@ -0,0 +1,156 @@
+import {
+  ATI_PAGE_VIEW,
+  getATIParamsFromURL,
+  interceptATIAnalyticsBeacons,
+} from '../helpers';
+
+const assertATIPageViewEventParamsExist = ({
+  params,
+  contentType,
+  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
+  expect(params).to.have.property('x4'); // language
+  expect(params).to.have.property('x7'); // content type
+  expect(params).to.have.property('x8'); // library version
+  expect(params).to.have.property('x9'); // page title
+
+  if (['responsive', 'amp'].includes(applicationType)) {
+    expect(params).to.have.property('r'); // screen resolution & colour depth
+    expect(params).to.have.property('re'); // browser/viewport resolution
+    expect(params).to.have.property('hl'); // timestamp
+    expect(params).to.have.property('lng'); // device language
+    expect(params).to.have.property('x5'); // url
+  }
+
+  if (contentType !== 'list-datadriven') {
+    expect(params).to.have.property('x1'); // content ID
+  }
+
+  if (contentType === 'article') {
+    expect(params).to.have.property('x11'); // first published
+    expect(params).to.have.property('x12'); // last published
+    expect(params).to.have.property('x13'); // ldp things
+    expect(params).to.have.property('x17'); // category
+  }
+};
+
+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 => {
+  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');
+};
+
+export const assertPageView = ({
+  pageIdentifier,
+  applicationType,
+  contentType,
+  service,
+}) => {
+  it(`should send a page view event with service = ${service}, page identifier = ${pageIdentifier}, application type = ${applicationType} and content type = ${contentType}`, () => {
+    cy.url().then(url => {
+      interceptATIAnalyticsBeacons();
+      cy.visit(url);
+
+      cy.wait(`@${ATI_PAGE_VIEW}`).then(({ request }) => {
+        const params = getATIParamsFromURL(request.url);
+
+        assertATIPageViewEventParamsExist({
+          params,
+          contentType,
+          applicationType,
+        });
+
+        expect(params.p).to.equal(pageIdentifier, 'params.p (page identifier)');
+        expect(params.x2).to.equal(
+          `[${applicationType}]`,
+          'params.x2 (application type)',
+        );
+        expect(params.x3).to.equal(
+          `[news-${service}]`,
+          'params.x3 (application name)',
+        );
+        expect(params.x7).to.equal(
+          `[${contentType}]`,
+          'params.x7 (content type)',
+        );
+      });
+    });
+  });
+};
+
+const getViewClickDetailsRegex = ({ contentType, component, pageIdentifier }) =>
+  new RegExp(
+    `PUB-\\[${contentType}.*?\\]-\\[${component}.*?\\]-\\[.*?\\]-\\[.*?\\]-\\[${pageIdentifier}\\]-\\[.*?\\]-\\[.*?\\]-\\[.*?\\]`,
+    'g',
+  );
+
+export const assertATIComponentViewEvent = ({
+  component,
+  pageIdentifier,
+  contentType,
+}) =>
+  cy
+    .wait(`@${component}-ati-view`)
+    .its('request.url')
+    .then(url => {
+      const params = getATIParamsFromURL(url);
+
+      assertATIComponentViewEventParamsExist(params);
+
+      expect(params.p).to.equal(pageIdentifier, 'params.p (page identifier)');
+      expect(params.ati).to.match(
+        getViewClickDetailsRegex({
+          contentType,
+          component,
+          pageIdentifier,
+        }),
+        'params.ati (publisher impression)',
+      );
+    });
+
+export const assertATIComponentClickEvent = ({
+  component,
+  contentType,
+  pageIdentifier,
+  applicationType,
+}) =>
+  cy
+    .wait(`@${component}-ati-click`)
+    .its('request.url')
+    .then(url => {
+      const params = getATIParamsFromURL(url);
+
+      assertATIComponentClickEventParamsExist(params);
+
+      if (applicationType === 'lite') {
+        expect(params.app_type).to.equal(applicationType, 'params.app_type');
+      }
+
+      expect(params.p).to.equal(pageIdentifier, 'params.p (page identifier)');
+
+      expect(params.atc).to.match(
+        getViewClickDetailsRegex({
+          contentType,
+          pageIdentifier,
+          component,
+        }),
+        'params.atc (publisher click)',
+      );
+    });

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

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

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

@@ -0,0 +1,33 @@
+import { COMPONENTS, interceptATIAnalyticsBeacons } from '../helpers';
+import { assertATIComponentClickEvent } from '.';
+
+const { LITE_SITE_CTA } = COMPONENTS;
+
+// eslint-disable-next-line import/prefer-default-export
+export const assertLiteSiteCTAComponentClick = ({
+  pageIdentifier,
+  contentType,
+}) => {
+  it('should send a click event for the Lite Site CTA component', () => {
+    cy.url().then(url => {
+      interceptATIAnalyticsBeacons();
+      cy.visit(url);
+
+      cy.get('[data-e2e="to-main-site"]').scrollIntoView({
+        duration: 1000,
+      });
+
+      // Click on first item
+      cy.get('[data-e2e="to-main-site"]').find('a').first().click();
+
+      assertATIComponentClickEvent({
+        component: LITE_SITE_CTA,
+        pageIdentifier,
+        contentType,
+      });
+
+      // return to previous page
+      cy.visit(url);
+    });
+  });
+};

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

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