v1.143.0

huridocs · Nov 20, 2023 · 17cfb34 · 17cfb34
2 parents 8d042c8 + 1c29dea
commit 17cfb34
Show file tree

Hide file tree

Showing 11 changed files with 508 additions and 344 deletions.
diff --git a/app/react/App/App.js b/app/react/App/App.js
@@ -15,7 +15,7 @@ import { Menu } from './Menu';
 import { AppMainContext } from './AppMainContext';
 import SiteName from './SiteName';
 import GoogleAnalytics from './GoogleAnalytics';
-import Matomo from './Matomo';
+import { Matomo } from './Matomo';
 import 'bootstrap/dist/css/bootstrap.css';
 import 'react-widgets/lib/scss/react-widgets.scss';
 import 'nprogress/nprogress.css';

diff --git a/app/react/App/Matomo.js b/app/react/App/Matomo.js
@@ -1,48 +1,44 @@
+import { useEffect } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
 
-export class Matomo extends Component {
-  render() {
-    if (!this.props.id && !this.props.url) {
-      return false;
+const MatomoComponent = ({ id, url }) => {
+  useEffect(() => {
+    if (id && url) {
+      const matomoUrl = url.replace(/\/?$/, '/');
+
+      const script = document.createElement('script');
+
+      script.innerHTML = `
+      var _paq = _paq || [];
+      _paq.push(['trackPageView']);
+      _paq.push(['enableLinkTracking']);
+      (function() {
+        var u="${matomoUrl}";
+        _paq.push(['setTrackerUrl', u+'piwik.php']);
+        _paq.push(['setSiteId', '${id}']);
+        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+        g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
+      })();`;
+
+      document.body.appendChild(script);
     }
+  }, [id, url]);
 
-    const url = this.props.url.replace(/\/?$/, '/');
-
-    return (
-      <script
-        type="text/javascript"
-        dangerouslySetInnerHTML={{
-          __html: `
-              var _paq = _paq || [];
-              _paq.push(['trackPageView']);
-              _paq.push(['enableLinkTracking']);
-              (function() {
-                var u="${url}";
-                _paq.push(['setTrackerUrl', u+'piwik.php']);
-                _paq.push(['setSiteId', '${this.props.id}']);
-                var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-                g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
-              })();
-        `,
-        }}
-      />
-    );
-  }
-}
+  return undefined;
+};
 
-Matomo.defaultProps = {
+MatomoComponent.defaultProps = {
   id: '',
   url: '',
 };
 
-Matomo.propTypes = {
+MatomoComponent.propTypes = {
   id: PropTypes.string,
   url: PropTypes.string,
 };
 
-export function mapStateToProps({ settings }) {
+function mapStateToProps({ settings }) {
   try {
     const { id, url } = JSON.parse(settings.collection.get('matomoConfig'));
     return { id, url };
@@ -51,4 +47,6 @@ export function mapStateToProps({ settings }) {
   }
 }
 
-export default connect(mapStateToProps)(Matomo);
+const Matomo = connect(mapStateToProps)(MatomoComponent);
+
+export { Matomo, MatomoComponent, mapStateToProps };
diff --git a/app/react/App/specs/Matomo.spec.js b/app/react/App/specs/Matomo.spec.js
@@ -1,34 +1,47 @@
+/**
+ * @jest-environment jsdom
+ */
+
 import Immutable from 'immutable';
 import React from 'react';
-
-import { shallow } from 'enzyme';
-
-import { mapStateToProps, Matomo } from '../Matomo';
+import { mount } from 'enzyme';
+import { mapStateToProps, MatomoComponent } from '../Matomo';
 
 describe('Matomo', () => {
-  let props;
-  beforeEach(() => {
-    props = {
-      url: 'url/',
-      id: 'id',
-    };
+  it.each`
+    url       | id
+    ${'url/'} | ${'id1'}
+    ${'url'}  | ${'id2'}
+  `('should include matomo script when url and id are set', ({ url, id }) => {
+    window._paq = undefined;
+
+    mount(<MatomoComponent url={url} id={id} />);
+    expect(window._paq).toEqual([
+      ['trackPageView'],
+      ['enableLinkTracking'],
+      ['setTrackerUrl', 'url/piwik.php'],
+      ['setSiteId', id],
+    ]);
   });
 
-  it('should include matomo script when url and id are set', () => {
-    const component = shallow(<Matomo {...props} />);
-    expect(component).toMatchSnapshot();
-  });
+  it('should not include script when id or url are not set', () => {
+    window._paq = undefined;
 
-  it('should add "/" at the end of url when not set', () => {
-    props.url = 'url';
-    const component = shallow(<Matomo {...props} />);
-    expect(component).toMatchSnapshot();
+    mount(<MatomoComponent />);
+    expect(window._paq).toEqual(undefined);
   });
 
-  it('should not include script when id or url are not set', () => {
-    props = {};
-    const component = shallow(<Matomo {...props} />);
-    expect(component).toMatchSnapshot();
+  it('should not pollute existing keys in the window object', () => {
+    window._paq = [['googleTracker', 'idForTracker']];
+
+    mount(<MatomoComponent url="url/" id="id" />);
+    expect(window._paq).toEqual([
+      ['googleTracker', 'idForTracker'],
+      ['trackPageView'],
+      ['enableLinkTracking'],
+      ['setTrackerUrl', 'url/piwik.php'],
+      ['setSiteId', 'id'],
+    ]);
   });
 
   describe('mapStateToProps', () => {

diff --git a/app/react/App/specs/__snapshots__/Matomo.spec.js.snap b/app/react/App/specs/__snapshots__/Matomo.spec.js.snap