Merge branch 'latest' into WS-2836-integrate-tool-tip-component-for-save-for-later

Author: elvinasv

package.json

@@ -91,7 +91,6 @@
     "sharp": "0.35.3",
     "temporal-polyfill": "0.3.0",
     "undici": "8.9.0",
-    "uuid": "13.0.1",
     "winston": "patch:winston@3.8.2#./patches/winston-file-descriptor.patch"
   },
   "devDependencies": {

…tDataPolling/fixture/fixtureSportData.js …der/head-to-head-v2/fixture/sportData.jssrc/app/hooks/useSportDataPolling/fixture/fixtureSportData.js renamed to src/app/components-webcore/SportDataHeader/head-to-head-v2/fixture/sportData.js src/app/hooks/useSportDataPolling/fixture/fixtureSportData.js renamed to src/app/components-webcore/SportDataHeader/head-to-head-v2/fixture/sportData.js

@@ -1,6 +1,6 @@
 import { use } from 'react';
 import { ServiceContext } from '#app/contexts/ServiceContext';
-import useSportDataPolling from '#app/hooks/useSportDataPolling';
+import usePolling from '#app/hooks/usePolling';
 import useToggle from '#app/hooks/useToggle';
 import HeadToHeadHeader from './components/head-to-head-header';
 import { HeadToHeadBanner } from './components/head-to-head-banner';
@@ -26,10 +26,16 @@ export const HeadToHeadV2 = ({
   const { enabled: sportHeaderPollEnabled } = useToggle('sportDataPolling');
   const { translations, service } = use(ServiceContext);
 
-  const { currentSportData } = useSportDataPolling(
-    initialSportData,
-    Boolean(sportHeaderPollEnabled) && isSportDataLive,
-  );
+  const currentSportData = usePolling<
+    { sportDataEvent: HeadToHeadV2Data },
+    HeadToHeadV2Data
+  >({
+    initialData: initialSportData,
+    enabled: Boolean(sportHeaderPollEnabled) && isSportDataLive,
+    endpoint: 'sport',
+    params: { sportDataEventUrn: initialSportData.urn },
+    returnedData: response => response.sportDataEvent,
+  });
 
   const hasActions =
     (currentSportData?.home?.actions?.length ?? 0) > 0 ||

…olling/fixture/fixtureSportDataUpdate.js …ad-to-head-v2/fixture/sportDataUpdate.jssrc/app/hooks/useSportDataPolling/fixture/fixtureSportDataUpdate.js renamed to src/app/components-webcore/SportDataHeader/head-to-head-v2/fixture/sportDataUpdate.js src/app/hooks/useSportDataPolling/fixture/fixtureSportDataUpdate.js renamed to src/app/components-webcore/SportDataHeader/head-to-head-v2/fixture/sportDataUpdate.js

@@ -1,7 +1,11 @@
+import { act, renderHook } from '@testing-library/react';
 import {
   render,
   screen,
 } from '#app/components/react-testing-library-with-providers';
+import * as fetchPolledData from '#app/lib/utilities/fetchPolledData';
+import sportData from '../fixture/sportData';
+import sportDataUpdate from '../fixture/sportDataUpdate';
 import cancelledMockData from '../static-data/event/transformed/cancelled.json';
 import postponedMockData from '../static-data/event/transformed/postponed.json';
 import suspendedMockData from '../static-data/event/transformed/suspended.json';
@@ -28,11 +32,9 @@ import {
 import HeadToHead from '../head-to-head-v2';
 import type { HeadToHeadV2Data } from '../types';
 
-jest.mock('#app/hooks/useSportDataPolling', () => ({
+jest.mock('#app/hooks/usePolling', () => ({
   __esModule: true,
-  default: jest.fn(initialSportData => ({
-    currentSportData: initialSportData,
-  })),
+  default: jest.fn(({ initialData }) => initialData),
 }));
 
 jest.mock('../helpers/localise-datetime', () => ({
@@ -822,3 +824,116 @@ describe('Head to Head Component', () => {
     },
   );
 });
+
+describe('head-to-head-v2 sport data polling', () => {
+  const { default: usePolling, POLLING_INTERVAL } = jest.requireActual<
+    typeof import('#app/hooks/usePolling')
+  >('#app/hooks/usePolling');
+
+  const initialSportData = sportData.data
+    .sportDataEvent as unknown as HeadToHeadV2Data;
+  const updatedSportData = sportDataUpdate.data
+    .sportDataEvent as unknown as HeadToHeadV2Data;
+
+  const advancePolling = async () => {
+    await act(async () => {
+      jest.advanceTimersByTime(POLLING_INTERVAL);
+      await Promise.resolve();
+    });
+  };
+
+  const renderSportDataPolling = (enabled = true) =>
+    renderHook(() =>
+      usePolling<{ sportDataEvent: HeadToHeadV2Data }, HeadToHeadV2Data>({
+        initialData: initialSportData,
+        enabled,
+        endpoint: 'sport',
+        params: { sportDataEventUrn: initialSportData.urn },
+        returnedData: response => response.sportDataEvent,
+      }),
+    );
+
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should return the initial sport data on initialisation', () => {
+    jest.spyOn(fetchPolledData, 'default').mockResolvedValue(null);
+
+    const { result } = renderSportDataPolling();
+
+    expect(result.current).toStrictEqual(initialSportData);
+  });
+
+  it('should poll the sport endpoint with the encoded event urn when enabled', async () => {
+    const fetchSpy = jest
+      .spyOn(fetchPolledData, 'default')
+      .mockResolvedValue(null);
+
+    renderSportDataPolling(true);
+
+    await advancePolling();
+
+    expect(fetchSpy).toHaveBeenCalledTimes(1);
+    expect(fetchSpy).toHaveBeenCalledWith('sport', {
+      params: { sportDataEventUrn: initialSportData.urn },
+    });
+  });
+
+  it('should not fetch data when polling is disabled', async () => {
+    const fetchSpy = jest
+      .spyOn(fetchPolledData, 'default')
+      .mockResolvedValue(null);
+
+    renderSportDataPolling(false);
+
+    await advancePolling();
+
+    expect(fetchSpy).not.toHaveBeenCalled();
+  });
+
+  it('should update sport data when new data is returned after polling', async () => {
+    jest.spyOn(fetchPolledData, 'default').mockResolvedValue({
+      data: { sportDataEvent: updatedSportData },
+      status: 200,
+    });
+
+    const { result } = renderSportDataPolling();
+
+    await advancePolling();
+
+    expect(result.current).toStrictEqual(updatedSportData);
+  });
+
+  it('should keep the current sport data when no data is returned after polling', async () => {
+    jest.spyOn(fetchPolledData, 'default').mockResolvedValue(null);
+
+    const { result } = renderSportDataPolling();
+
+    await advancePolling();
+
+    expect(result.current).toStrictEqual(initialSportData);
+  });
+
+  it('should clear the polling interval when unmounted', async () => {
+    const fetchSpy = jest
+      .spyOn(fetchPolledData, 'default')
+      .mockResolvedValue(null);
+
+    const { unmount } = renderSportDataPolling();
+
+    unmount();
+
+    await advancePolling();
+
+    expect(fetchSpy).not.toHaveBeenCalled();
+  });
+});

src/app/components-webcore/SportDataHeader/head-to-head-v2/head-to-head-v2.tsx

@@ -35,6 +35,23 @@ const styles = {
         },
       },
     }),
+  inSituMedia: ({ spacings }: Theme) =>
+    css({
+      marginBottom: `${spacings.FULL}rem`,
+      '.media-container': {
+        margin: 0,
+      },
+      // keep hidden player controls from widening rtl pages on mobile
+      '.media-player': {
+        overflow: 'hidden',
+      },
+    }),
+  headlineLink: () =>
+    css({
+      '&::before': {
+        display: 'none',
+      },
+    }),
   list: ({ mq, spacings, isLite }: Theme) =>
     css({
       padding: 0,