@times-components/ts-components 1.145.1-b32ea924749bafdf12e3e8515023538fa20e7808.3 → 1.145.1-cfea81c4084e6f91221ea00fec9fc730d5b933cb.4

package/src/components/opta/cricket/scorecard/__tests__/__snapshots__/OptaCricketScorecard.test.tsx.snap

@@ -7,16 +7,17 @@ exports[`OptaCricketScorecard should render correctly 1`] = `
   >
     <div
       class="sc-bxivhb sc-ifAKCX dNXXXn"
-    >
-      <div>
-        Widget
-      </div>
-    </div>
+    />
     <button
       class="sc-EHOje dWKhuC"
     >
       Show Details
     </button>
+    <div
+      class="sc-bwzfXH eSqyJ"
+    >
+      Placeholder
+    </div>
   </div>
 </DocumentFragment>
 `;

package/src/components/opta/football/summary/OptaFootballSummary.tsx

@@ -13,7 +13,6 @@ import {
 import { Container, PlaceholderContainer } from '../../shared/shared-styles';
 import { WidgetContainer } from '../../shared/summary-styles';
 import Button from '../../shared/button/Button';
-import { emitEvent } from '../../utils/emitEvent';
 
 export const OptaFootballSummary: React.FC<{
   season: string;
@@ -34,7 +33,6 @@ export const OptaFootballSummary: React.FC<{
     heightLg = 197
   }) => {
     const ref = React.createRef<HTMLDivElement>();
-    const containerRef = React.createRef<HTMLDivElement>();
     const [isReady, setIsReady] = useState<boolean>(false);
     const [showDetails, setShowDetails] = useState<boolean>(false);
 
@@ -73,16 +71,6 @@ export const OptaFootballSummary: React.FC<{
         });
     }, []);
 
