WSTEAMA-1412: Add Reverb dependency as the transpiled version

src/app/components/ATIAnalytics/atiUrl/index.test.ts

@@ -1,6 +1,12 @@
 import { resetWindowValue } from '#psammead/psammead-test-helpers/src';
+import { Platforms } from '#app/models/types/global';
 import * as genericLabelHelpers from '../../../lib/analyticsUtils';
-import { buildATIPageTrackPath, buildATIEventTrackUrl } from '.';
+import {
+  buildATIPageTrackPath,
+  buildATIEventTrackUrl,
+  buildReverbAnalyticsModel,
+  buildReverbPageSectionEventModel,
+} from '.';
 
 // @ts-expect-error required for testing purposes
 const mockAndSet = ({ name, source }, response) => {
@@ -50,6 +56,7 @@ describe('getThingAttributes', () => {
 
   afterEach(() => {
     jest.resetAllMocks();
+
     resetWindowValue('location', windowLocation);
   });
 
@@ -278,3 +285,159 @@ describe('buildATIEventTrackUrl', () => {
     ]);
   });
 });
+
+describe('Reverb', () => {
+  describe('buildReverbAnalyticsModel', () => {
+    beforeEach(() => {
+      analyticsUtilFunctions.forEach(func => {
+        mockAndSet(func, func.name);
+      });
+    });
+
+    afterEach(() => {
+      jest.resetAllMocks();
+    });
+
+    const input = {
+      appName: 'news',
+      campaigns: [
+        {
+          campaignId: '1',
+          campaignName: 'campaign1',
+        },
+        {
+          campaignId: '2',
+          campaignName: 'campaign2',
+        },
+      ],
+      categoryName: 'categoryName',
+      contentId: 'contentId',
+      contentType: 'contentType',
+      language: 'language',
+      ldpThingIds: 'ldpThingIds',
+      ldpThingLabels: 'ldpThingLabels',
+      libraryVersion: 'libraryVersion',
+      pageIdentifier: 'pageIdentifier',
+      pageTitle: 'pageTitle',
+      platform: 'canonical' as Platforms,
+      previousPath: '',
+      producerName: 'producerName',
+      origin: 'http://localhost',
+      nationsProducer: '',
+      statsDestination: 'statsDestination',
+      timePublished: 'timePublished',
+      timeUpdated: 'timeUpdated',
+    };
+
+    it('should return the correct Reverb analytics model', () => {
+      const reverbAnalyticsModel = buildReverbAnalyticsModel(input);
+
+      const pageParams = {
+        contentId: 'contentId',
+        contentType: 'contentType',
+        destination: 'statsDestination',
+        name: 'pageIdentifier',
+        producer: 'producerName',
+        additionalProperties: {
+          app_name: 'news',
+          app_type: 'getAppType',
+          content_language: 'language',
+          product_platform: null,
+          referrer_url: 'getReferrer',
+          x5: 'getHref',
+          x8: 'libraryVersion',
+          x9: 'sanitise',
+          x10: '',
+          x11: 'timePublished',
+          x12: 'timeUpdated',
+          x13: 'ldpThingLabels',
+          x14: 'ldpThingIds',
+          x16: 'campaign1~campaign2',
+          x17: 'categoryName',
+          x18: 'isLocServeCookieSet',
+        },
+      };
+
+      expect(reverbAnalyticsModel.params.page).toEqual(pageParams);
+      expect(reverbAnalyticsModel.eventDetails).toEqual({
+        eventName: 'pageView',
+      });
+    });
+  });
+
+  describe('buildReverbPageSectionEventModel', () => {
+    const input = {
+      pageIdentifier: 'mundo.page',
+      producerName: 'MUNDO',
+      statsDestination: 'statsDestination',
+      componentName: 'top-stories',
+      campaignID: '1234',
+      format: 'format',
+      type: 'view',
+      advertiserID: 'advertiserID',
+      url: 'http://localhost',
+    };
+
+    it('should return the correct Reverb page section view event model', () => {
+      const reverbPageSectionViewEventModel =
+        buildReverbPageSectionEventModel(input);
+
+      const pageSectionViewEventParams = {
+        destination: 'statsDestination',
+        name: 'mundo.page',
+        producer: 'MUNDO',
+        additionalProperties: {
+          ati: 'PUB-[1234]-[top-stories]-[]-[format]-[mundo.page]-[]-[advertiserID]-[http://localhost]',
+          type: 'AT',
+        },
+      };
+
+      expect(reverbPageSectionViewEventModel.params.page).toEqual(
+        pageSectionViewEventParams,
+      );
+    });
+
+    it('should return the correct eventName for the Reverb page section view event model', () => {
+      const reverbPageSectionViewEventModel =
+        buildReverbPageSectionEventModel(input);
+
+      expect(reverbPageSectionViewEventModel.eventDetails).toEqual({
+        eventName: 'sectionView',
+      });
+    });
+
+    it('should return the correct Reverb page section click event model', () => {
+      const reverbPageSectionViewEventModel = buildReverbPageSectionEventModel({
+        ...input,
+        type: 'click',
+      });
+
+      const pageSectionViewEventParams = {
+        destination: 'statsDestination',
+        name: 'mundo.page',
+        producer: 'MUNDO',
+        additionalProperties: {
+          atc: 'PUB-[1234]-[top-stories]-[]-[format]-[mundo.page]-[]-[advertiserID]-[http://localhost]',
+          type: 'AT',
+        },
+      };
+
+      expect(reverbPageSectionViewEventModel.params.page).toEqual(
+        pageSectionViewEventParams,
+      );
+    });
+
+    it('should return the correct event details for the Reverb page section click event model', () => {
+      const reverbPageSectionViewEventModel = buildReverbPageSectionEventModel({
+        ...input,
+        type: 'click',
+      });
+
+      expect(reverbPageSectionViewEventModel.eventDetails).toEqual({
+        eventName: 'sectionClick',
+        componentName: 'top-stories',
+        container: '1234',
+      });
+    });
+  });
+});

