WSTEAM1-1444: Adds Chartbeat to Live Pages With Refactor of SPA Functionality

scripts/bundleSize/bundleSizeConfig.js

@@ -7,5 +7,5 @@
  * We are allowing a variance of -5 on `MIN_SIZE` and +5 on `MAX_SIZE` to avoid the need for frequent changes, as bundle sizes can fluctuate
  */
 
-export const MIN_SIZE = 646 - 5;
-export const MAX_SIZE = 1185 + 5;
+export const MIN_SIZE = 640 - 5;
+export const MAX_SIZE = 1179 + 5;

src/app/components/ChartbeatAnalytics/canonical/index.test.tsx

@@ -1,19 +1,13 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import { render, act, waitFor } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import CanonicalChartbeatAnalytics from '.';
 import { CanonicalChartbeatConfig } from '../types';
 
 describe('CanonicalChartbeatAnalytics', () => {
-  // @ts-expect-error chartbeat requires pSUPERFLY object on global window
-  global.pSUPERFLY = {
-    virtualPage: jest.fn(),
-  };
-
   afterEach(jest.clearAllMocks);
 
-  // @ts-expect-error partial data for testing purposes
-  const pageAConfig: CanonicalChartbeatConfig = {
+  const pageConfig: CanonicalChartbeatConfig = {
     domain: 'test-domain',
     sections: 'section1 section2',
     virtualReferrer: null,
@@ -22,155 +16,13 @@ describe('CanonicalChartbeatAnalytics', () => {
     uid: 123,
   };
 
-  const pageBConfig = {
-    chartbeatConfig: {
-      domain: 'test-domain',
-      type: 'article',
-      sections: 'section1 section2',
-      chartbeatUID: 1111,
-      useCanonical: true,
-      virtualReferrer: '/page-A',
-      title: 'Page B',
-      uid: 123,
-    },
-  };
-
-  const pageCConfig = {
-    chartbeatConfig: {
-      domain: 'test-domain',
-      type: 'article',
-      sections: 'section1 section2',
-      chartbeatUID: 1111,
-      useCanonical: true,
-      virtualReferrer: '/page-B',
-      title: 'Page C',
-      uid: 123,
-    },
-  };
-
   it('should return the helmet wrapper with the script snippet', () => {
     render(
       <CanonicalChartbeatAnalytics
-        chartbeatConfig={pageAConfig}
+        chartbeatConfig={pageConfig}
         chartbeatSource="//chartbeat.js"
       />,
     );
     expect(Helmet.peek().scriptTags).toMatchSnapshot();
   });
-
-  it('should not re-render helment wrapper when config changes to Page B', async () => {
-    const { rerender } = render(
-      <CanonicalChartbeatAnalytics
-        chartbeatConfig={pageAConfig}
-        chartbeatSource="//chartbeat.js"
-      />,
-    );
-
-    await act(async () => {
-      rerender(
-        <CanonicalChartbeatAnalytics
-          chartbeatConfig={pageBConfig.chartbeatConfig}
-          chartbeatSource="//chartbeat.js"
-        />,
-      );
-    });
-
-    await waitFor(() => {
-      expect(document.querySelectorAll('script')[0].textContent).toMatch(
-        /"title":"Page A"/,
-      );
-    });
-  });
-
-  it('should call the global virtualPage function when props change', async () => {
-    const { rerender } = render(
-      <CanonicalChartbeatAnalytics
-        chartbeatConfig={pageAConfig}
-        chartbeatSource="//chartbeat.js"
-      />,
-    );
-
-    await act(async () => {
-      rerender(
-        <CanonicalChartbeatAnalytics
-          chartbeatConfig={{
-            domain: 'test-domain',
-            type: 'article',
-            sections: 'section1 section2',
-            useCanonical: true,
-            virtualReferrer: '/page-A',
-            title: 'Page B',
-            uid: 123,
-          }}
-          chartbeatSource="//chartbeat.js"
-        />,
-      );
-    });
-
-    await act(async () => {
-      // unmount
-      rerender(<div />);
-    });
-
-    // @ts-expect-error chartbeat requires pSUPERFLY object on global window
-    expect(global.pSUPERFLY.virtualPage).toHaveBeenCalled();
-    // @ts-expect-error chartbeat requires pSUPERFLY object on global window
-    expect(global.pSUPERFLY.virtualPage).toHaveBeenCalledWith({
-      domain: 'test-domain',
-      type: 'article',
-      sections: 'section1 section2',
-      useCanonical: true,
-      virtualReferrer: '/page-A',
-      title: 'Page B',
-      uid: 123,
-    });
-  });
-
-  it('should report correct virtual referrer when user navigates back from onward journey', async () => {
-    // initial PWA load (Page A)
-    const { rerender } = render(
-      <CanonicalChartbeatAnalytics
-        chartbeatConfig={pageAConfig}
-        chartbeatSource="//chartbeat.js"
-      />,
-    );
-
-    // inline link to Page B
-    await act(async () => {
-      rerender(
-        <CanonicalChartbeatAnalytics
-          chartbeatConfig={pageBConfig.chartbeatConfig}
-          chartbeatSource="//chartbeat.js"
-        />,
-      );
-    });
-
-    // inline link to Page C
-    await act(async () => {
-      rerender(
-        <CanonicalChartbeatAnalytics
-          chartbeatConfig={pageCConfig.chartbeatConfig}
-          chartbeatSource="//chartbeat.js"
-        />,
-      );
-    });
-
-    // press back, return to Page B
-    await act(async () => {
-      rerender(
-        <CanonicalChartbeatAnalytics
-          chartbeatConfig={pageBConfig.chartbeatConfig}
-          chartbeatSource="//chartbeat.js"
-        />,
-      );
-    });
-
-    const [[firstCall], [secondCall], [thirdCall]] =
-      // @ts-expect-error chartbeat requires pSUPERFLY object on global window
-      global.pSUPERFLY.virtualPage.mock.calls;
-
-    expect(firstCall.virtualReferrer).toEqual('/page-A');
-    expect(secondCall.virtualReferrer).toEqual('/page-B');
-    expect(thirdCall.virtualReferrer).toEqual('/page-A');
-  });
 });

src/app/components/ChartbeatAnalytics/canonical/index.tsx

@@ -1,41 +1,26 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
 import { Helmet } from 'react-helmet';
 import { CanonicalChartbeatProps } from '../types';
 import { chartbeatSource as defaultChartbeatSource } from '../utils';
 
 const CanonicalChartbeatBeacon = ({
   chartbeatConfig,
   chartbeatSource = defaultChartbeatSource,
-}: CanonicalChartbeatProps) => {
-  const [firstLoadConfig] = useState(chartbeatConfig);
-
-  const hasMounted = useRef(false);
-
-  useEffect(() => {
-    // @ts-expect-error chartbeat requires pSUPERFLY object on global window
-    if (hasMounted.current && window.pSUPERFLY) {
-      // @ts-expect-error chartbeat requires pSUPERFLY object on global window
-      window.pSUPERFLY.virtualPage(chartbeatConfig);
-    }
-    hasMounted.current = true;
-  }, [chartbeatConfig]);
-
-  return (
-    <Helmet>
-      <script async type="text/javascript">
-        {`
+}: CanonicalChartbeatProps) => (
+  <Helmet>
+    <script async type="text/javascript">
+      {`
         (function(){
           var _sf_async_config = window._sf_async_config = (window._sf_async_config || {});
-          var config = ${JSON.stringify(firstLoadConfig)};
+          var config = ${JSON.stringify(chartbeatConfig)};
           for (var key in config) {
             _sf_async_config[key] = config[key];
           }
         })();
       `}
-      </script>
-      <script defer type="text/javascript" src={chartbeatSource} />
-    </Helmet>
-  );
-};
+    </script>
+    <script defer type="text/javascript" src={chartbeatSource} />
+  </Helmet>
+);
 
 export default CanonicalChartbeatBeacon;

src/app/components/ChartbeatAnalytics/index.test.tsx

@@ -1,5 +1,6 @@
 import React, { PropsWithChildren, useMemo } from 'react';
 import { render } from '@testing-library/react';
+import { Helmet } from 'react-helmet';
 import { ARTICLE_PAGE } from '../../routes/utils/pageTypes';
 import { RequestContextProvider } from '../../contexts/RequestContext';
 import { ServiceContextProvider } from '../../contexts/ServiceContext';
@@ -25,6 +26,7 @@ interface Props {
   pageType: PageTypes;
   platform: Platforms;
   origin: string;
+  isLite?: boolean;
   toggleState?: {
     chartbeatAnalytics: {
       enabled: boolean;
@@ -38,6 +40,7 @@ const ContextWrap = ({
   platform,
   origin,
   children,
+  isLite = false,
   toggleState = defaultToggleState,
 }: PropsWithChildren<Props>) => {
   const memoizedToggleContextValue = useMemo(
@@ -51,6 +54,7 @@ const ContextWrap = ({
   );
   return (
     <RequestContextProvider
+      isLite={isLite}
       isAmp={platform === 'amp'}
       isApp={false}
       pageType={pageType}
@@ -74,6 +78,9 @@ const ContextWrap = ({
 };
 
 describe('Charbeats Analytics Container', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
   it('should call AmpCharbeatsBeacon when platform is amp and toggle enabled for chartbeat on live', () => {
     process.env.SIMORGH_APP_ENV = 'live';
     const mockAmp = jest.fn().mockReturnValue('amp-return-value');
@@ -87,7 +94,6 @@ describe('Charbeats Analytics Container', () => {
       domain: 'news-domain',
       sections: 'secction1 section2',
       contentType: 'article',
-      virtualReferrer: '/some-path',
       title: 'This is an article',
     };
 
@@ -126,7 +132,7 @@ describe('Charbeats Analytics Container', () => {
     expect(container.firstChild?.textContent).toEqual('amp-return-value');
   });
 
-  it('should return null when toggle is disbaled for live', () => {
+  it('should return null when toggle is disabled for live', () => {
     const toggleState = {
       chartbeatAnalytics: {
         enabled: false,
@@ -167,24 +173,20 @@ describe('Charbeats Analytics Container', () => {
     expect(container.firstChild).toBeNull();
   });
 
-  it('should call sendCanonicalChartbeatBeacon when platform is canonical, and toggle enabled for chartbeat on test', () => {
+  it('should add Chartbeat Helmet script with correct config when platform is canonical, toggle enabled and on test in Lite mode', () => {
     process.env.SIMORGH_APP_ENV = 'test';
-    const mockAmp = jest.fn().mockReturnValue('amp-return-value');
-    // @ts-expect-error requires mocking for testing purposes
-    amp.default = mockAmp;
 
     const expectedConfig = {
       uid: 50924,
       domain: 'test-domain',
       idSync: {
         bbc_hid: 'cookie',
       },
-      path: '/',
-      sections: 'secction1 section2',
+      path: '/pidgin/articles/c00000000o.lite',
+      sections: 'section1 section2',
       title: 'This is a canonical page article',
       type: 'article',
       useCanonical: true,
-      virtualReferrer: '/some-path',
     };
 
     const toggleState = {
@@ -198,6 +200,7 @@ describe('Charbeats Analytics Container', () => {
     testUtils.getConfig = mockGetConfig;
     render(
       <ContextWrap
+        isLite
         platform="canonical"
         pageType={ARTICLE_PAGE}
         origin="test.bbc.com"
@@ -210,9 +213,12 @@ describe('Charbeats Analytics Container', () => {
       </ContextWrap>,
     );
 
-    expect(sendCanonicalChartbeatBeacon).toHaveBeenCalledTimes(1);
-    expect(sendCanonicalChartbeatBeacon).toHaveBeenCalledWith(expectedConfig);
+    const [inlineScript] = Helmet.peek().scriptTags;
+    const scriptHtml = inlineScript.innerHTML;
+
     expect(testUtils.getConfig).toHaveBeenCalledTimes(1);
-    expect(mockAmp).not.toHaveBeenCalled();
+    expect(scriptHtml).toContain(JSON.stringify(expectedConfig));
+
+    expect(sendCanonicalChartbeatBeacon).not.toHaveBeenCalled();
   });
 });