Merge pull request #10877 from bbc/webvitals-for-home-and-fix-warnings

Web Vitals for new Home page, and fix Web Vitals warnings
bbc · Jun 13, 2023 · 3bc2c96 · 3bc2c96
2 parents 78689bf + cd1a9ca
commit 3bc2c96
Show file tree

Hide file tree

Showing 10 changed files with 35 additions and 10 deletions.
diff --git a/src/app/components/PageLayoutWrapper/index.test.tsx b/src/app/components/PageLayoutWrapper/index.test.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { render } from '../react-testing-library-with-providers';
 import PageLayoutWrapper from '.';
 
@@ -7,7 +8,10 @@ global.performance.getEntriesByName = jest.fn(() => []);
 describe('PageLayoutWrapper', () => {
   it('should render default page wrapper with children', async () => {
     const { container } = render(
-      <PageLayoutWrapper pageData={{}} status={200}>
+      <PageLayoutWrapper
+        pageData={{ metadata: { type: 'test-page-type' } }}
+        status={200}
+      >
         <h2>Child element</h2>
       </PageLayoutWrapper>,
     );

diff --git a/src/app/components/PageLayoutWrapper/index.tsx b/src/app/components/PageLayoutWrapper/index.tsx
@@ -5,7 +5,6 @@
 import React, { PropsWithChildren, useContext } from 'react';
 import { jsx } from '@emotion/react';
 import { Helmet } from 'react-helmet';
-import path from 'ramda/src/path';
 import pathOr from 'ramda/src/pathOr';
 
 import GlobalStyles from '#psammead/psammead-styles/src/global-styles';
@@ -22,7 +21,11 @@ import fontFacesLazy from '../ThemeProvider/fontFacesLazy';
 import styles from './index.styles';
 
 type Props = {
-  pageData: object;
+  pageData: {
+    metadata: {
+      type: string;
+    };
+  };
   status: number;
 };
 
@@ -36,11 +39,9 @@ const PageLayoutWrapper = ({
 
   const scriptSwitchId = pathOr('', ['scriptSwitchId'], pageData);
   const renderScriptSwitch = pathOr(true, ['renderScriptSwitch'], pageData);
-  const isErrorPage = [404, 500].includes(status);
-  const pageType = isErrorPage
-    ? 'WS-ERROR-PAGE'
-    : path<string>(['metadata', 'type'], pageData);
 
+  const isErrorPage = ![200].includes(status) || !status;
+  const pageType = pageData?.metadata?.type;
   const serviceFonts = fontFacesLazy(service);
   const fontJs =
     isAmp || !serviceFonts.length || process.env.JEST_WORKER_ID !== undefined
@@ -114,7 +115,7 @@ const PageLayoutWrapper = ({
       <ThemeProvider service={service} variant={variant}>
         {!isNextJs && <ServiceWorkerContainer />}
         <ManifestContainer />
-        <WebVitals pageType={pageType} />
+        {!isErrorPage && <WebVitals pageType={pageType} />}
         <GlobalStyles />
         <div id="main-wrapper" css={styles.wrapper}>
           <HeaderContainer

diff --git a/src/app/lib/config/toggles/__snapshots__/index.test.js.snap b/src/app/lib/config/toggles/__snapshots__/index.test.js.snap
@@ -49,6 +49,9 @@ Object {
   "variantCookie": Object {
     "enabled": true,
   },
+  "webVitalsMonitoring": Object {
+    "enabled": true,
+  },
 }
 `;
 
@@ -104,6 +107,9 @@ Object {
   "variantCookie": Object {
     "enabled": true,
   },
+  "webVitalsMonitoring": Object {
+    "enabled": true,
+  },
 }
 `;
 
@@ -156,5 +162,8 @@ Object {
   "variantCookie": Object {
     "enabled": true,
   },
+  "webVitalsMonitoring": Object {
+    "enabled": true,
+  },
 }
 `;
diff --git a/src/app/lib/config/toggles/liveConfig.js b/src/app/lib/config/toggles/liveConfig.js
@@ -47,4 +47,7 @@ export default {
   variantCookie: {
     enabled: true,
   },
+  webVitalsMonitoring: {
+    enabled: true,
+  },
 };
diff --git a/src/app/lib/config/toggles/localConfig.js b/src/app/lib/config/toggles/localConfig.js
@@ -50,4 +50,7 @@ export default {
   variantCookie: {
     enabled: true,
   },
+  webVitalsMonitoring: {
+    enabled: true,
+  },
 };
diff --git a/src/app/lib/config/toggles/testConfig.js b/src/app/lib/config/toggles/testConfig.js
@@ -47,4 +47,7 @@ export default {
   variantCookie: {
     enabled: true,
   },
+  webVitalsMonitoring: {
+    enabled: true,
+  },
 };
diff --git a/src/app/routes/homePage/getInitialData/index.ts b/src/app/routes/homePage/getInitialData/index.ts
@@ -54,10 +54,9 @@ export default async ({
       pageData: {
         id,
         title,
-        pageType,
+        metadata: { ...metadata, type: pageType },
         curations,
         description,
-        metadata,
       },
     };
   } catch (error: unknown) {

diff --git a/src/app/routes/index.test.jsx b/src/app/routes/index.test.jsx
@@ -172,6 +172,7 @@ describe('Main page routes', () => {
     ${'/kyrgyz/tipohome'} | ${'tipohome'}
     ${'/kyrgyz'}          | ${'home'}
   `('should route to and render a $description page', async ({ pathname }) => {
+    homePageJson.data.metadata = { type: 'home' };
     fetchMock.mock(`http://localhost${pathname}.json`, homePageJson);
 
     const { getInitialData, pageType } = getMatchingRoute(pathname);

diff --git a/ws-nextjs-app/pages/[service]/new_live/[id]/live.stories.tsx b/ws-nextjs-app/pages/[service]/new_live/[id]/live.stories.tsx
@@ -17,6 +17,7 @@ const mockPageData = {
 };
 
 const Component = () => (
+  // @ts-expect-error partial data required for storybook
   <PageLayoutWrapper pageData={mockPageData} status={200}>
     <Live pageData={mockPageData} />
   </PageLayoutWrapper>

diff --git a/ws-nextjs-app/pages/_app.page.tsx b/ws-nextjs-app/pages/_app.page.tsx
@@ -83,6 +83,7 @@ export default function App({ Component, pageProps }: Props) {
         >
           <EventTrackingContextProvider pageData={pageData}>
             <UserContextProvider>
+              {/* @ts-expect-error pageData requires metadata.type to be set to page type i.e. LIVE, but pageData is currently declared as an object */}
               <PageWrapper pageData={pageData} status={status}>
                 {status === 200 ? (
                   <Component {...pageProps} />