@times-components/ts-components 1.145.1-cfea81c4084e6f91221ea00fec9fc730d5b933cb.4 → 1.145.1-d1253ed8e87e7cdf861fbf772a5f9026182434db.4

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

@@ -12,6 +12,7 @@ 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;
@@ -30,6 +31,7 @@ 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);
 
@@ -81,6 +83,16 @@ export const OptaCricketScorecard: React.FC<{
         });
     }, []);
 
+    useEffect(
+      () => {
+        const height = containerRef.current
+          ? containerRef.current.offsetHeight
+          : 0;
+        emitEvent('updateHeight', height);
+      },
+      [showDetails]
+    );
+
     return (
       <Container
         fullWidth={full_width}
@@ -88,6 +100,7 @@ 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 } from '@testing-library/react';
+import { render, act, fireEvent, waitFor } from '@testing-library/react';
 import 'regenerator-runtime';
 import '@testing-library/jest-dom';
 
@@ -10,22 +10,27 @@ jest.mock('@times-components/image', () => ({
 const mockInitSettings = jest.fn();
 const mockInitStyleSheet = jest.fn();
 const mockInitComponent = jest.fn();
-const mockHasMatchEvents = jest.fn();
+const mockInitScript = jest.fn();
+const mockEmitEvent = jest.fn();
 
-const mockInitElement = () => {
+const mockInitElement = jest.fn(() => {
   const element = document.createElement('div');
   element.appendChild(document.createTextNode('Widget'));
   return element;
-};
+});
 
 jest.mock('../../../utils/config', () => ({
   initSettings: mockInitSettings,
   initStyleSheet: mockInitStyleSheet,
-  initScript: () => new Promise(resolve => resolve({})),
+  initScript: mockInitScript,
   initElement: mockInitElement,
   initComponent: mockInitComponent
 }));
 
+jest.mock('../../../utils/emitEvent', () => ({
+  emitEvent: mockEmitEvent
+}));
+
 import { OptaCricketScorecard } from '../OptaCricketScorecard';
 
 const requiredProps = {
@@ -36,19 +41,26 @@ const requiredProps = {
 describe('OptaCricketScorecard', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    mockInitScript.mockResolvedValue({});
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    document.body.innerHTML = '';
   });
 
   it('should render correctly', async () => {
-    const { asFragment } = render(<OptaCricketScorecard {...requiredProps} />);
+    const { asFragment, getByRole } = render(
+      <OptaCricketScorecard {...requiredProps} />
+    );
 
-    act(() => {
-      mockInitComponent();
-      mockHasMatchEvents();
+    await waitFor(() => {
+      expect(mockInitSettings).toHaveBeenCalledTimes(1);
     });
 
-    expect(mockInitSettings).toHaveBeenCalledTimes(1);
-    expect(mockInitStyleSheet).toHaveBeenCalledTimes(1);
+    expect(mockInitStyleSheet).toHaveBeenCalledWith('cricket');
     expect(mockInitComponent).toHaveBeenCalledTimes(1);
+    expect(getByRole('button')).toBeInTheDocument();
 
     expect(asFragment()).toMatchSnapshot();
   });
@@ -59,14 +71,112 @@ describe('OptaCricketScorecard', () => {
     expect(button).not.toBeDisabled();
   });
 
-  it('should toggle details when button is clicked', () => {
+  it('should toggle details when button is clicked', async () => {
     const { getByRole } = render(<OptaCricketScorecard {...requiredProps} />);
     const button = getByRole('button');
 
     expect(button).toHaveTextContent('Show Details');
-    fireEvent.click(button);
-    expect(button).toHaveTextContent('Hide Details');
-    fireEvent.click(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)
+        );
+      });
+    });
   });
 });

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

@@ -7,17 +7,16 @@ 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,6 +13,7 @@ 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;
@@ -33,6 +34,7 @@ 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);
 
@@ -71,6 +73,16 @@ export const OptaFootballSummary: React.FC<{
         });
     }, []);
 
