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

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;

ws-nextjs-app/pages/[service]/[[...]].page.tsx

@@ -14,6 +14,7 @@ import {
   HOME_PAGE,
   AUDIO_PAGE,
   TV_PAGE,
+  LIVE_RADIO_PAGE,
 } from '#app/routes/utils/pageTypes';
 import { PageTypes } from '#app/models/types/global';
 import PageDataParams from '#app/models/types/pageDataParams';
@@ -22,6 +23,7 @@ import withOptimizelyProvider from '#app/legacy/containers/PageHandlers/withOpti
 import { HomePageProps } from '#app/pages/HomePage/HomePage';
 import { getEnvConfig } from '#app/lib/utilities/getEnvConfig';
 import derivePageType from '#nextjs/utilities/derivePageType';
+import { LiveRadioPageProps } from '#app/pages/LiveRadioPage/types';
 
 // AV Embeds
 import withMediaError from '#app/lib/utilities/episodeAvailability/withMediaError';
@@ -39,6 +41,8 @@ import handleOnDemandAudioRoute from './onDemandAudio/handleOnDemandAudioRoute';
 import { OnDemandAudioProps } from './onDemandAudio/types';
 // On Demand TV
 import handleOnDemandTvRoute from './onDemandTv/handleOnDemandTvRoute';
