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

package/src/components/opta/rugby/summary/__tests__/OptaRugbySummary.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 { OptaRugbySummary } from '../OptaRugbySummary';
 
 const requiredProps = {
@@ -34,22 +38,30 @@ 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 } = render(<OptaRugbySummary {...requiredProps} />);
+    const { asFragment, getByRole } = render(
+      <OptaRugbySummary {...requiredProps} />
+    );
 
-    act(() => {
-      mockInitComponent();
-      mockHasMatchEvents();
+    await waitFor(() => {
+      expect(mockInitSettings).toHaveBeenCalledTimes(1);
     });
 
-    expect(mockInitSettings).toHaveBeenCalledTimes(1);
-    expect(mockInitStyleSheet).toHaveBeenCalledTimes(1);
+    expect(mockInitStyleSheet).toHaveBeenCalledWith('rugby');
     expect(mockInitComponent).toHaveBeenCalledTimes(1);
+    expect(getByRole('button')).toBeInTheDocument();
 
     expect(asFragment()).toMatchSnapshot();
   });
@@ -60,14 +72,112 @@ describe('OptaRugbySummary', () => {
     expect(button).not.toBeDisabled();
   });
 
-  it('should toggle details when button is clicked', () => {
+  it('should toggle details when button is clicked', async () => {
     const { getByRole } = render(<OptaRugbySummary {...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(<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)
+        );
+      });
+    });
   });
 });

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

@@ -7,17 +7,16 @@ 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/opta/utils/__tests__/emitEvent.test.tsx

