Merge branch 'latest' into switch-to-rambda

package.json

@@ -104,7 +104,7 @@
     "compression": "1.7.4",
     "core-js": "3.37.1",
     "dotenv": "16.4.5",
-    "express": "4.20.0",
+    "express": "4.21.1",
     "express-static-gzip": "2.1.7",
     "helmet": "7.1.0",
     "helmet-csp": "4.0.0",
@@ -206,10 +206,10 @@
     "compression-webpack-plugin": "11.1.0",
     "copy-webpack-plugin": "12.0.2",
     "crypto": "1.0.1",
-    "cypress": "13.10.0",
+    "cypress": "13.15.0",
     "cypress-axe": "1.5.0",
     "cypress-multi-reporters": "1.6.4",
-    "cypress-terminal-report": "6.1.2",
+    "cypress-terminal-report": "7.0.4",
     "depcheck": "1.4.7",
     "eslint": "7.32.0",
     "eslint-config-airbnb": "18.2.1",

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

@@ -0,0 +1,86 @@
+import React from 'react';
+import { render, waitFor } from '../react-testing-library-with-providers';
+import AmpExperiment from './index';
+
+const experimentConfig = {
+  someExperiment: {
+    variants: {
+      control: 33,
+      variant_1: 33,
+      variant_2: 33,
+    },
+  },
+};
+
+const multipleExperimentConfig = {
+  aExperiment: {
+    variants: {
+      control: 33,
+      variant_1: 33,
+      variant_2: 33,
+    },
+  },
+  bExperiment: {
+    variants: {
+      control: 33,
+      variant_1: 33,
+      variant_2: 33,
+    },
+  },
+};
+
+describe('Amp experiment container on Amp pages', () => {
+  it('should render an amp-experiment with the expected config', async () => {
+    const { container } = render(
+      <AmpExperiment experimentConfig={experimentConfig} />,
+    );
+    expect(container.querySelector('amp-experiment')).toBeInTheDocument();
+    expect(container).toMatchInlineSnapshot(`
+    <div>
+      <amp-experiment>
+        <script
+          type="application/json"
+        >
+          {"someExperiment":{"variants":{"control":33,"variant_1":33,"variant_2":33}}}
+        </script>
+      </amp-experiment>
+    </div>
+    `);
+  });
+
+  it('should render an amp-experiment with the expected config when multiple experiments are running at the same time', async () => {
+    const { container } = render(
+      <AmpExperiment experimentConfig={multipleExperimentConfig} />,
+    );
+    expect(container.querySelector('amp-experiment')).toBeInTheDocument();
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <amp-experiment>
+          <script
+            type="application/json"
+          >
+            {"aExperiment":{"variants":{"control":33,"variant_1":33,"variant_2":33}},"bExperiment":{"variants":{"control":33,"variant_1":33,"variant_2":33}}}
+          </script>
+        </amp-experiment>
+      </div>
+    `);
+  });
+
+  it(`should add amp-experiment extension script to page head`, async () => {
+    render(<AmpExperiment experimentConfig={experimentConfig} />);
+
+    await waitFor(() => {
+      const scripts = Array.from(document.querySelectorAll('head script'));
+
+      expect(scripts).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            src: `https://cdn.ampproject.org/v0/amp-experiment-0.1.js`,
+          }),
+        ]),
+      );
+
+      expect(scripts).toHaveLength(1);
+    });
+  });
+});

src/app/components/AmpExperiment/index.tsx

@@ -0,0 +1,50 @@
+/** @jsx jsx */
+/* @jsxFrag React.Fragment */
+import { jsx } from '@emotion/react';
+import React from 'react';
+import { Helmet } from 'react-helmet';
+
+type Variant = string;
+type Experiment = string;
+type TrafficAllocationPercentage = number;
+
+type AmpExperimentConfig = {
+  [key: Experiment]: {
+    sticky?: boolean;
+    consentNotificationId?: string;
+    variants: {
+      [key: Variant]: TrafficAllocationPercentage;
+    };
+  };
+};
+
+type AmpExperimentProps = {
+  [key: Experiment]: AmpExperimentConfig;
+};
+
+const AmpHead = () => (
+  <Helmet>
+    <script
+      async
+      custom-element="amp-experiment"
+      src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js"
+    />
+  </Helmet>
+);
+
+const AmpExperiment = ({ experimentConfig }: AmpExperimentProps) => {
+  return (
+    <>
+      <AmpHead />
+      <amp-experiment>
+        <script
+          type="application/json"
+          /* eslint-disable-next-line react/no-danger */
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(experimentConfig) }}
+        />
+      </amp-experiment>
+    </>
+  );
+};
+
+export default AmpExperiment;

src/app/components/AmpExperiment/types.d.ts

@@ -0,0 +1,7 @@
+declare namespace JSX {
+  interface IntrinsicElements {
+    'amp-experiment': React.PropsWithChildren<
+      ScriptHTMLAttributes<HTMLScriptElement>
+    >;
+  }
+}

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

