WS-200: Migrate LiveRadio pages to NextJS - Simorgh changes

package.json

@@ -32,13 +32,10 @@
     "build:storybook": "yarn build && storybook build -c .storybook -o storybook_dist",
     "build:test": "cp envConfig/test.env .env && NODE_ENV=production webpack",
     "build:test:debug": "rm -rf build && awk '{sub(/LOG_DIR=.+/,\"LOG_DIR='log'\")}1' envConfig/test.env > .env && NODE_ENV=production webpack",
-    "cypress:pages": "cypress run --browser chrome --spec ./cypress/e2e/pages",
     "cypress:special-features": "cypress run --browser chrome --spec ./cypress/e2e/specialFeatures",
-    "cypress": "run-p --print-name --aggregate-output --continue-on-error cypress:pages cypress:special-features",
+    "cypress": "run-p --print-name --aggregate-output --continue-on-error cypress:special-features",
     "cypress:install": "cypress install",
-    "cypress:onefile": "CYPRESS_APP_ENV=live CYPRESS_SMOKE=false cypress run --spec './cypress/e2e/pages/storyPage/*'",
     "cypress:oneservice": "CYPRESS_APP_ENV=live CYPRESS_SMOKE=false CYPRESS_ONLY_SERVICE=mundo cypress run",
-    "cypress:oneserviceandonefile": "CYPRESS_APP_ENV=live CYPRESS_SMOKE=false CYPRESS_ONLY_SERVICE=mundo cypress run  --spec './cypress/e2e/pages/storyPage/*'",
     "cypress:interactive": "cypress open",
     "setupDevEnv": "cp envConfig/local.env .env && rm -rf envConfig/secret.env && ./scripts/checkSecretEnvVariables.sh",
     "dependencyFreshness": "node ./scripts/dependencyFreshness",

src/app/pages/LiveRadioPage/LiveRadioPage.tsx

@@ -9,9 +9,9 @@ import ATIAnalytics from '../../components/ATIAnalytics';
 import ChartbeatAnalytics from '../../components/ChartbeatAnalytics';
 import MetadataContainer from '../../components/Metadata';
 import LinkedData from '../../components/LinkedData';
-import { LiveRadioPageData } from './types';
+import { LiveRadioPageProps } from './types';
 
