src/app/components/ATIAnalytics/canonical/index.test.tsx
import React from 'react';
import {
render,
act,
} from '#app/components/react-testing-library-with-providers';
import * as isOperaProxy from '#app/lib/utilities/isOperaProxy';
import * as beacon from '../../../lib/analyticsUtils/sendBeacon';
import CanonicalATIAnalytics from '.';
describe('Canonical ATI Analytics', () => {
afterEach(() => {
jest.clearAllMocks();
});
const atiBaseUrl = 'https://foobar.com?';
const mockPageviewParams = 'key=value&key2=value2&x8=[simorgh]';
const mockSendBeacon = jest.fn().mockReturnValue('beacon-return-value');
process.env.SIMORGH_ATI_BASE_URL = atiBaseUrl;
// @ts-expect-error - we need to mock these functions to ensure tests are deterministic
beacon.default = mockSendBeacon;
it('calls atiBaseURL and sendBeacon with required params', () => {
const expectedUrl = `${atiBaseUrl}${mockPageviewParams}`;
act(() => {
render(<CanonicalATIAnalytics pageviewParams={mockPageviewParams} />);
});
expect(mockSendBeacon).toHaveBeenCalledTimes(1);
expect(mockSendBeacon).toHaveBeenCalledWith(expectedUrl);
});
it('should not send beacon when browser is Opera Mini', () => {
jest.spyOn(isOperaProxy, 'default').mockImplementationOnce(() => true);
act(() => {
render(<CanonicalATIAnalytics pageviewParams={mockPageviewParams} />);
});
expect(mockSendBeacon).not.toHaveBeenCalled();
});
it('should render a noscript image for non-JS users', () => {
const { container } = render(
<CanonicalATIAnalytics pageviewParams={mockPageviewParams} />,
);
expect(container.querySelector('noscript')).toBeInTheDocument();
});
});