@times-components/ts-components 1.85.3-alpha.3 → 1.86.0

package/src/components/opta/football/fixtures-ticker/OptaFootballFixturesTicker.stories.tsx

@@ -6,6 +6,7 @@ import { OptaFootballFixturesTicker } from './OptaFootballFixturesTicker';
 const competitons = [
   '1',
   '2',
+  '3',
   '5',
   '6',
   '8',

package/src/components/opta/football/fixtures-ticker/OptaFootballFixturesTicker.tsx

@@ -12,6 +12,7 @@ import {
 
 import { PlaceholderContainer } from '../shared-styles';
 import { WidgetContainer } from './styles';
+import { replaceFlags } from '../../utils/replaceFlags';
 
 export const OptaFootballFixturesTicker: React.FC<{
   season: string;
@@ -22,39 +23,56 @@ export const OptaFootballFixturesTicker: React.FC<{
   const ref = React.createRef<HTMLDivElement>();
 
   const [isReady, setIsReady] = useState<boolean>(false);
+  const [optaImages, setOptaImages] = useState<
+    HTMLCollectionOf<Element> | undefined
+  >();
+  const nationalCompetitions = ['3', '5', '6', '235', '941', '1125'];
+  const isNationalCompetition = nationalCompetitions.includes(competition);
 
-  useEffect(() => {
-    const sport = 'football';
+  useEffect(
+    () => {
+      const sport = 'football';
 
-    initSettings();
-    initStyleSheet(sport);
+      initSettings();
+      initStyleSheet(sport);
 
-    initScript().then(() => {
-      if (ref.current) {
-        ref.current.innerHTML = initElement('opta-widget', {
-          sport,
-          widget: 'fixtures',
-          season,
-          competition,
-          date_from,
-          date_to,
-          live: true,
-          start_on_current: true,
-          template: 'strip',
-          team_naming: 'brief',
-          match_status: 'all',
-          order_by: 'date_ascending',
-          show_grouping: true,
-          show_crests: true,
-          show_date: true,
-          date_format: 'ddd Do MMM'
-        }).outerHTML;
+      initScript().then(() => {
+        if (ref.current) {
+          ref.current.innerHTML = initElement('opta-widget', {
+            sport,
+            widget: 'fixtures',
+            season,
+            competition,
+            date_from,
+            date_to,
+            live: true,
+            start_on_current: true,
+            template: 'strip',
+            team_naming: 'brief',
+            match_status: 'all',
+            order_by: 'date_ascending',
+            show_grouping: true,
+            show_crests: !isNationalCompetition,
+            show_date: true,
+            date_format: 'ddd Do MMM'
+          }).outerHTML;
 
-        initComponent();
-        setIsReady(true);
-      }
-    });
-  }, []);
+          initComponent();
+          setIsReady(true);
+
+          if (isNationalCompetition) {
+            const TeamNameContainers =
+              ref.current &&
+              ref.current.getElementsByClassName('Opta-TeamName');
+            TeamNameContainers && setOptaImages(TeamNameContainers);
+          }
+        }
+      });
+    },
+    [ref]
+  );
+
+  isNationalCompetition && replaceFlags(optaImages);
 
   return (
     <>

package/src/components/opta/football/fixtures-ticker/__tests__/OptaFootballFixturesTicker.test.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import { render, waitForElementToBeRemoved } from '@testing-library/react';
-
-import 'regenerator-runtime';
 import '@testing-library/jest-dom';
 
 jest.mock('@times-components/image', () => ({
@@ -11,6 +9,7 @@ jest.mock('@times-components/image', () => ({
 const mockInitSettings = jest.fn();
 const mockInitStyleSheet = jest.fn();
 const mockInitComponent = jest.fn();
+const mockReplaceFlags = jest.fn();
 
 const mockInitElement = () => {
   const element = document.createElement('div');
@@ -25,17 +24,20 @@ jest.mock('../../../utils/config', () => ({
   initElement: mockInitElement,
   initComponent: mockInitComponent
 }));
+jest.mock('../../../utils/replaceFlags', () => ({
+  replaceFlags: mockReplaceFlags
+}));
 
 import { OptaFootballFixturesTicker } from '../OptaFootballFixturesTicker';
 
 const requiredProps = {
   season: '2020',
-  competition: '3',
+  competition: '8',
   date_from: '2021-06-20',
   date_to: '2021-07-11'
 };
 
-describe('OptaFootballFixturesTicker', () => {
+describe('OptaFootballFixturesTicker with flags', () => {
   it('should render correctly', async () => {
     const { asFragment, getByText } = render(
       <OptaFootballFixturesTicker {...requiredProps} />
@@ -44,9 +46,34 @@ describe('OptaFootballFixturesTicker', () => {
 
     await waitForElementToBeRemoved(getByText('Placeholder'));
 
-    expect(mockInitSettings).toHaveBeenCalledTimes(1);
-    expect(mockInitStyleSheet).toHaveBeenCalledTimes(1);
-    expect(mockInitComponent).toHaveBeenCalledTimes(1);
+    expect(mockInitSettings).toHaveBeenCalledTimes(2);
+    expect(mockInitStyleSheet).toHaveBeenCalledTimes(2);
+    expect(mockInitComponent).toHaveBeenCalledTimes(2);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
+
+describe('OptaFootballFixturesTicker without flags', () => {
+  afterAll(() => {
+    jest.clearAllTimers();
+  });
+
+  it('should render correctly', async () => {
+    React.useState = jest.fn().mockReturnValue([true, () => React.useState]);
+    React.useState = jest
+      .fn()
+      .mockReturnValue([document.createElement('div'), () => React.useState]);
+
+    const { asFragment } = render(
+      <OptaFootballFixturesTicker season="2023" competition="3" />
+    );
+    expect(asFragment()).toMatchSnapshot();
+
+    expect(mockInitSettings).toHaveBeenCalled();
+    expect(mockInitStyleSheet).toHaveBeenCalled();
+    expect(mockInitComponent).toHaveBeenCalled();
+    expect(mockReplaceFlags).toHaveBeenCalled();
 
     expect(asFragment()).toMatchSnapshot();
   });

package/src/components/opta/football/fixtures-ticker/__tests__/__snapshots__/OptaFootballFixturesTicker.test.tsx.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`OptaFootballFixturesTicker should render correctly 1`] = `
+exports[`OptaFootballFixturesTicker with flags should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-htpNat sc-ifAKCX elhfwo"
+    class="sc-htpNat sc-ifAKCX cpKKZE"
   />
   <div
     class="sc-bwzfXH eLGWmp"
@@ -14,10 +14,10 @@ exports[`OptaFootballFixturesTicker should render correctly 1`] = `
 </DocumentFragment>
 `;
 
-exports[`OptaFootballFixturesTicker should render correctly 2`] = `
+exports[`OptaFootballFixturesTicker with flags should render correctly 2`] = `
 <DocumentFragment>
   <div
-    class="sc-htpNat sc-ifAKCX elhfwo"
+    class="sc-htpNat sc-ifAKCX cpKKZE"
   >
     <div>
       Widget
@@ -25,3 +25,19 @@ exports[`OptaFootballFixturesTicker should render correctly 2`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`OptaFootballFixturesTicker without flags should render correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-htpNat sc-ifAKCX cpKKZE"
+  />
+</DocumentFragment>
+`;
+
+exports[`OptaFootballFixturesTicker without flags should render correctly 2`] = `
+<DocumentFragment>
+  <div
+    class="sc-htpNat sc-ifAKCX cpKKZE"
+  />
+</DocumentFragment>
+`;

package/src/components/opta/football/fixtures-ticker/styles.ts

@@ -40,6 +40,10 @@ export const WidgetContainerOverride = styled(WidgetContainerBase)`
 `;
 
 export const WidgetContainer = styled(WidgetContainerBase)`
+  .Opta {
+    font-family: Roboto !important;
+  }
+
   @media (max-width: ${breakpoints.small}px) {
     .Opta-Window {
       left: 0 !important;
@@ -95,20 +99,31 @@ export const WidgetContainer = styled(WidgetContainerBase)`
     }
     .Opta-Team {
       height: 24px !important;
+
+      .team-flag {
+        width: 20px;
+        margin-bottom: -2px;
+        margin-right: 8px;
+      }
     }
     .Opta-timings {
       height: 24px !important;
       order: -1;
+      color: #aaaaaa !important;
     }
 
     .Opta-TeamName,
     .Opta-Team-Score {
-      color: black !important;
-      font-weight: bold !important;
+      color: #01000d !important;
+      font-weight: 700 !important;
     }
     &.Opta-prematch .Opta-Team-Score::after {
       content: '-';
     }
+
+    .Opta-Image-Team-Small {
+      height: 20px;
+    }
   }
 
   .Opta {

package/src/components/opta/utils/__tests__/replaceFlags.test.tsx

@@ -0,0 +1,39 @@
+import '@testing-library/jest-dom';
+import * as optaFn from '../replaceFlags';
+
+const mockReplaceFlags = () => {
+  const mockDomContainer = document.createElement('div');
+  const mockDomElement = document.createElement('div');
+  const mockDomElement2 = document.createElement('div');
+
+  mockDomElement.innerHTML = 'Portugal';
+  mockDomElement.classList.add('Opta-TeamName');
+
+  mockDomElement2.innerHTML = 'Spain';
+  mockDomElement2.classList.add('Opta-TeamName');
+
+  mockDomContainer.append(mockDomElement);
+  mockDomContainer.append(mockDomElement2);
+
+  return mockDomContainer;
+};
+
+describe('replaceFlags', () => {
+  jest.spyOn(optaFn, 'replaceFlags');
+
+  it('should replace images when valid elements are passed', async () => {
+    jest.useFakeTimers();
+    const container = mockReplaceFlags();
+    const elements = container.getElementsByClassName('Opta-TeamName');
+    const replaceFlags = await optaFn.replaceFlags(elements);
+
+    expect(optaFn.replaceFlags).toHaveBeenCalledWith(elements);
+    jest.advanceTimersByTime(3000);
+    expect(replaceFlags).toBe(undefined);
+    const transformedElements = Array.from(elements);
+    expect(transformedElements[0].querySelector('img')).toBeInstanceOf;
+    expect(transformedElements[0]).toHaveTextContent('Portugal');
+    expect(transformedElements[1].querySelector('img')).toBeInstanceOf;
+    expect(transformedElements[1]).toHaveTextContent('Spain');
+  });
+});

package/src/components/opta/utils/replaceFlags.ts

@@ -0,0 +1,30 @@
+export const replaceFlags = (
+  element: HTMLCollectionOf<Element> | undefined
+) => {
+  let count = 0;
+  const replaceImages = setInterval(() => {
+    if (count >= 5) {
+      clearInterval(replaceImages);
+    }
+    count++;
+
+    if (element && element.length > 0) {
+      for (let optaFlagContainer of element) {
+        const country = (optaFlagContainer as HTMLElement).innerText;
+
+        if (!optaFlagContainer.querySelector('img')) {
+          const countryImg = document.createElement('img');
+          countryImg.setAttribute(
+            'src',
+            `https://nuk-tnl-editorial-prod-staticassets.s3.eu-west-1.amazonaws.com/opta/euro-flags/${country}.svg`
+          );
+          countryImg.setAttribute('onerror', 'this.remove()');
+          countryImg.classList.add('team-flag');
+
+          optaFlagContainer.prepend(countryImg);
+        }
+      }
+      clearInterval(replaceImages);
+    }
+  }, 500);
+};

package/tsconfig.json

@@ -38,7 +38,7 @@
 
     "skipLibCheck": true,
 
-    "lib": ["es6", "dom", "es2017"],
+    "lib": ["es6", "dom", "es2017", "dom.iterable"],
     "types": ["jest"],
     "typeRoots": ["node_modules/@types", "src/types", "../../node_modules/@types"]
   },