+// Live Radio
+import handleLiveRadioRoute from './liveRadio/handleLiveRadioRoute';
 
 // Dynamic imports of page layouts
 const AvEmbedsPageLayout = dynamic(
@@ -56,6 +60,10 @@ const OnDemandTvPage = dynamic(
   () => import('#app/pages/OnDemandTvPage/OnDemandTvPage'),
 );
 
+const LiveRadioPage = dynamic(
+  () => import('#app/pages/LiveRadioPage/LiveRadioPage'),
+);
+
 const getPageType = ({
   resolvedUrl,
   reqHeaders,
@@ -87,6 +95,7 @@ const ROUTE_HANDLERS = {
   [HOME_PAGE]: handleHomepageRoute,
   [AUDIO_PAGE]: handleOnDemandAudioRoute,
   [TV_PAGE]: handleOnDemandTvRoute,
+  [LIVE_RADIO_PAGE]: handleLiveRadioRoute,
 };
 
 export const getServerSideProps: GetServerSideProps = async context => {
@@ -129,7 +138,8 @@ type PageProps = {
   ArticlePageProps &
   HomePageProps &
   OnDemandAudioProps &
-  OnDemandTVProps;
+  OnDemandTVProps &
+  LiveRadioPageProps;
 
 export default function PageTypeToRender({ pageType, ...props }: PageProps) {
   switch (pageType) {
@@ -149,6 +159,8 @@ export default function PageTypeToRender({ pageType, ...props }: PageProps) {
       return withMediaError(OnDemandAudioPage)({ ...props });
     case TV_PAGE:
       return withMediaError(OnDemandTvPage)({ ...props });
+    case LIVE_RADIO_PAGE:
+      return withMediaError(LiveRadioPage)({ ...props });
     // Home Page
     case HOME_PAGE:
       return withOptimizelyProvider(HomePage)({ ...props });

ws-nextjs-app/pages/[service]/liveRadio/handleLiveRadioRoute.test.ts

@@ -0,0 +1,194 @@
+import { GetServerSidePropsContext } from 'next';
+import liveRadioJson from '#data/korean/bbc_korean_radio/liveradio.json';
+import { LIVE_RADIO_PAGE } from '#app/routes/utils/pageTypes';
+import { Toggles } from '#app/models/types/global';
+import * as getTogglesModule from '#app/lib/utilities/getToggles/withCache';
+import * as isTest from '#app/lib/utilities/isTest';
+import * as getPageDataModule from '../../../utilities/pageRequests/getPageData';
+import handleLiveRadioRoute from './handleLiveRadioRoute';
+
+jest.mock('../../../utilities/pageRequests/getPageData');
+jest.mock('#app/lib/utilities/getToggles/withCache');
+
+jest.mock('#app/lib/utilities/isTest', () => {
+  const originalModule = jest.requireActual('#app/lib/utilities/isTest');
+  return {
+    __esModule: true,
+    ...originalModule,
+  };
+});
+
+describe('handleLiveRadioRoute', () => {
+  const mockSetHeader = jest.fn();
+  const mockGetServerSidePropsContext = {
+    req: {
+      headers: {},
+    } as unknown as GetServerSidePropsContext['req'],
+    res: {
+      setHeader: mockSetHeader,
+      removeHeader: jest.fn(),
+    } as unknown as GetServerSidePropsContext['res'],
+    resolvedUrl: '/korean/bbc_korean_radio/liveradio',
+    query: { service: 'korean' },
+  } satisfies GetServerSidePropsContext;
+
+  let getPageDataSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    jest.restoreAllMocks();
+    jest.clearAllMocks();
+    getPageDataSpy = jest
+      .spyOn(getPageDataModule, 'default')
+      .mockResolvedValue({
+        data: {
+          pageData: liveRadioJson.data,
+          status: 200,
+        },
+      });
+
+    jest.spyOn(getTogglesModule, 'default').mockResolvedValue({
+      liveRadioSchedule: { enabled: true },
+    } as Toggles);
+  });
+
+  it('returns expected props if data fetch succeeds', async () => {
+    const { props } = await handleLiveRadioRoute(mockGetServerSidePropsContext);
+    expect(props.status).toEqual(200);
+    expect(props.pageType).toEqual('liveRadio');
+    expect(props.pageData).toEqual(liveRadioJson.data);
+  });
+
+  it('should return essential data for a page to render', async () => {
+    const {
+      props: { pageData },
+    } = await handleLiveRadioRoute(mockGetServerSidePropsContext);
+
+    expect(pageData.name).toEqual('BBC 코리아 라디오');
+    expect(pageData.language).toEqual('ko');
+    expect(pageData.metadata.type).toEqual('Live Radio');
+    expect(pageData.summary).toEqual(
+      '세계와 한반도 뉴스를 공정하고 객관적으로 전달해 드립니다',
+    );
+    expect(pageData.heading).toEqual('BBC 코리아 라디오');
+    expect(pageData.bodySummary).toEqual(
+      '세계와 한반도 뉴스를 공정하고 객관적으로 전달해 드립니다',
+    );
+    expect(pageData.masterBrand).toEqual('bbc_korean_radio');
+  });
+
+  it('should call getPageData with the correct arguments', async () => {
+    await handleLiveRadioRoute(mockGetServerSidePropsContext);
+
+    expect(getPageDataSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: '/korean/bbc_korean_radio/liveradio',
+        service: 'korean',
+        pageType: LIVE_RADIO_PAGE,
+        resolvedUrl: '/korean/bbc_korean_radio/liveradio',
+      }),
+    );
+  });
+
+  it('should pass disableRadioSchedule as true when toggle is disabled', async () => {
+    jest.spyOn(getTogglesModule, 'default').mockResolvedValue({
+      liveRadioSchedule: { enabled: false },
+    } as Toggles);
+
+    await handleLiveRadioRoute(mockGetServerSidePropsContext);
+
+    expect(getPageDataSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        disableRadioSchedule: true,
+      }),
+    );
+  });
+
+  it('should pass disableRadioSchedule as false when toggle is enabled', async () => {
+    await handleLiveRadioRoute(mockGetServerSidePropsContext);
+
+    expect(getPageDataSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        disableRadioSchedule: false,
+      }),
+    );
+  });
+
+  it('returns error props if data fetch returns 500', async () => {
+    jest.spyOn(getPageDataModule, 'default').mockResolvedValue({
+      data: {
+        pageData: liveRadioJson.data,
+        status: 500,
+      },
+    });
+
+    const result = await handleLiveRadioRoute(mockGetServerSidePropsContext);
+
+    expect(result).toEqual({
+      props: expect.objectContaining({
+        status: 500,
+        pageType: 'liveRadio',
+        pathname: '/korean/bbc_korean_radio/liveradio',
+      }),
+    });
+  });
+
+  it('returns error props if data fetch returns 404', async () => {
+    jest.spyOn(getPageDataModule, 'default').mockResolvedValue({
+      data: {
+        pageData: liveRadioJson.data,
+        status: 404,
+      },
+    });
+
+    const result = await handleLiveRadioRoute(mockGetServerSidePropsContext);
+
+    expect(result).toEqual({
+      props: expect.objectContaining({
+        status: 404,
+        pageType: 'liveRadio',
+        pathname: '/korean/bbc_korean_radio/liveradio',
+      }),
+    });
+  });
+
+  it('throws if pageData is missing', async () => {
+    jest.spyOn(getPageDataModule, 'default').mockResolvedValue({
+      data: { pageData: null, status: 200 },
+    });
+
+    await expect(
+      handleLiveRadioRoute(mockGetServerSidePropsContext),
+    ).rejects.toThrow('LiveRadioPage data is malformed');
+  });
+
+  it('sets correct cache-control header', async () => {
+    await handleLiveRadioRoute(mockGetServerSidePropsContext);
+
+    expect(mockSetHeader).toHaveBeenCalledWith(
+      'Cache-Control',
+      expect.stringContaining('max-age=30'),
+    );
+  });
+
+  it('returns not found props when service is invalid', async () => {
+    const result = await handleLiveRadioRoute({
+      ...mockGetServerSidePropsContext,
+      resolvedUrl: '/fakeservice',
+    });
+
+    expect(result).toEqual({
+      props: expect.objectContaining({ status: 404 }),
+    });
+  });
+
+  it('should render live assets on test environments', async () => {
+    jest.spyOn(isTest, 'default').mockReturnValueOnce(true);
+    const pageDataSpy = jest.spyOn(getPageDataModule, 'default');
+
+    await handleLiveRadioRoute(mockGetServerSidePropsContext);
+
+    expect(pageDataSpy).toHaveBeenCalledWith(
+      expect.objectContaining({ rendererEnv: 'live' }),
+    );
+  });
+});