@@ -0,0 +1,415 @@
+import { emitEvent } from '../emitEvent';
+
+describe('emitEvent', () => {
+  let mockPostMessage: jest.Mock;
+
+  beforeEach(() => {
+    mockPostMessage = jest.fn();
+
+    // Mock window.parent with postMessage
+    Object.defineProperty(window, 'parent', {
+      value: {
+        postMessage: mockPostMessage
+      },
+      writable: true,
+      configurable: true
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    jest.restoreAllMocks();
+  });
+
+  describe('basic functionality', () => {
+    it('should call window.parent.postMessage with event name', () => {
+      emitEvent('updateHeight');
+
+      expect(mockPostMessage).toHaveBeenCalledTimes(1);
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        {
+          type: 'updateHeight',
+          payload: null
+        },
+        '*'
+      );
+    });
+
+    it('should send event name as type property', () => {
+      emitEvent('customEvent');
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'customEvent'
+        }),
+        '*'
+      );
+    });
+
+    it('should send wildcard origin for cross-origin communication', () => {
+      emitEvent('testEvent');
+
+      const callArgs = mockPostMessage.mock.calls[0];
+      expect(callArgs[1]).toBe('*');
+    });
+  });
+
+  describe('data handling', () => {
+    it('should append px to numeric data', () => {
+      emitEvent('updateHeight', 500);
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        {
+          type: 'updateHeight',
+          payload: '500px'
+        },
+        '*'
+      );
+    });
+
+    it('should handle string data', () => {
+      emitEvent('updateContent', 'test-data');
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        {
+          type: 'updateContent',
+          payload: 'test-datapx'
+        },
+        '*'
+      );
+    });
+
+    it('should handle boolean data', () => {
+      emitEvent('toggleState', true);
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        {
+          type: 'toggleState',
+          payload: 'truepx'
+        },
+        '*'
+      );
+    });
+
+    it('should handle object data', () => {
+      const data = { width: 100, height: 200 };
+      emitEvent('updateDimensions', data);
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        {
+          type: 'updateDimensions',
+          payload: '[object Object]px'
+        },
+        '*'
+      );
+    });
+
+    it('should handle array data', () => {
+      const data = [1, 2, 3];
+      emitEvent('updateArray', data);
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        {
+          type: 'updateArray',
+          payload: '1,2,3px'
+        },
+        '*'
+      );
+    });
+
+    it('should set payload to null when data is undefined', () => {
+      emitEvent('testEvent', undefined);
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        {
+          type: 'testEvent',
+          payload: null
+        },
+        '*'
+      );
+    });
+
+    it('should set payload to null when no data is provided', () => {
+      emitEvent('testEvent');
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        {
+          type: 'testEvent',
+          payload: null
+        },
+        '*'
+      );
+    });
+  });
+
+  describe('window safety', () => {
+    it('should not throw error when window.parent is undefined', () => {
+      Object.defineProperty(window, 'parent', {
+        value: undefined,
+        writable: true,
+        configurable: true
+      });
+
+      expect(() => {
+        emitEvent('testEvent');
+      }).not.toThrow();
+    });
+
+    it('should not call postMessage when window.parent is null', () => {
+      Object.defineProperty(window, 'parent', {
+        value: null,
+        writable: true,
+        configurable: true
+      });
+
+      emitEvent('testEvent');
+
+      expect(mockPostMessage).not.toHaveBeenCalled();
+    });
+
+    it('should not call postMessage when window.parent does not exist', () => {
+      const newMockPostMessage = jest.fn();
+
+      Object.defineProperty(window, 'parent', {
+        value: {
+          postMessage: newMockPostMessage
+        },
+        writable: true,
+        configurable: true
+      });
+
+      // Create a scenario where window.parent is falsy
+      Object.defineProperty(window, 'parent', {
+        value: false,
+        writable: true,
+        configurable: true
+      });
+
+      emitEvent('testEvent');
+
+      expect(newMockPostMessage).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('event name variations', () => {
+    it('should handle event names with underscores', () => {
+      emitEvent('update_height');
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'update_height'
+        }),
+        '*'
+      );
+    });
+
+    it('should handle event names with camelCase', () => {
+      emitEvent('updateHeight');
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'updateHeight'
+        }),
+        '*'
+      );
+    });
+
+    it('should handle event names with hyphens', () => {
+      emitEvent('update-height');
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'update-height'
+        }),
+        '*'
+      );
+    });
+
+    it('should handle event names in uppercase', () => {
+      emitEvent('UPDATE_HEIGHT');
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'UPDATE_HEIGHT'
+        }),
+        '*'
+      );
+    });
+
+    it('should handle empty string as event name', () => {
+      emitEvent('');
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: ''
+        }),
+        '*'
+      );
+    });
+
+    it('should handle very long event names', () => {
+      const longEventName = 'a'.repeat(1000);
+      emitEvent(longEventName);
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: longEventName
+        }),
+        '*'
+      );
+    });
+  });
+
+  describe('multiple calls', () => {
+    it('should handle multiple sequential events', () => {
+      emitEvent('event1');
+      emitEvent('event2', 100);
+      emitEvent('event3');
+
+      expect(mockPostMessage).toHaveBeenCalledTimes(3);
+
+      expect(mockPostMessage).toHaveBeenNthCalledWith(
+        1,
+        {
+          type: 'event1',
+          payload: null
+        },
+        '*'
+      );
+
+      expect(mockPostMessage).toHaveBeenNthCalledWith(
+        2,
+        {
+          type: 'event2',
+          payload: '100px'
+        },
+        '*'
+      );
+
+      expect(mockPostMessage).toHaveBeenNthCalledWith(
+        3,
+        {
+          type: 'event3',
+          payload: null
+        },
+        '*'
+      );
+    });
+
+    it('should handle rapid successive calls', () => {
+      for (let i = 0; i < 10; i++) {
+        emitEvent(`event${i}`, i * 100);
+      }
+
+      expect(mockPostMessage).toHaveBeenCalledTimes(10);
+    });
+  });
+
+  describe('real-world use cases', () => {
+    it('should emit updateHeight event for cricket scorecard', () => {
+      emitEvent('updateHeight', 500);
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        {
+          type: 'updateHeight',
+          payload: '500px'
+        },
+        '*'
+      );
+    });
+
+    it('should emit enableButton event for match events', () => {
+      emitEvent('enableButton');
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        {
+          type: 'enableButton',
+          payload: null
+        },
+        '*'
+      );
+    });
+
+    it('should emit custom widget ready event', () => {
+      emitEvent('widgetReady', 200);
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        {
+          type: 'widgetReady',
+          payload: '200px'
+        },
+        '*'
+      );
+    });
+
+    it('should emit multiple events in sequence for complex workflows', () => {
+      emitEvent('initStart');
+      emitEvent('updateHeight', 400);
+      emitEvent('contentLoaded');
+      emitEvent('updateHeight', 600);
+
+      expect(mockPostMessage).toHaveBeenCalledTimes(4);
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle negative numbers', () => {
+      emitEvent('updateHeight', -100);
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        {
+          type: 'updateHeight',
+          payload: '-100px'
+        },
+        '*'
+      );
+    });
+
+    it('should handle very large numbers', () => {
+      emitEvent('updateHeight', 999999999);
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        {
+          type: 'updateHeight',
+          payload: '999999999px'
+        },
+        '*'
+      );
+    });
+
+    it('should handle float numbers', () => {
+      emitEvent('updateHeight', 100.5);
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        {
+          type: 'updateHeight',
+          payload: '100.5px'
+        },
+        '*'
+      );
+    });
+
+    it('should handle null data (falsy)', () => {
+      emitEvent('testEvent', null as unknown);
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        {
+          type: 'testEvent',
+          payload: null
+        },
+        '*'
+      );
+    });
+
+    it('should handle special characters in event name', () => {
+      emitEvent('event@#$%');
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'event@#$%'
+        }),
+        '*'
+      );
+    });
+  });
+});

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

@@ -0,0 +1,20 @@
+export function emitEvent(eventName: string, data?: unknown): void {
+  if (typeof window !== 'undefined' && window.parent) {
+    window.parent.postMessage(
+      {
+        type: eventName,
+        payload: data ? data + 'px' : null
+      },
+      '*'
+    );
+  }
+  if (typeof window !== 'undefined' && (window as any).ReactNativeWebView) {
+    (window as any).ReactNativeWebView.postMessage(
+      {
+        type: eventName,
+        payload: data ? data + 'px' : null
+      },
+      '*'
+    );
+  }
+}

package/src/index.ts

@@ -104,8 +104,6 @@ export {
   default as ArticleHeader
 } from './components/article-header/ArticleHeader';
 
-export { TripCards } from './components/trip-cards';
-
 export {
   UpdatedTimestamp
 } from './components/updated-timestamp/UpdatedTimestamp';