@@ -57,6 +57,7 @@ interface MetadataWithContextProps extends MetadataProps {
   pageType: PageTypes;
   id?: string | null;
   pathname: string;
+  isUK?: boolean;
 }
 
 const MetadataWithContext = ({
@@ -79,6 +80,7 @@ const MetadataWithContext = ({
   mentionsTags,
   hasAppleItunesAppBanner,
   hasAmpPage,
+  isUK = false,
 }: MetadataWithContextProps) => (
   <ServiceContextProvider service={service} pageLang={lang}>
     <RequestContextProvider
@@ -90,6 +92,7 @@ const MetadataWithContext = ({
       pathname={pathname}
       service={service}
       statusCode={200}
+      isUK={isUK}
     >
       <MetadataContainer
         title={title}
@@ -208,6 +211,53 @@ it('should render the alternate links for article page', async () => {
   });
 });
 
+it(`should render the canonical link's top level domain as .co.uk for UK article pages`, async () => {
+  render(
+    <MetadataWithContext
+      service="sport"
+      bbcOrigin={dotCoDotUKOrigin}
+      platform="canonical"
+      id="c0000000001o"
+      pageType={ARTICLE_PAGE}
+      pathname="/sport/cricket/articles/c0000000001o"
+      isUK
+      {...newsArticleMetadataProps}
+    />,
+  );
+
+  await waitFor(() => {
+    const actual = document
+      .querySelector('head > link[rel="canonical"]')
+      ?.getAttribute('href');
+
+    expect(actual).toEqual(
+      'https://www.bbc.co.uk/sport/cricket/articles/c0000000001o',
+    );
+  });
+});
+
+it(`should render the canonical link's top level domain as .com for WS article pages`, async () => {
+  render(
+    <MetadataWithContext
+      service="mundo"
+      bbcOrigin={dotCoDotUKOrigin}
+      platform="canonical"
+      id="c0000000001o"
+      pageType={ARTICLE_PAGE}
+      pathname="/mundo/c0000000001o"
+      {...newsArticleMetadataProps}
+    />,
+  );
+
+  await waitFor(() => {
+    const actual = document
+      .querySelector('head > link[rel="canonical"]')
+      ?.getAttribute('href');
+
+    expect(actual).toEqual('https://www.bbc.com/mundo/c0000000001o');
+  });
+});
+
 it.each`
   service    | pathName
   ${'news'}  | ${'/news/56427710'}

src/app/components/Metadata/index.tsx

@@ -61,6 +61,7 @@ const MetadataContainer = ({
     canonicalNonUkLink,
     ampNonUkLink,
     pathname,
+    isUK,
   } = useContext(RequestContext);
 
   const {
@@ -102,6 +103,19 @@ const MetadataContainer = ({
     },
   ];
 
+  const pathsForUkLink = [
+    '/sport/formula1',
+    '/sport/cricket/articles',
+    '/sport/rugby_union/articles',
+    '/sport/rugby_league/articles',
+  ];
+
+  const isSport = pathsForUkLink.some(
+    path => pathname && pathname.startsWith(path),
+  );
+
+  const canonicalToUse = isUK && isSport ? canonicalUkLink : canonicalNonUkLink;
+
   const htmlAttributes = {
     dir,
     lang,
@@ -134,7 +148,7 @@ const MetadataContainer = ({
         content="width=device-width, initial-scale=1, minimum-scale=1"
       />
       <title>{pageTitle}</title>
-      <link rel="canonical" href={canonicalNonUkLink} />
+      <link rel="canonical" href={canonicalToUse} />
       {isEnglishService && alternateLinksEnglishSites.map(renderAlternateLinks)}
       {isoLang &&
         !isEnglishService &&

src/app/lib/config/services/hindi.ts

@@ -434,6 +434,10 @@ export const service: DefaultServiceConfig = {
         title: 'भारत',
         url: '/hindi/topics/ckdxnkz7607t',
       },
+      {
+        title: 'अमेरिकी चुनाव 2024',
+        url: '/hindi/topics/cp9r94x30m5t',
+      },
       {
         title: 'विदेश',
         url: '/hindi/topics/c9wpm0en87xt',

src/app/lib/config/services/korean.ts

@@ -324,6 +324,10 @@ export const service: DefaultServiceConfig = {
         title: '뉴스',
         url: '/korean',
       },
+      {
+        title: '2024 미국 대선',
+        url: '/korean/topics/cxdyjwpx5v0t',
+      },
       {
         title: '비디오',
         url: '/korean/topics/cnwng7v0e54t',

src/app/lib/config/services/marathi.ts

@@ -341,6 +341,10 @@ export const service: DefaultServiceConfig = {
         title: 'महाराष्ट्र',
         url: '/marathi/topics/c5qvpxvv7y3t',
       },
+      {
+        title: 'विधानसभा निवडणूक',
+        url: '/marathi/topics/c625x8zjyj7t',
+      },
       {
         title: 'भारत',
         url: '/marathi/topics/cxnyk3y49x6t',

src/app/lib/config/services/somali.ts

@@ -330,6 +330,10 @@ export const service: DefaultServiceConfig = {
         title: 'War',
         url: '/somali',
       },
+      {
+        title: 'Doorashada Mareykanka 2024',
+        url: '/somali/topics/cv2g4v31x97t',
+      },
       {
         title: 'Ganacsi',
         url: '/somali/topics/c2dwqd32v4yt',

src/app/lib/config/services/urdu.ts

@@ -409,6 +409,10 @@ export const service: DefaultServiceConfig = {
         title: 'صفحۂ اول',
         url: '/urdu',
       },
+      {
+        title: 'امریکی صدارتی انتخاب 2024',
+        url: '/urdu/topics/c0w3wed04e3t',
+      },
       {
         title: 'پاکستان',
         url: '/urdu/topics/cjgn7n9zzq7t',