@times-components/ts-components 1.145.1-d1253ed8e87e7cdf861fbf772a5f9026182434db.4 → 1.145.1-e871182934034874ea6a75e1e684090e5504df44.2

package/src/components/opta/cricket/scorecard/OptaCricketScorecard.tsx

@@ -12,7 +12,6 @@ import {
 import { Container, PlaceholderContainer } from '../../shared/shared-styles';
 import { WidgetContainer } from './styles';
 import Button from '../../shared/button/Button';
-import { emitEvent } from '../../utils/emitEvent';
 
 export const OptaCricketScorecard: React.FC<{
   competition: string;
@@ -31,7 +30,6 @@ export const OptaCricketScorecard: React.FC<{
     heightLg = 258
   }) => {
     const ref = React.createRef<HTMLDivElement>();
-    const containerRef = React.createRef<HTMLDivElement>();
     const [isReady, setIsReady] = useState<boolean>(false);
     const [showDetails, setShowDetails] = useState<boolean>(false);
 
@@ -83,16 +81,6 @@ export const OptaCricketScorecard: React.FC<{
         });
     }, []);
 
-    useEffect(
-      () => {
-        const height = containerRef.current
-          ? containerRef.current.offsetHeight
-          : 0;
-        emitEvent('updateHeight', height);
-      },
-      [showDetails]
-    );
-
     return (
       <Container
         fullWidth={full_width}
@@ -100,7 +88,6 @@ export const OptaCricketScorecard: React.FC<{
         heightMd={heightMd}
         heightLg={heightLg}
         hasPadding
-        ref={containerRef}
       >
         <WidgetContainer ref={ref} showDetails={showDetails} />
 

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

@@ -1,5 +1,5 @@
 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 +10,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 { OptaCricketScorecard } from '../OptaCricketScorecard';
 
 const requiredProps = {
@@ -41,26 +36,19 @@ const requiredProps = {
 describe('OptaCricketScorecard', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    mockInitScript.mockResolvedValue({});
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-    document.body.innerHTML = '';
   });
 
   it('should render correctly', async () => {
-    const { asFragment, getByRole } = render(
-      <OptaCricketScorecard {...requiredProps} />
-    );
+    const { asFragment } = render(<OptaCricketScorecard {...requiredProps} />);
 
-    await waitFor(() => {
-      expect(mockInitSettings).toHaveBeenCalledTimes(1);
+    act(() => {
+      mockInitComponent();
+      mockHasMatchEvents();
     });
 
-    expect(mockInitStyleSheet).toHaveBeenCalledWith('cricket');
+    expect(mockInitSettings).toHaveBeenCalledTimes(1);
+    expect(mockInitStyleSheet).toHaveBeenCalledTimes(1);
     expect(mockInitComponent).toHaveBeenCalledTimes(1);
-    expect(getByRole('button')).toBeInTheDocument();
 
     expect(asFragment()).toMatchSnapshot();
   });
@@ -71,112 +59,14 @@ describe('OptaCricketScorecard', () => {
     expect(button).not.toBeDisabled();
   });
 
-  it('should toggle details when button is clicked', async () => {
+  it('should toggle details when button is clicked', () => {
     const { getByRole } = render(<OptaCricketScorecard {...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(<OptaCricketScorecard {...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(<OptaCricketScorecard {...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(
-        <OptaCricketScorecard {...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: 300,
-          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/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} />