-    useEffect(
-      () => {
-        const height = containerRef.current
-          ? containerRef.current.offsetHeight
-          : 0;
-        emitEvent('updateHeight', height);
-      },
-      [showDetails]
-    );
-
     return (
       <Container
         fullWidth={full_width}
@@ -90,7 +78,6 @@ export const OptaFootballSummary: React.FC<{
         heightMd={heightMd}
         heightLg={heightLg}
         hasPadding
-        ref={containerRef}
       >
         <WidgetContainer ref={ref} showDetails={showDetails} />
 

package/src/components/opta/football/summary/__tests__/OptaFootballSummary.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render, act, fireEvent, waitFor } from '@testing-library/react';
+import { render, act, fireEvent } from '@testing-library/react';
+
 import 'regenerator-runtime';
 import '@testing-library/jest-dom';
 
@@ -10,27 +11,22 @@ jest.mock('@times-components/image', () => ({
 const mockInitSettings = jest.fn();
 const mockInitStyleSheet = jest.fn();
 const mockInitComponent = jest.fn();
-const mockInitScript = jest.fn();
-const mockEmitEvent = jest.fn();
+const mockHasMatchEvents = jest.fn();
 
-const mockInitElement = jest.fn(() => {
+const mockInitElement = () => {
   const element = document.createElement('div');
   element.appendChild(document.createTextNode('Widget'));
   return element;
-});
+};
 
 jest.mock('../../../utils/config', () => ({
   initSettings: mockInitSettings,
   initStyleSheet: mockInitStyleSheet,
-  initScript: mockInitScript,
+  initScript: () => new Promise(resolve => resolve({})),
   initElement: mockInitElement,
   initComponent: mockInitComponent
 }));
 
-jest.mock('../../../utils/emitEvent', () => ({
-  emitEvent: mockEmitEvent
-}));
-
 import { OptaFootballSummary } from '../OptaFootballSummary';
 
 const requiredProps = {
@@ -42,142 +38,37 @@ const requiredProps = {
 describe('OptaFootballSummary', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    mockInitScript.mockResolvedValue({});
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-    document.body.innerHTML = '';
   });
 
   it('should render correctly', async () => {
-    const { asFragment, getByRole } = render(
-      <OptaFootballSummary {...requiredProps} />
-    );
+    const { asFragment } = render(<OptaFootballSummary {...requiredProps} />);
 
-    await waitFor(() => {
-      expect(mockInitSettings).toHaveBeenCalledTimes(1);
+    act(() => {
+      mockInitComponent();
+      mockHasMatchEvents();
     });
 
-    expect(mockInitStyleSheet).toHaveBeenCalledWith('football');
+    expect(mockInitSettings).toHaveBeenCalledTimes(1);
+    expect(mockInitStyleSheet).toHaveBeenCalledTimes(1);
     expect(mockInitComponent).toHaveBeenCalledTimes(1);
-    expect(getByRole('button')).toBeInTheDocument();
 
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it('should enable the button initially', () => {
+  it('should disable the button initially', () => {
     const { getByRole } = render(<OptaFootballSummary {...requiredProps} />);
     const button = getByRole('button');
     expect(button).not.toBeDisabled();
   });
 
-  it('should toggle details when button is clicked', async () => {
+  it('should toggle details when button is clicked', () => {
     const { getByRole } = render(<OptaFootballSummary {...requiredProps} />);
     const button = getByRole('button');
 
     expect(button).toHaveTextContent('Show Details');
-
-    act(() => {
-      fireEvent.click(button);
-    });
-
-    await waitFor(() => {
-      expect(button).toHaveTextContent('Hide Details');
-    });
-
-    act(() => {
-      fireEvent.click(button);
-    });
-
-    await waitFor(() => {
-      expect(button).toHaveTextContent('Show Details');
-    });
-  });
-
-  describe('emitEvent', () => {
-    it('should call emitEvent with updateHeight when details are toggled', async () => {
-      const { getByRole } = render(<OptaFootballSummary {...requiredProps} />);
-      const button = getByRole('button');
-
-      // Clear initial calls
-      jest.clearAllMocks();
-
-      act(() => {
-        fireEvent.click(button);
-      });
-
-      await waitFor(() => {
-        expect(mockEmitEvent).toHaveBeenCalledWith(
-          'updateHeight',
-          expect.any(Number)
-        );
-      });
-    });
-
-    it('should emit updateHeight event on each toggle', async () => {
-      const { getByRole } = render(<OptaFootballSummary {...requiredProps} />);
-      const button = getByRole('button');
-
-      // Clear initial calls
-      jest.clearAllMocks();
-
-      // First toggle
-      act(() => {
-        fireEvent.click(button);
-      });
-
-      await waitFor(() => {
-        expect(mockEmitEvent).toHaveBeenCalledTimes(1);
-      });
-
-      // Second toggle
-      act(() => {
-        fireEvent.click(button);
-      });
-
-      await waitFor(() => {
-        expect(mockEmitEvent).toHaveBeenCalledTimes(2);
-      });
-
-      // Third toggle
-      act(() => {
-        fireEvent.click(button);
-      });
-
-      await waitFor(() => {
-        expect(mockEmitEvent).toHaveBeenCalledTimes(3);
-      });
-    });
-
-    it('should emit updateHeight with container offsetHeight', async () => {
-      const { getByRole, container } = render(
-        <OptaFootballSummary {...requiredProps} />
-      );
-      const button = getByRole('button');
-
-      // Clear initial calls
-      jest.clearAllMocks();
-
-      // Mock offsetHeight
-      const containerElement = container.querySelector('[class*="Container"]');
-      if (containerElement) {
-        Object.defineProperty(containerElement, 'offsetHeight', {
-          value: 250,
-          configurable: true
-        });
-      }
-
-      act(() => {
-        fireEvent.click(button);
-      });
-
-      await waitFor(() => {
-        expect(mockEmitEvent).toHaveBeenCalledWith(
-          'updateHeight',
-          expect.any(Number)
-        );
-      });
-    });
+    fireEvent.click(button);
+    expect(button).toHaveTextContent('Hide Details');
+    fireEvent.click(button);
+    expect(button).toHaveTextContent('Show Details');
   });
 });

package/src/components/opta/football/summary/__tests__/__snapshots__/OptaFootballSummary.test.tsx.snap

@@ -7,16 +7,17 @@ exports[`OptaFootballSummary should render correctly 1`] = `
   >
     <div
       class="sc-htpNat sc-bxivhb hNtyxM"
-    >
-      <div>
-        Widget
-      </div>
-    </div>
+    />
     <button
       class="sc-ifAKCX fvBTJK"
     >
       Show Details
     </button>
+    <div
+      class="sc-bwzfXH eSqyJ"
+    >
+      Placeholder
+    </div>
   </div>
 </DocumentFragment>
 `;

package/src/components/opta/rugby/summary/OptaRugbySummary.tsx

@@ -13,7 +13,6 @@ import {
 import { Container, PlaceholderContainer } from '../../shared/shared-styles';
 import { WidgetContainer } from '../../shared/summary-styles';
 import Button from '../../shared/button/Button';
-import { emitEvent } from '../../utils/emitEvent';
 
 export const OptaRugbySummary: React.FC<{
   season: string;
@@ -34,7 +33,6 @@ export const OptaRugbySummary: React.FC<{
     heightLg = 197
   }) => {
     const ref = React.createRef<HTMLDivElement>();
-    const containerRef = React.createRef<HTMLDivElement>();
     const [isReady, setIsReady] = useState<boolean>(false);
     const [showDetails, setShowDetails] = useState<boolean>(false);
 
@@ -75,16 +73,6 @@ export const OptaRugbySummary: React.FC<{
         });
     }, []);
 
-    useEffect(
-      () => {
-        const height = containerRef.current
-          ? containerRef.current.offsetHeight
-          : 0;
-        emitEvent('updateHeight', height);
-      },
-      [showDetails]
-    );
-
     return (
       <Container
         fullWidth={full_width}
@@ -92,7 +80,6 @@ export const OptaRugbySummary: React.FC<{
         heightMd={heightMd}
         heightLg={heightLg}
         hasPadding
-        ref={containerRef}
       >
         <WidgetContainer ref={ref} showDetails={showDetails} />
 

package/src/components/opta/rugby/summary/__tests__/OptaRugbySummary.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render, act, fireEvent, waitFor } from '@testing-library/react';
+import { render, act, fireEvent } from '@testing-library/react';
+
 import 'regenerator-runtime';
 import '@testing-library/jest-dom';
 
@@ -10,27 +11,22 @@ jest.mock('@times-components/image', () => ({
 const mockInitSettings = jest.fn();
 const mockInitStyleSheet = jest.fn();
 const mockInitComponent = jest.fn();
-const mockInitScript = jest.fn();
-const mockEmitEvent = jest.fn();
+const mockHasMatchEvents = jest.fn();
 
-const mockInitElement = jest.fn(() => {
+const mockInitElement = () => {
   const element = document.createElement('div');
   element.appendChild(document.createTextNode('Widget'));
   return element;
-});
+};
 
 jest.mock('../../../utils/config', () => ({
   initSettings: mockInitSettings,
   initStyleSheet: mockInitStyleSheet,
-  initScript: mockInitScript,
+  initScript: () => new Promise(resolve => resolve({})),
   initElement: mockInitElement,
   initComponent: mockInitComponent
 }));
 
-jest.mock('../../../utils/emitEvent', () => ({
-  emitEvent: mockEmitEvent
-}));
-
 import { OptaRugbySummary } from '../OptaRugbySummary';
 
 const requiredProps = {
@@ -38,30 +34,22 @@ const requiredProps = {
   competition: '209',
   match: '921100'
 };
-
 describe('OptaRugbySummary', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    mockInitScript.mockResolvedValue({});
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-    document.body.innerHTML = '';
   });
 
   it('should render correctly', async () => {
-    const { asFragment, getByRole } = render(
-      <OptaRugbySummary {...requiredProps} />
-    );
+    const { asFragment } = render(<OptaRugbySummary {...requiredProps} />);
 
-    await waitFor(() => {
-      expect(mockInitSettings).toHaveBeenCalledTimes(1);
+    act(() => {
+      mockInitComponent();
+      mockHasMatchEvents();
     });
 
-    expect(mockInitStyleSheet).toHaveBeenCalledWith('rugby');
+    expect(mockInitSettings).toHaveBeenCalledTimes(1);
+    expect(mockInitStyleSheet).toHaveBeenCalledTimes(1);
     expect(mockInitComponent).toHaveBeenCalledTimes(1);
-    expect(getByRole('button')).toBeInTheDocument();
 
     expect(asFragment()).toMatchSnapshot();
   });
@@ -72,112 +60,14 @@ describe('OptaRugbySummary', () => {
     expect(button).not.toBeDisabled();
   });
 
-  it('should toggle details when button is clicked', async () => {
+  it('should toggle details when button is clicked', () => {
     const { getByRole } = render(<OptaRugbySummary {...requiredProps} />);
     const button = getByRole('button');
 
     expect(button).toHaveTextContent('Show Details');
-
-    act(() => {
-      fireEvent.click(button);
-    });
-
-    await waitFor(() => {
-      expect(button).toHaveTextContent('Hide Details');
-    });
-
-    act(() => {
-      fireEvent.click(button);
-    });
-
-    await waitFor(() => {
-      expect(button).toHaveTextContent('Show Details');
-    });
-  });
-
-  describe('emitEvent', () => {
-    it('should call emitEvent with updateHeight when details are toggled', async () => {
-      const { getByRole } = render(<OptaRugbySummary {...requiredProps} />);
-      const button = getByRole('button');
-
-      // Clear initial calls
-      jest.clearAllMocks();
-
-      act(() => {
-        fireEvent.click(button);
-      });
-
-      await waitFor(() => {
-        expect(mockEmitEvent).toHaveBeenCalledWith(
-          'updateHeight',
-          expect.any(Number)
-        );
-      });
-    });
-
-    it('should emit updateHeight event on each toggle', async () => {
-      const { getByRole } = render(<OptaRugbySummary {...requiredProps} />);
-      const button = getByRole('button');
-
-      // Clear initial calls
-      jest.clearAllMocks();
-
-      // First toggle
-      act(() => {
-        fireEvent.click(button);
-      });
-
-      await waitFor(() => {
-        expect(mockEmitEvent).toHaveBeenCalledTimes(1);
-      });
-
-      // Second toggle
-      act(() => {
-        fireEvent.click(button);
-      });
-
-      await waitFor(() => {
-        expect(mockEmitEvent).toHaveBeenCalledTimes(2);
-      });
-
-      // Third toggle
-      act(() => {
-        fireEvent.click(button);
-      });
-
-      await waitFor(() => {
-        expect(mockEmitEvent).toHaveBeenCalledTimes(3);
-      });
-    });
-
-    it('should emit updateHeight with container offsetHeight', async () => {
-      const { getByRole, container } = render(
-        <OptaRugbySummary {...requiredProps} />
-      );
-      const button = getByRole('button');
-
-      // Clear initial calls
-      jest.clearAllMocks();
-
-      // Mock offsetHeight
-      const containerElement = container.querySelector('[class*="Container"]');
-      if (containerElement) {
-        Object.defineProperty(containerElement, 'offsetHeight', {
-          value: 250,
-          configurable: true
-        });
-      }
-
-      act(() => {
-        fireEvent.click(button);
-      });
-
-      await waitFor(() => {
-        expect(mockEmitEvent).toHaveBeenCalledWith(
-          'updateHeight',
-          expect.any(Number)
-        );
-      });
-    });
+    fireEvent.click(button);
+    expect(button).toHaveTextContent('Hide Details');
+    fireEvent.click(button);
+    expect(button).toHaveTextContent('Show Details');
   });
 });

package/src/components/opta/rugby/summary/__tests__/__snapshots__/OptaRugbySummary.test.tsx.snap

@@ -7,16 +7,17 @@ exports[`OptaRugbySummary should render correctly 1`] = `
   >
     <div
       class="sc-htpNat sc-bxivhb hNtyxM"
-    >
-      <div>
-        Widget
-      </div>
-    </div>
+    />
     <button
       class="sc-ifAKCX fvBTJK"
     >
       Show Details
     </button>
+    <div
+      class="sc-bwzfXH eSqyJ"
+    >
+      Placeholder
+    </div>
   </div>
 </DocumentFragment>
 `;

package/src/components/trip-cards/SkeletonCard.tsx

@@ -0,0 +1,54 @@
+import React, { FC } from 'react';
+import { Placeholder } from '@times-components/image';
+import {
+  CardContainer,
+  ImageContainer,
+  CardContent,
+  TopContainer,
+  BottomContainer,
+  DataPointsList,
+  DataPoint,
+  PriceSection,
+  PriceContainer
+} from './styles';
+import {
+  SkeletonLine,
+  SkeletonHeadline,
+  SkeletonPrice,
+  SkeletonButton
+} from './skeletonStyles';
+
+export const SkeletonCard: FC = () => {
+  return (
+    <CardContainer data-testid="skeleton-card-container">
+      <ImageContainer data-testid="skeleton-image-container">
+        <Placeholder />
+      </ImageContainer>
+      <CardContent data-testid="skeleton-card-content">
+        <TopContainer data-testid="skeleton-top-container">
+          <SkeletonHeadline data-testid="skeleton-headline" />
+          <DataPointsList data-testid="skeleton-data-points-list">
+            {[1, 2, 3, 4].map(i => (
+              <DataPoint key={i} data-testid={`skeleton-data-point-${i}`}>
+                <SkeletonLine width="80px" data-testid={`skeleton-line-${i}`} />
+              </DataPoint>
+            ))}
+          </DataPointsList>
+        </TopContainer>
+        <BottomContainer data-testid="skeleton-bottom-container">
+          <PriceSection data-testid="skeleton-price-section">
+            <PriceContainer data-testid="skeleton-price-container">
+              <SkeletonLine
+                width="40px"
+                marginBottom="4px"
+                data-testid="skeleton-price-label"
+              />
+              <SkeletonPrice data-testid="skeleton-price" />
+            </PriceContainer>
+          </PriceSection>
+          <SkeletonButton as="div" data-testid="skeleton-button" />
+        </BottomContainer>
+      </CardContent>
+    </CardContainer>
+  );
+};