Merge branch 'latest' into revert-11261-revert-11122-remove-nodefetch

cypress/e2e/pages/liveRadio/tests.js

@@ -1,25 +1,8 @@
 /* eslint-disable import/prefer-default-export */
-import getDataUrl from '../../../support/helpers/getDataUrl';
 
 // For testing features that may differ across services but share a common logic e.g. translated strings.
 export const testsThatFollowSmokeTestConfig = ({ service, pageType }) =>
   describe(`Tests for ${service} ${pageType}`, () => {
-    describe('Live Radio body', () => {
-      it('should render a H1, which contains/displays a styled headline', () => {
-        cy.request(getDataUrl(Cypress.env('currentPath'))).then(({ body }) => {
-          const [{ text: headline }] = body.content.blocks;
-          cy.get('h1').should('contain', headline);
-        });
-      });
-
-      it('should render a paragraph, which contains/displays a styled summary', () => {
-        cy.request(getDataUrl(Cypress.env('currentPath'))).then(({ body }) => {
-          const { text } = body.content.blocks[1];
-          cy.get('[role="main"] p').should('contain', text);
-        });
-      });
-    });
-
     describe('LinkedData', () => {
       // will be addressed by this https://github.com/bbc/simorgh/issues/3117
       it.skip('should include mainEntityOfPage in the LinkedData', () => {

cypress/e2e/pages/liveRadio/testsForAMPOnly.js

@@ -1,13 +1,8 @@
 /* eslint-disable import/prefer-default-export */
-import appConfig from '../../../../src/server/utilities/serviceConfigs';
-import getEmbedUrl from '../../../support/helpers/getEmbedUrl';
-import getDataUrl from '../../../support/helpers/getDataUrl';
-
 // For testing features that may differ across services but share a common logic e.g. translated strings.
 export const testsThatFollowSmokeTestConfigForAMPOnly = ({
   service,
   pageType,
-  variant,
 }) =>
   describe(`testsThatFollowSmokeTestConfigForAMPOnly for ${service} ${pageType}`, () => {
     describe(
@@ -16,25 +11,12 @@ export const testsThatFollowSmokeTestConfigForAMPOnly = ({
         retries: 3,
       },
       () => {
-        const { lang } = appConfig[service][variant];
         let embedUrl;
 
         beforeEach(() => {
-          cy.request(getDataUrl(Cypress.env('currentPath'))).then(
-            ({ body }) => {
-              embedUrl = getEmbedUrl(body, lang, true);
-            },
-          );
-        });
-
-        it('should be rendered', () => {
-          cy.get(`amp-iframe[src*="${embedUrl}"]`).should('be.visible');
-        });
-
-        it('should render an image placeholder', () => {
-          cy.get(`div[data-e2e="image-placeholder"][placeholder]`).should(
-            'exist',
-          );
+          cy.get('[data-e2e=media-player] iframe').then($iframe => {
+            embedUrl = $iframe.attr('src');
+          });
         });
 
         it('embed URL should be reachable', () => {

cypress/e2e/pages/liveRadio/testsForCanonicalOnly.js

@@ -4,10 +4,6 @@ import config from '../../../support/config/services';
 import appConfig from '../../../../src/server/utilities/serviceConfigs';
 import envConfig from '../../../support/config/envs';
 import getEmbedUrl from '../../../support/helpers/getEmbedUrl';
-import {
-  isScheduleDataComplete,
-  getIsProgramValid,
-} from '../../../../src/app/legacy/containers/RadioSchedule/utilities/evaluateScheduleData';
 import getDataUrl from '../../../support/helpers/getDataUrl';
 
 // For testing features that may differ across services but share a common logic e.g. translated strings.
@@ -38,10 +34,6 @@ export const testsThatFollowSmokeTestConfigForCanonicalOnly = ({
           );
         });
 
-        it('should be rendered', () => {
-          cy.get(`iframe[src*="${embedUrl}"]`).should('be.visible');
-        });
-
         it('embed URL should be reachable', () => {
           cy.testResponseCodeAndTypeRetry({
             path: embedUrl,
@@ -75,24 +67,11 @@ export const testsThatFollowSmokeTestConfigForCanonicalOnly = ({
           );
 
           if (scheduleIsEnabled) {
-            const schedulePath = Cypress.env('currentPath')
-              .replace('liveradio', 'schedule.json')
-              // the schedule call for afaanoromoo is made to bbc_oromo_radio
-              .replace('bbc_afaanoromoo_radio', 'bbc_oromo_radio');
-
-            cy.request(schedulePath).then(({ body: scheduleJson }) => {
-              const { schedules } = scheduleJson;
-              const isProgramValid = getIsProgramValid(() => {});
-              const validSchedules = schedules.filter(isProgramValid);
-
-              const isRadioScheduleDataComplete = isScheduleDataComplete({
-                schedules: validSchedules,
-              });
+            cy.getPageDataFromWindow().then(data => {
+              const { pageData } = data;
+              const schedules = pageData.radioScheduleData;
 
-              cy.log(
-                `Radio Schedule is displayed? ${isRadioScheduleDataComplete}`,
-              );
-              if (scheduleIsEnabled && isRadioScheduleDataComplete) {
+              if (schedules) {
                 cy.log('Schedule has enough data');
                 cy.get('[data-e2e=radio-schedule]').should('exist');
               } else {

docs/User-Experience/colours.tsx

@@ -62,7 +62,7 @@ export const CROSS_PLATFORM = [
   { colorName: 'ALERT_CORE', colorCode: '#FFB32B' },
   { colorName: 'ALERT_LIGHT', colorCode: '#FFCE2B' },
   { colorName: 'ALERT_DARK', colorCode: '#C8871E' },
-  { colorName: 'ERROR_CORE', colorCode: '#F51A5A' },
+  { colorName: 'ERROR_CORE', colorCode: '#E51854' },
   { colorName: 'ERROR_LIGHT', colorCode: '#FF4060' },
   { colorName: 'ERROR_DARK', colorCode: '#E4134F' },
 ];

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

@@ -1,9 +1,5 @@
 import React from 'react';
-import {
-  render,
-  act,
-} from '#app/components/react-testing-library-with-providers';
-import * as isOperaProxy from '#app/lib/utilities/isOperaProxy';
+import { render, act } from '@testing-library/react';
 import * as beacon from '../../../lib/analyticsUtils/sendBeacon';
 import CanonicalATIAnalytics from '.';
 
@@ -15,13 +11,14 @@ describe('Canonical ATI Analytics', () => {
   const atiBaseUrl = 'https://foobar.com?';
   const mockPageviewParams = 'key=value&key2=value2&x8=[simorgh]';
   const mockSendBeacon = jest.fn().mockReturnValue('beacon-return-value');
-  process.env.SIMORGH_ATI_BASE_URL = atiBaseUrl;
-  // @ts-expect-error - we need to mock these functions to ensure tests are deterministic
-  beacon.default = mockSendBeacon;
 
   it('calls atiBaseURL and sendBeacon with required params', () => {
     const expectedUrl = `${atiBaseUrl}${mockPageviewParams}`;
 
+    process.env.SIMORGH_ATI_BASE_URL = atiBaseUrl;
+    // @ts-expect-error - we need to mock these functions to ensure tests are deterministic
+    beacon.default = mockSendBeacon;
+
     act(() => {
       render(<CanonicalATIAnalytics pageviewParams={mockPageviewParams} />);
     });
@@ -30,16 +27,6 @@ describe('Canonical ATI Analytics', () => {
     expect(mockSendBeacon).toHaveBeenCalledWith(expectedUrl);
   });
 
-  it('should not send beacon when browser is Opera Mini', () => {
-    jest.spyOn(isOperaProxy, 'default').mockImplementationOnce(() => true);
-
-    act(() => {
-      render(<CanonicalATIAnalytics pageviewParams={mockPageviewParams} />);
-    });
-
-    expect(mockSendBeacon).not.toHaveBeenCalled();
-  });
-
   it('should render a noscript image for non-JS users', () => {
     const { container } = render(
       <CanonicalATIAnalytics pageviewParams={mockPageviewParams} />,

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

@@ -1,11 +1,8 @@
 import React, { useContext, useEffect, useState, Fragment } from 'react';
 import { getEnvConfig } from '#app/lib/utilities/getEnvConfig';
 import { RequestContext } from '#app/contexts/RequestContext';
-import isOperaProxy from '#app/lib/utilities/isOperaProxy';
-import { Helmet } from 'react-helmet';
 import sendBeacon from '../../../lib/analyticsUtils/sendBeacon';
 import { ATIAnalyticsProps } from '../types';
-import sendBeaconOperaMiniScript from './sendBeaconOperaMiniScript';
 
 const getNoJsATIPageViewUrl = (atiPageViewUrl: string) =>
   atiPageViewUrl.includes('x8=[simorgh]')
@@ -34,34 +31,18 @@ const renderNoScriptTrackingPixel = (
   );
 };
 
-const addOperaMiniExtremeScript = (atiPageViewUrlString: string) => {
-  const script = sendBeaconOperaMiniScript(atiPageViewUrlString);
-
-  return (
-    <Helmet>
-      <script type="text/javascript">{script}</script>
-    </Helmet>
-  );
-};
-
 const CanonicalATIAnalytics = ({ pageviewParams }: ATIAnalyticsProps) => {
   const { isLite } = useContext(RequestContext);
 
-  const atiPageViewUrlString =
-    getEnvConfig().SIMORGH_ATI_BASE_URL + pageviewParams;
-
-  const [atiPageViewUrl] = useState(atiPageViewUrlString);
+  const [atiPageViewUrl] = useState(
+    getEnvConfig().SIMORGH_ATI_BASE_URL + pageviewParams,
+  );
 
   useEffect(() => {
-    if (!isOperaProxy()) sendBeacon(atiPageViewUrl);
+    sendBeacon(atiPageViewUrl);
   }, [atiPageViewUrl]);
 
-  return (
-    <>
-      {addOperaMiniExtremeScript(atiPageViewUrlString)}
-      {renderNoScriptTrackingPixel(atiPageViewUrl, isLite)}
-    </>
-  );
+  return renderNoScriptTrackingPixel(atiPageViewUrl, isLite);
 };
 
 export default CanonicalATIAnalytics;

src/app/components/Heading/index.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 
-import React, { FC, HTMLAttributes } from 'react';
+import React, { FC, HTMLAttributes, ForwardedRef, forwardRef } from 'react';
 import { jsx } from '@emotion/react';
 
 import { GelFontSize, FontVariant } from '../../models/types/theming';
@@ -30,38 +30,44 @@ const sizes: Sizes = {
   h4: 'greatPrimer',
 };
 
-const Heading: FC<Props> = ({
-  children,
-  className,
-  fontVariant = 'sansBold',
-  level,
-  size,
-  ...htmlAttributes
-}: Props) => {
-  const element: Element = `h${level}`;
+const Heading: FC<Props> = forwardRef(
+  (
+    {
+      children,
+      className,
+      fontVariant = 'sansBold',
+      level,
+      size,
+      ...htmlAttributes
+    }: Props,
+    ref: ForwardedRef<HTMLElement>,
+  ) => {
+    const element: Element = `h${level}`;
 
-  return (
-    <Text
-      as={element}
-      fontVariant={fontVariant}
-      className={className}
-      size={size || sizes[element]}
-      css={{
-        /*
-         * margin: 0 is used to cancel the default spacing
-         * above and below the component.
-         * This is because we don't rely on one default spacing
-         * for all heading elements.
-         * Each use of this component will have to explicitly set
-         * the spacings with the `css` prop.
-         */
-        margin: 0,
-      }}
-      {...htmlAttributes}
-    >
-      {children}
-    </Text>
-  );
-};
+    return (
+      <Text
+        as={element}
+        fontVariant={fontVariant}
+        className={className}
+        size={size || sizes[element]}
+        css={{
+          /*
+           * margin: 0 is used to cancel the default spacing
+           * above and below the component.
+           * This is because we don't rely on one default spacing
+           * for all heading elements.
+           * Each use of this component will have to explicitly set
+           * the spacings with the `css` prop.
+           */
+          margin: 0,
+        }}
+        {...(ref && { ref })}
+        {...htmlAttributes}
+      >
+        {children}
+      </Text>
+    );
+  },
+);
 
 export default Heading;