chore: matomo tests PL-5

package.json

@@ -87,6 +87,7 @@
     "@emotion/server": "^11.10.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.1.1",
     "axe-testcafe": "^1.1.0",
     "css-loader": "^7.1.1",

src/components/Matomo/__tests__/MatomoTracker.test.js

@@ -0,0 +1,96 @@
+/* eslint-disable no-underscore-dangle */
+import MatomoTracker from '../MatomoTracker';
+import { TRACK_TYPES } from '../constants';
+
+const MOCK_URL_BASE = 'https://www.test.fi/';
+const MOCK_TRACKER_URL = 'https://www.test.fi/matomo.php';
+
+describe('MatomoTracker', () => {
+  beforeEach(() => {
+    window._paq = [];
+  });
+
+  it('should initialise window._paq', () => {
+    // eslint-disable-next-line no-new
+    new MatomoTracker({
+      urlBase: MOCK_URL_BASE,
+      siteId: 'test123',
+      srcUrl: 'test.js',
+      enabled: true,
+      configurations: {
+        foo: 'bar',
+        testArray: ['testArrayItem1', 'testArrayItem2'],
+        testNoValue: undefined,
+      },
+    });
+
+    expect(window._paq).toEqual([
+      ['setTrackerUrl', MOCK_TRACKER_URL],
+      ['setSiteId', 'test123'],
+      ['foo', 'bar'],
+      ['testArray', 'testArrayItem1', 'testArrayItem2'],
+      ['testNoValue'],
+      ['enableLinkTracking', true],
+    ]);
+  });
+
+  it('should throw error if urlBase missing', () => {
+    expect(
+      () => new MatomoTracker({ siteId: 'test123' }),
+    ).toThrowError();
+  });
+
+  it('should throw error if siteId missing', () => {
+    expect(
+      () => new MatomoTracker({
+        urlBase: 'http://www.test.fi',
+      }),
+    ).toThrowError();
+  });
+
+  it('should track page view', () => {
+    const tracker = new MatomoTracker({
+      urlBase: MOCK_URL_BASE,
+      siteId: 'test123',
+      srcUrl: 'test.js',
+      enabled: true,
+      configurations: {},
+    });
+
+    tracker.trackPageView();
+
+    expect(window._paq).toEqual([
+      ['setTrackerUrl', MOCK_TRACKER_URL],
+      ['setSiteId', 'test123'],
+      ['enableLinkTracking', true],
+      ['setCustomUrl', window.location.href],
+      ['setDocumentTitle', ''],
+      [TRACK_TYPES.TRACK_VIEW],
+    ]);
+  });
+
+  it('should track custom event', () => {
+    const tracker = new MatomoTracker({
+      urlBase: MOCK_URL_BASE,
+      siteId: 'test123',
+      srcUrl: 'test.js',
+      enabled: true,
+      configurations: {},
+    });
+
+    tracker.track({
+      data: ['event', 'click', 'button'],
+      documentTitle: 'Custom Event',
+      href: 'https://www.test.fi/custom-event',
+    });
+
+    expect(window._paq).toEqual([
+      ['setTrackerUrl', MOCK_TRACKER_URL],
+      ['setSiteId', 'test123'],
+      ['enableLinkTracking', true],
+      ['setCustomUrl', 'https://www.test.fi/custom-event'],
+      ['setDocumentTitle', 'Custom Event'],
+      ['event', 'click', 'button'],
+    ]);
+  });
+});

src/components/Matomo/__tests__/matomo-context.test.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { MatomoProvider } from '../matomo-context';
+
+describe('matomo-context', () => {
+  it('renders children with provided value', () => {
+    const value = 'test value';
+
+    const { getByText } = render(
+      <MatomoProvider value={value}>
+        <div>Test Component</div>
+      </MatomoProvider>,
+    );
+
+    expect(getByText('Test Component')).toBeInTheDocument();
+  });
+});

src/components/Matomo/hooks/__tests__/useMatomo.test.js

@@ -0,0 +1,68 @@
+import React, { useEffect } from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { render } from '@testing-library/react';
+
+import MatomoContext, { MatomoProvider } from '../../matomo-context';
+import * as MatomoTracker from '../../MatomoTracker';
+import useMatomo from '../useMatomo';
+
+const MOCK_URL = 'https://www.hel.fi';
+
+describe('useMatomo', () => {
+  it('should return trackPageView function', () => {
+    const trackPageView = jest.fn();
+    const instance = { trackPageView };
+
+    const wrapper = ({ children }) => (
+      <MatomoContext.Provider value={instance}>
+        {children}
+      </MatomoContext.Provider>
+    );
+
+    const { result } = renderHook(() => useMatomo(), { wrapper });
+
+    expect(result.current.trackPageView).toBeDefined();
+  });
+
+  function MockedComponent() {
+    const { trackPageView } = useMatomo();
+
+    useEffect(() => {
+      trackPageView({ href: MOCK_URL });
+    }, [trackPageView]);
+
+    return <div>MockedComponent</div>;
+  }
+
+  it('should trackPageView', () => {
+    const trackPageViewMock = jest.fn();
+
+    jest.spyOn(MatomoTracker, 'default').mockImplementation(() => ({
+      trackPageView: trackPageViewMock,
+    }));
+
+    // eslint-disable-next-line new-cap
+    const instance = new MatomoTracker.default({
+      urlBase: MOCK_URL,
+      siteId: 'test123',
+      srcUrl: 'test.js',
+      enabled: true,
+    });
+
+    function MockProvider() {
+      return (
+        <MatomoProvider value={instance}>
+          <MockedComponent />
+        </MatomoProvider>
+      );
+    }
+
+    expect(MatomoTracker.default).toHaveBeenCalled();
+
+    render(<MockProvider />);
+
+    expect(trackPageViewMock).toHaveBeenCalledWith({
+      href: MOCK_URL,
+    });
+  });
+});