@times-components/ts-components 1.25.1 → 1.26.2

package/src/components/opta/rugby/summary/styles.ts

@@ -0,0 +1,153 @@
+import styled from 'styled-components';
+import { breakpoints, colours, fonts } from '@times-components/styleguide';
+
+import { WidgetContainerBase } from '../shared-styles';
+
+export const WidgetContainer = styled(WidgetContainerBase)`
+  .Opta {
+    h2 {
+      margin: 20px 0 10px 0 !important;
+    }
+
+    .Opta-Cf {
+      padding: 0;
+      background-color: transparent;
+
+      table {
+        tbody {
+          tr {
+            td {
+              color: ${colours.functional.brandColour};
+              font-family: ${fonts.headline};
+              font-size: 18px;
+              line-height: 18px;
+              padding: 0;
+
+              &.Opta-Crest {
+                text-align: left;
+
+                &.Opta-Home {
+                  text-align: right;
+                }
+
+                img {
+                  width: 40px;
+                }
+              }
+
+              &.Opta-Team {
+                padding-left: 10px;
+                font-size: 18px;
+                line-height: 18px;
+
+                &.Opta-Home {
+                  padding-right: 10px;
+                  padding-left: 0;
+                  text-align: right;
+                }
+              }
+
+              &.Opta-Score {
+                width: 20px;
+                font-size: 24px;
+                line-height: 24px;
+                text-align: left;
+
+                &.Opta-Home {
+                  text-align: right;
+                }
+
+                span {
+                  min-width: 0;
+                  padding: 0;
+                  color: inherit;
+                  font-family: inherit;
+                  font-size: inherit;
+                  line-height: inherit;
+                  text-align: inherit;
+                  background-color: transparent !important;
+                }
+
+                @media (min-width: ${breakpoints.medium}px) {
+                  width: 30px;
+                  font-size: 32px;
+                  line-height: 32px;
+                }
+              }
+
+              &.Opta-Divider {
+                width: 20px;
+                text-align: center;
+
+                abbr {
+                  font-size: inherit;
+                  line-height: inherit;
+                  text-decoration: none;
+                }
+              }
+            }
+
+            &.Opta-Score-Extras {
+              td {
+                color: ${colours.functional.brandColour};
+                font-family: ${fonts.supporting};
+                font-size: 14px;
+                line-height: 28px;
+
+                span {
+                  color: inherit;
+                  font-size: inherit;
+                }
+              }
+            }
+
+            &.Opta-MatchHeader-Details {
+              div {
+                padding: 0;
+                color: ${colours.section.sport};
+                font-family: ${fonts.supporting};
+                font-size: 12px;
+                line-height: 12px;
+                letter-spacing: 1px;
+                text-transform: uppercase;
+                background-color: transparent;
+
+                span {
+                  margin: 0 6px;
+                  color: inherit;
+                  font-size: inherit;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .Opta-Events {
+        padding: 10px 0 2px 0;
+
+        li {
+          padding: 0 0 8px 0;
+
+          .Opta-Event-Text {
+            color: ${colours.functional.brandColour};
+            font-family: ${fonts.supporting};
+            font-size: 14px;
+            line-height: 16px;
+
+            .Opta-Event-Player,
+            .Opta-Event-Time,
+            .Opta-Event-Text-Type {
+              font-size: inherit;
+              line-height: inherit;
+            }
+
+            .Opta-Event-Time {
+              color: ${colours.section.sport};
+            }
+          }
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,38 @@
+import { initSettings, initStyleSheet, initElement } from '../config';
+
+describe('Opta config', () => {
+  it('should initialise opta settings', async () => {
+    initSettings();
+    expect(window.opta_settings.subscription_id).toEqual(
+      'db98cff9f9612c01bbf3435964748e95'
+    );
+  });
+
+  it('should initialise football stylesheet', async () => {
+    initStyleSheet('football');
+    const element = document.head.querySelector(
+      'link[href="https://secure.widget.cloud.opta.net/v3/css/v3.football.opta-widgets.css"]'
+    );
+    expect(element).toBeTruthy();
+  });
+
+  it('should initialise rugby stylesheet', async () => {
+    initStyleSheet('rugby');
+    const element = document.head.querySelector(
+      'link[href="https://secure.widget.cloud.opta.net/v3/css/v3.rugby.opta-widgets.css"]'
+    );
+    expect(element).toBeTruthy();
+  });
+
+  it('should create the correct element', async () => {
+    const element = initElement(
+      'opta-widget',
+      { sport: 'football' },
+      initElement('opta-sub-widget')
+    );
+
+    expect(element.nodeName).toEqual('OPTA-WIDGET');
+    expect(element.getAttribute('sport')).toEqual('football');
+    expect(element.childNodes[0].nodeName).toEqual('OPTA-SUB-WIDGET');
+  });
+});

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

@@ -25,10 +25,20 @@ export const initSettings = () => {
   }
 };
 
-const cssUrl =
-  'https://secure.widget.cloud.opta.net/v3/css/v3.football.opta-widgets.css';
+const getStyleSheetUrl = (sport: string) => {
+  switch (sport) {
+    case 'rugby':
+      return 'https://secure.widget.cloud.opta.net/v3/css/v3.rugby.opta-widgets.css';
+
+    case 'football':
+    default:
+      return 'https://secure.widget.cloud.opta.net/v3/css/v3.football.opta-widgets.css';
+  }
+};
+
+export const initStyleSheet = (sport: string) => {
+  const cssUrl = getStyleSheetUrl(sport);
 
-export const initStyleSheet = () => {
   if (!document.head.querySelector(`link[href="${cssUrl}"]`)) {
     const link = document.createElement('link');
     link.setAttribute('rel', 'stylesheet');

package/src/helpers/fetch/FetchProvider.tsx

@@ -40,8 +40,8 @@ export const FetchProvider: React.FC<FetchProviderProps> = ({
         } else {
           throw new Error('must provide a Fetch url');
         }
-      } catch (error) {
-        setError(error);
+      } catch (err) {
+        setError(err.message);
         setLoading(false);
       }
     };

package/src/helpers/fetch/__tests__/FetchProvider.test.tsx

@@ -2,12 +2,11 @@ import React, { FC } from 'react';
 import { render } from '@testing-library/react';
 
 import 'regenerator-runtime';
-import '@testing-library/jest-dom';
 
-import { FetchProvider, useFetch } from '../FetchProvider';
-import { enableFetchMocks } from 'jest-fetch-mock';
+import _fetchMock from 'isomorphic-unfetch';
+const fetchMock = _fetchMock as any;
 
-enableFetchMocks();
+import { FetchProvider, useFetch } from '../FetchProvider';
 
 const TestComponent: FC<{}> = () => {
   try {
@@ -28,71 +27,62 @@ const TestComponent: FC<{}> = () => {
 };
 
 describe('<FetchProvider>', () => {
-  beforeEach(() => {
-    // if you have an existing `beforeEach` just add the following line to it
-    fetchMock.doMock();
-  });
-
   afterEach(() => {
-    fetchMock.resetMocks();
+    fetchMock.restore();
+    fetchMock.reset();
   });
 
+  const endpoint = 'http://localhost:123';
+
   it('fetch', async () => {
-    fetchMock.mockResponse(async () => ({ body: '{ "value" : "boo" }' }));
+    const value = 'Fetched';
+    fetchMock.mock(endpoint, { status: 200, body: { value } });
 
     const { asFragment, findByText } = render(
-      <FetchProvider url="http://localhost:123">
+      <FetchProvider url={endpoint}>
         <TestComponent />
       </FetchProvider>
     );
-    await findByText('boo');
 
+    findByText('loading');
     expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('loading', async () => {
-    fetchMock.mockResponse(async () => ({ body: '{ "value" : "boo" }' }));
 
-    const { findByText } = render(
-      <FetchProvider url="http://thetimes.co.uk">
-        <TestComponent />
-      </FetchProvider>
-    );
-    await findByText('Loading');
+    await findByText(value);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it('error', async () => {
-    fetchMock.mockResponse(() => Promise.reject('error'));
+    fetchMock.mock(endpoint, { status: 500 });
 
     const { asFragment, findByText } = render(
-      <FetchProvider url="http://thetimes.co.uk">
+      <FetchProvider url={endpoint}>
         <TestComponent>Children</TestComponent>
       </FetchProvider>
     );
-    await findByText('Error');
 
+    await findByText('Error');
     expect(asFragment()).toMatchSnapshot();
   });
 
   it('Unprovided', async () => {
-    fetchMock.mockResponse(async () => ({ body: '{ "value" : "boo" }' }));
-
     const { asFragment, findByText } = render(
       <TestComponent>Children</TestComponent>
     );
-    await findByText('Error');
 
+    await findByText('Error');
     expect(asFragment()).toMatchSnapshot();
   });
 
   it('preview', () => {
+    const value = 'Preloaded';
+
     const { asFragment, getByText } = render(
-      <FetchProvider previewData={{ value: 'boo' }}>
+      <FetchProvider previewData={{ value }}>
         <TestComponent />
       </FetchProvider>
     );
 
-    expect(getByText('boo'));
+    expect(getByText(value));
     expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/helpers/fetch/__tests__/__snapshots__/FetchProvider.test.tsx.snap

@@ -19,7 +19,15 @@ exports[`<FetchProvider> error 1`] = `
 exports[`<FetchProvider> fetch 1`] = `
 <DocumentFragment>
   <div>
-    boo
+    Loading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<FetchProvider> fetch 2`] = `
+<DocumentFragment>
+  <div>
+    Fetched
   </div>
 </DocumentFragment>
 `;
@@ -27,7 +35,7 @@ exports[`<FetchProvider> fetch 1`] = `
 exports[`<FetchProvider> preview 1`] = `
 <DocumentFragment>
   <div>
-    boo
+    Preloaded
   </div>
 </DocumentFragment>
 `;

package/src/index.ts

@@ -45,6 +45,20 @@ export {
 export {
   OptaFootballMatchStats
 } from './components/opta/football/match-stats/OptaFootballMatchStats';
+
+export {
+  OptaRugbyFixtures
+} from './components/opta/rugby/fixtures/OptaRugbyFixtures';
+export {
+  OptaRugbyStandings
+} from './components/opta/rugby/standings/OptaRugbyStandings';
+export {
+  OptaRugbySummary
+} from './components/opta/rugby/summary/OptaRugbySummary';
+export {
+  OptaRugbyMatchStats
+} from './components/opta/rugby/match-stats/OptaRugbyMatchStats';
+
 export {
   OlympicsMedalTable
 } from './components/olympics/medal-table/OlympicsMedalTable';