+    useEffect(
+      () => {
+        const height = containerRef.current
+          ? containerRef.current.offsetHeight
+          : 0;
+        emitEvent('updateHeight', height);
+      },
+      [showDetails]
+    );
+
     return (
       <Container
         fullWidth={full_width}
@@ -78,6 +90,7 @@ 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,6 +1,5 @@
 import React from 'react';
-import { render, act, fireEvent } from '@testing-library/react';
-
+import { render, act, fireEvent, waitFor } from '@testing-library/react';
 import 'regenerator-runtime';
 import '@testing-library/jest-dom';
 
@@ -11,22 +10,27 @@ jest.mock('@times-components/image', () => ({
 const mockInitSettings = jest.fn();
 const mockInitStyleSheet = jest.fn();
 const mockInitComponent = jest.fn();
-const mockHasMatchEvents = jest.fn();
+const mockInitScript = jest.fn();
+const mockEmitEvent = jest.fn();
 
-const mockInitElement = () => {
+const mockInitElement = jest.fn(() => {
   const element = document.createElement('div');
   element.appendChild(document.createTextNode('Widget'));
   return element;
-};
+});
 
 jest.mock('../../../utils/config', () => ({
   initSettings: mockInitSettings,
   initStyleSheet: mockInitStyleSheet,
-  initScript: () => new Promise(resolve => resolve({})),
+  initScript: mockInitScript,
   initElement: mockInitElement,
   initComponent: mockInitComponent
 }));
 
+jest.mock('../../../utils/emitEvent', () => ({
+  emitEvent: mockEmitEvent
+}));
+
 import { OptaFootballSummary } from '../OptaFootballSummary';
 
 const requiredProps = {
@@ -38,37 +42,142 @@ const requiredProps = {
 describe('OptaFootballSummary', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    mockInitScript.mockResolvedValue({});
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    document.body.innerHTML = '';
   });
 
   it('should render correctly', async () => {
-    const { asFragment } = render(<OptaFootballSummary {...requiredProps} />);
+    const { asFragment, getByRole } = render(
+      <OptaFootballSummary {...requiredProps} />
+    );
 
-    act(() => {
-      mockInitComponent();
-      mockHasMatchEvents();
+    await waitFor(() => {
+      expect(mockInitSettings).toHaveBeenCalledTimes(1);
     });
 
-    expect(mockInitSettings).toHaveBeenCalledTimes(1);
-    expect(mockInitStyleSheet).toHaveBeenCalledTimes(1);
+    expect(mockInitStyleSheet).toHaveBeenCalledWith('football');
     expect(mockInitComponent).toHaveBeenCalledTimes(1);
+    expect(getByRole('button')).toBeInTheDocument();
 
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it('should disable the button initially', () => {
+  it('should enable the button initially', () => {
     const { getByRole } = render(<OptaFootballSummary {...requiredProps} />);
     const button = getByRole('button');
     expect(button).not.toBeDisabled();
   });
 
-  it('should toggle details when button is clicked', () => {
+  it('should toggle details when button is clicked', async () => {
     const { getByRole } = render(<OptaFootballSummary {...requiredProps} />);
     const button = getByRole('button');
 
     expect(button).toHaveTextContent('Show Details');
-    fireEvent.click(button);
-    expect(button).toHaveTextContent('Hide Details');
-    fireEvent.click(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)
+        );
+      });
+    });
   });
 });

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

@@ -7,17 +7,16 @@ 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,6 +13,7 @@ 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;
@@ -33,6 +34,7 @@ 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);
 
@@ -73,6 +75,16 @@ export const OptaRugbySummary: React.FC<{
         });
     }, []);
 
+    useEffect(
+      () => {
+        const height = containerRef.current
+          ? containerRef.current.offsetHeight
+          : 0;
+        emitEvent('updateHeight', height);
+      },
+      [showDetails]
+    );
+
     return (
       <Container
         fullWidth={full_width}
@@ -80,6 +92,7 @@ export const OptaRugbySummary: React.FC<{
         heightMd={heightMd}
         heightLg={heightLg}
         hasPadding
+        ref={containerRef}
       >
         <WidgetContainer ref={ref} showDetails={showDetails} />