WS-1400: Add client side redirect

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

@@ -0,0 +1,69 @@
+import { redirectScript } from '.';
+
+describe('LiteRedirect', () => {
+  beforeEach(() => {
+    // I've tried mocking the replace function like this, but it still won't work.
+    // Object.defineProperty(window, 'location', {
+    //   configurable: true,
+    //   writable: true,
+    //   value: { replace: jest.fn() },
+    // });
+  });
+  it.each([
+    {
+      effectiveType: 'randomValue',
+      expectedRedirect: false,
+    },
+    {
+      effectiveType: 'slow-2g',
+      expectedRedirect: true,
+    },
+    {
+      effectiveType: '2g',
+      expectedRedirect: true,
+    },
+    {
+      effectiveType: '3g',
+      expectedRedirect: true,
+    },
+    {
+      effectiveType: '4g',
+      expectedRedirect: false,
+    },
+  ])(
+    `When the client is on $effectiveType then expect redirect should be $expectRedirect`,
+    ({ effectiveType, expectedRedirect }) => {
+      const isLite = false;
+      const testLitePath = '/testLitePath';
+
+      // Strangely enough, this works for mocking the navigator.
+      // Object.defineProperty(window, 'navigator', {
+      //   writable: true,
+      //   value: {
+      //     connection: {
+      //       effectiveType,
+      //     },
+      //   },
+      // });
+
+      const mockWindow = {
+        navigator: {
+          connection: {
+            effectiveType,
+          },
+        },
+        location: {
+          replace: jest.fn(),
+        },
+      } as unknown as Window;
+
+      redirectScript(mockWindow, isLite, testLitePath);
+      const replaceCallStack = (mockWindow.location.replace as jest.Mock).mock
+        .calls[0]?.[0];
+
+      const hasRedirected = Boolean(replaceCallStack);
+
+      expect(hasRedirected).toBe(expectedRedirect);
+    },
+  );
+});

src/app/components/LiteRedirect/index.tsx

@@ -0,0 +1,46 @@
+import { RequestContext } from '#app/contexts/RequestContext';
+import React, { use } from 'react';
+import { Helmet } from 'react-helmet';
+
+export const redirectScript = (
+  window: Window,
+  isLite: boolean,
+  pathname: string,
+) => {
+  if (!isLite && window?.navigator?.connection?.effectiveType) {
+    const ect = window.navigator.connection.effectiveType;
+    const normalisedEct = ect.toLocaleLowerCase();
+    switch (normalisedEct) {
+      case 'slow-2g':
+      case '2g':
+      case '3g':
+        window.location.replace(pathname);
+        break;
+      default:
+        break;
+    }
+  }
+};
+
+export default () => {
+  const { pathname, isLite, isAmp } = use(RequestContext);
+  const toLitePath = `${pathname}.lite`;
+  const innerHTML = `(
+    window.addEventListener('load', () => {
+      (${redirectScript.toString()})(window, ${isLite},'${toLitePath}')
+    })
+  )`;
+
+  return (
+    !isAmp && (
+      <Helmet
+        script={[
+          {
+            type: 'text/javascript',
+            innerHTML,
+          },
+        ]}
+      />
+    )
+  );
+};

src/app/pages/ArticlePage/ArticlePage.tsx

@@ -49,6 +49,7 @@ import { Recommendation } from '#app/models/types/onwardJourney';
 import ScrollablePromo from '#components/ScrollablePromo';
 import Recommendations from '#app/components/Recommendations';
 import { ReadTimeArticleExperiment as ReadTime } from '#app/components/ReadTime';
+import LiteRedirect from '#app/components/LiteRedirect';
 import ElectionBanner from './ElectionBanner';
 import ImageWithCaption from '../../components/ImageWithCaption';
 import AdContainer from '../../components/Ad';
@@ -391,6 +392,7 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
 
   return (
     <div css={styles.pageWrapper}>
+      <LiteRedirect />
       <ATIAnalytics atiData={atiData} />
       <ChartbeatAnalytics
         sectionName={pageData?.relatedContent?.section?.name}

src/global.d.ts

@@ -2,6 +2,13 @@ import { ReverbClient } from '#models/types/eventTracking';
 import { BumpType, Player } from '#app/components/MediaLoader/types';
 
 declare global {
+  interface Navigator {
+    connection?: {
+      effectiveType?: string;
+      addEventListener?: (type: string, listener: () => void) => void;
+      removeEventListener?: (type: string, listener: () => void) => void;
+    };
+  }
   interface Window {
     bbcpage:
       | {