-const LiveRadioPage = ({ pageData }: { pageData: LiveRadioPageData }) => {
+const LiveRadioPage = ({ pageData }: { pageData: LiveRadioPageProps }) => {
   const {
     language,
     name,

src/app/pages/LiveRadioPage/index.test.tsx

@@ -9,10 +9,10 @@ import { data as kyrgyzPageData } from '#data/kyrgyz/bbc_kyrgyz_radio/liveradio.
 import { render } from '../../components/react-testing-library-with-providers';
 import { ServiceContextProvider } from '../../contexts/ServiceContext';
 import LiveRadioPage from './LiveRadioPage';
-import { LiveRadioPageData } from './types';
+import { LiveRadioPageProps } from './types';
 
 type Props = {
-  pageData: LiveRadioPageData;
+  pageData: LiveRadioPageProps;
   service: Services;
   lang: string;
 };
@@ -44,7 +44,7 @@ describe('Radio Page Main', () => {
   it('should match snapshot for Canonical', () => {
     const { container } = render(
       <Page
-        pageData={afriquePageData.data as unknown as LiveRadioPageData}
+        pageData={afriquePageData.data as unknown as LiveRadioPageProps}
         service="afrique"
         lang="fr"
       />,
@@ -57,7 +57,7 @@ describe('Radio Page Main', () => {
   it('should show the title for the Live Radio page', () => {
     const { getByText } = render(
       <Page
-        pageData={afriquePageData.data as unknown as LiveRadioPageData}
+        pageData={afriquePageData.data as unknown as LiveRadioPageProps}
         service="afrique"
         lang="fr"
       />,
@@ -70,7 +70,7 @@ describe('Radio Page Main', () => {
   it('should show the summary for the Live Radio page', () => {
     const { getByText } = render(
       <Page
-        pageData={afriquePageData.data as unknown as LiveRadioPageData}
+        pageData={afriquePageData.data as unknown as LiveRadioPageProps}
         service="afrique"
         lang="fr"
       />,
@@ -115,7 +115,7 @@ describe('Radio Page Main', () => {
           {
             ...afriquePageData.data,
             mediaBlock: mockMediaBlock,
-          } as unknown as LiveRadioPageData
+          } as unknown as LiveRadioPageProps
         }
         service="afrique"
         lang="fr"
@@ -132,7 +132,7 @@ describe('Radio Page Main', () => {
   it('should show the radio schedule for the Live Radio page on canonical', () => {
     const { getByText } = render(
       <Page
-        pageData={afriquePageData.data as unknown as LiveRadioPageData}
+        pageData={afriquePageData.data as unknown as LiveRadioPageProps}
         service="afrique"
         lang="fr"
       />,
@@ -150,7 +150,7 @@ describe('Radio Page Main', () => {
   it('should not show the radio schedule for services without a schedule', async () => {
     const { container } = render(
       <Page
-        pageData={kyrgyzPageData as unknown as LiveRadioPageData}
+        pageData={kyrgyzPageData as unknown as LiveRadioPageProps}
         service="kyrgyz"
         lang="ky"
       />,

src/app/pages/LiveRadioPage/types.ts

@@ -2,7 +2,7 @@ import { ATIData } from '#app/components/ATIAnalytics/types';
 import { ChartbeatProps } from '#app/components/ChartbeatAnalytics/types';
 import { LiveRadioBlock } from '#app/models/types/media';
 
-export type LiveRadioPageData = {
+export type LiveRadioPageProps = {
   language: string;
   name: string;
   summary: string;

src/app/routes/utils/constructPageFetchUrl/index.ts

@@ -299,9 +299,14 @@ const constructPageFetchUrl = ({
         );
         break;
       }
-      case LIVE_RADIO_PAGE:
-        fetchUrl = Url(`${pathname}`);
+      case LIVE_RADIO_PAGE: {
+        if (process.env?.NEXTJS) {
+          fetchUrl = Url(`${host}${port}/api/local${pathname}`);
+        } else {
+          fetchUrl = Url(`${pathname}`);
+        }
         break;
+      }
       case LIVE_TV_PAGE: {
         fetchUrl = Url(`${host}${port}/api/local/${service}/watch/${id}/live`);
         break;

src/integration/utils/runTests/index.js

@@ -75,6 +75,7 @@ const runExpressTests = () =>
       '--colors',
       '--detectOpenHandles',
       '--forceExit',
+      '--passWithNoTests', // Allows the test suite to pass now all page types are migrated to NextJS
       ...getJestArgs(),
     ],
     {

cypress/e2e/pages/liveRadio/index.cy.js → ws-nextjs-app/cypress/e2e/liveRadioPage/index.cy.ts

@@ -1,12 +1,14 @@
-import runTestsForPage from '#nextjs/cypress/support/helpers/runTestsForPage';
+import runTestsForPage, {
+  TestDataType,
+} from '../../support/helpers/runTestsForPage';
 import e2eTests from './tests';
 import testsForAllPages from '../testsForAllPages';
 import testsForAllCanonicalPages from '../testsForAllCanonicalPages';
-import { assertPageView } from '../../specialFeatures/atiAnalytics/assertions';
+import { assertPageView } from '../specialFeatures/atiAnalytics/assertions';
 import {
   assertRadioScheduleComponentClick,
   assertRadioScheduleComponentView,
-} from '../../specialFeatures/atiAnalytics/assertions/radioSchedule';
+} from '../specialFeatures/atiAnalytics/assertions/radioSchedule';
 
 const pageType = 'liveRadio';
 
@@ -103,7 +105,7 @@ const testSuites = [
     runforEnv: ['local', 'test', 'live'],
     tests,
   },
-];
+] as unknown as TestDataType[];
 
 const atiAnalyticsTestSuites = [
   {
@@ -120,7 +122,7 @@ const atiAnalyticsTestSuites = [
       assertRadioScheduleComponentClick,
     ],
   },
-];
+] as unknown as TestDataType[];
 
 runTestsForPage({
   pageType,