src/app/components/ATIAnalytics/atiUrl/index.ts

@@ -417,3 +417,124 @@ export const buildATIEventTrackUrl = ({
     eventTrackingBeaconValues,
   )}&type=AT`;
 };
+
+export const buildReverbAnalyticsModel = ({
+  appName,
+  campaigns,
+  categoryName,
+  contentId,
+  contentType,
+  language,
+  ldpThingIds,
+  ldpThingLabels,
+  libraryVersion,
+  pageIdentifier,
+  pageTitle,
+  platform,
+  previousPath,
+  producerName,
+  origin,
+  nationsProducer,
+  statsDestination,
+  timePublished,
+  timeUpdated,
+}: ATIPageTrackingProps) => {
+  const href = getHref(platform);
+  const referrer = getReferrer(platform, origin, previousPath);
+
+  const aggregatedCampaigns = (Array.isArray(campaigns) ? campaigns : [])
+    .map(({ campaignName }) => campaignName)
+    .join('~');
+
+  const hashedId = getAtUserId();
+
+  const eventDetails = {
+    eventName: 'pageView',
+  };
+
+  const reverbVariables = {
+    params: {
+      page: {
+        contentId,
+        contentType,
+        destination: statsDestination,
+        name: pageIdentifier,
+        producer: producerName,
+        additionalProperties: {
+          app_name: platform === 'app' ? `${appName}-app` : appName,
+          app_type: getAppType(platform),
+          content_language: language,
+          product_platform: onOnionTld() ? 'tor-bbc' : null,
+          referrer_url:
+            referrer && encodeURIComponent(encodeURIComponent(referrer)),
+          x5: href && encodeURIComponent(encodeURIComponent(href)),
+          x8: libraryVersion,
+          x9: sanitise(pageTitle),
+          x10: nationsProducer && nationsProducer,
+          x11: timePublished,
+          x12: timeUpdated,
+          x13: ldpThingLabels,
+          x14: ldpThingIds,
+          x16: aggregatedCampaigns,
+          x17: categoryName,
+          x18: isLocServeCookieSet(),
+        },
+      },
+      user: {
+        hashedId,
+        isSignedIn: !!hashedId,
+      },
+    },
+    eventDetails,
+  };
+
+  return reverbVariables;
+};
+
+export const buildReverbPageSectionEventModel = ({
+  pageIdentifier,
+  producerName,
+  statsDestination,
+  componentName,
+  campaignID,
+  format,
+  type,
+  advertiserID,
+  url,
+}: ATIEventTrackingProps) => {
+  const eventPublisher = type === 'view' ? 'ati' : 'atc';
+
+  const eventDetails = {
+    eventName: type === 'view' ? 'sectionView' : 'sectionClick',
+    ...(type === 'click' && {
+      componentName,
+      container: campaignID,
+    }),
+  };
+
+  return {
+    params: {
+      page: {
+        destination: statsDestination,
+        name: pageIdentifier,
+        producer: producerName,
+        additionalProperties: {
+          [eventPublisher]: getEventInfo({
+            campaignID,
+            componentName,
+            format,
+            pageIdentifier,
+            advertiserID,
+            url,
+          }),
+          type: 'AT',
+        },
+      },
+      user: {
+        hashedId: getAtUserId(),
+        isSignedIn: false,
+      },
+    },
+    eventDetails,
+  };
+};

src/app/components/ATIAnalytics/beacon/index.test.ts

@@ -11,6 +11,18 @@ const sendBeaconSpy = jest.spyOn(sendBeacon, 'default');
   .fn()
   .mockReturnValue('00-00-00');
 
+const reverbMock = {
+  isReady: jest.fn(),
+  initialise: jest.fn(() => Promise.resolve()),
+  viewEvent: jest.fn(),
+  userActionEvent: jest.fn(),
+};
+
+// eslint-disable-next-line no-underscore-dangle
+window.__reverb = {
+  __reverbLoadedPromise: Promise.resolve(reverbMock),
+};
+
 describe('beacon', () => {
   const originalATIBaseUrl = process.env.SIMORGH_ATI_BASE_URL;
   const atiBaseUrl = 'https://foobar.com?';
@@ -48,5 +60,45 @@ describe('beacon', () => {
         type: 'AT',
       });
     });
+
+    describe('Reverb', () => {
+      it('should call reverb view event exactly once', async () => {
+        await sendEventBeacon({
+          type: 'view',
+          service: 'news',
+          componentName: 'component',
+          pageIdentifier: 'pageIdentifier',
+          detailedPlacement: 'detailedPlacement',
+          useReverb: true,
+        });
+        expect(sendBeaconSpy).toHaveBeenCalledTimes(1);
+
+        expect(reverbMock.viewEvent).toHaveBeenCalledTimes(1);
+      });
+
+      it('should call reverb click event exactly once', async () => {
+        await sendEventBeacon({
+          type: 'click',
+          service: 'news',
+          componentName: 'component',
+          campaignID: 'campaign1',
+          pageIdentifier: 'pageIdentifier',
+          detailedPlacement: 'detailedPlacement',
+          useReverb: true,
+        });
+        expect(sendBeaconSpy).toHaveBeenCalledTimes(1);
+
+        expect(reverbMock.userActionEvent).toHaveBeenCalledTimes(1);
+
+        expect(reverbMock.userActionEvent).toHaveBeenCalledWith(
+          'click',
+          'component',
+          { container: 'campaign1' },
+          {},
+          {},
+          true,
+        );
+      });
+    });
   });
 });