[Vue] migrate piwik service and test (#18106)

10 files changed, 275 insertions, 13 deletions

diff --git a/plugins/CoreHome/vue/src/Periods/Periods.adapter.ts b/plugins/CoreHome/vue/src/Periods/Periods.adapter.ts
index b81b16242b..4d9e6820f9 100644
--- a/plugins/CoreHome/vue/src/Periods/Periods.adapter.ts
+++ b/plugins/CoreHome/vue/src/Periods/Periods.adapter.ts
@@ -9,7 +9,7 @@ import Periods from './Periods';
 import RangePeriod from './Range';
 import { parseDate, format, todayIsInRange } from './utilities';
 
-piwik.addCustomPeriod = Periods.addCustomPeriod.bind(Periods);
+window.piwik.addCustomPeriod = Periods.addCustomPeriod.bind(Periods);
 
 function piwikPeriods() {
   return {
diff --git a/plugins/CoreHome/vue/src/Periods/Periods.spec.ts b/plugins/CoreHome/vue/src/Periods/Periods.spec.ts
index 5698f88423..7ff6c637a4 100644
--- a/plugins/CoreHome/vue/src/Periods/Periods.spec.ts
+++ b/plugins/CoreHome/vue/src/Periods/Periods.spec.ts
@@ -27,7 +27,7 @@ describe('CoreHome/Periods', () => {
 
   beforeEach(() => {
     originalDateNow = null;
-    piwik.timezoneOffset = 0;
+    window.piwik.timezoneOffset = 0;
   });
 
   afterEach(() => {
diff --git a/plugins/CoreHome/vue/src/Periods/index.ts b/plugins/CoreHome/vue/src/Periods/index.ts
new file mode 100644
index 0000000000..e0ec84affb
--- /dev/null
+++ b/plugins/CoreHome/vue/src/Periods/index.ts
@@ -0,0 +1,14 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+import './Periods.adapter';
+
+export { default as Periods } from './Periods';
+export { default as Day } from './Day';
+export { default as Week } from './Week';
+export { default as Month } from './Month';
+export { default as Year } from './Year';
+export { default as Range } from './Range';
diff --git a/plugins/CoreHome/vue/src/Periods/utilities.ts b/plugins/CoreHome/vue/src/Periods/utilities.ts
index dd77f5e2a0..167021fe36 100644
--- a/plugins/CoreHome/vue/src/Periods/utilities.ts
+++ b/plugins/CoreHome/vue/src/Periods/utilities.ts
@@ -16,7 +16,7 @@ export function getToday(): Date {
   date.setTime(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
 
   // apply piwik site timezone (if it exists)
-  date.setHours(date.getHours() + ((piwik.timezoneOffset || 0) / 3600));
+  date.setHours(date.getHours() + ((window.piwik.timezoneOffset || 0) / 3600));
 
   // get rid of hours/minutes/seconds/etc.
   date.setHours(0);
diff --git a/plugins/CoreHome/vue/src/Piwik/Piwik.adapter.ts b/plugins/CoreHome/vue/src/Piwik/Piwik.adapter.ts
new file mode 100644
index 0000000000..856916a248
--- /dev/null
+++ b/plugins/CoreHome/vue/src/Piwik/Piwik.adapter.ts
@@ -0,0 +1,22 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+import Piwik from './Piwik';
+
+function piwikService() {
+  return Piwik;
+}
+
+angular.module('piwikApp.service').service('piwik', piwikService);
+
+function initPiwikService(piwik, $rootScope) {
+  $rootScope.$on('$locationChangeSuccess', piwik.updatePeriodParamsFromUrl);
+}
+
+initPiwikService.$inject = ['piwik', '$rootScope'];
+
+angular.module('piwikApp.service').run(initPiwikService);
diff --git a/plugins/CoreHome/vue/src/Piwik/Piwik.spec.ts b/plugins/CoreHome/vue/src/Piwik/Piwik.spec.ts
new file mode 100644
index 0000000000..a07c5d3490
--- /dev/null
+++ b/plugins/CoreHome/vue/src/Piwik/Piwik.spec.ts
@@ -0,0 +1,152 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+import Piwik from './Piwik';
+import '../Periods/Day';
+import '../Periods/Week';
+import '../Periods/Month';
+import '../Periods/Year';
+import '../Periods/Range';
+
+describe('PiwikService', () => {
+  describe('#updatePeriodParamsFromUrl()', () => {
+    const DATE_PERIODS_TO_TEST = [
+      {
+        date: '2012-01-02',
+        period: 'day',
+        expected: {
+          currentDateString: '2012-01-02',
+          period: 'day',
+          startDateString: '2012-01-02',
+          endDateString: '2012-01-02'
+        }
+      },
+      {
+        date: '2012-01-02',
+        period: 'week',
+        expected: {
+          currentDateString: '2012-01-02',
+          period: 'week',
+          startDateString: '2012-01-02',
+          endDateString: '2012-01-08'
+        }
+      },
+      {
+        date: '2012-01-02',
+        period: 'month',
+        expected: {
+          currentDateString: '2012-01-02',
+          period: 'month',
+          startDateString: '2012-01-01',
+          endDateString: '2012-01-31'
+        }
+      },
+      {
+        date: '2012-01-02',
+        period: 'year',
+        expected: {
+          currentDateString: '2012-01-02',
+          period: 'year',
+          startDateString: '2012-01-01',
+          endDateString: '2012-12-31'
+        }
+      },
+      {
+        date: '2012-01-02,2012-02-03',
+        period: 'range',
+        expected: {
+          currentDateString: '2012-01-02,2012-02-03',
+          period: 'range',
+          startDateString: '2012-01-02',
+          endDateString: '2012-02-03'
+        }
+      },
+      // invalid
+      {
+        date: '2012-01-02',
+        period: 'range',
+        expected: {
+          currentDateString: undefined,
+          period: undefined,
+          startDateString: undefined,
+          endDateString: undefined
+        }
+      },
+      {
+        date: 'sldfjkdslkfj',
+        period: 'month',
+        expected: {
+          currentDateString: undefined,
+          period: undefined,
+          startDateString: undefined,
+          endDateString: undefined
+        }
+      },
+      {
+        date: '2012-01-02',
+        period: 'sflkjdslkfj',
+        expected: {
+          currentDateString: undefined,
+          period: undefined,
+          startDateString: undefined,
+          endDateString: undefined
+        }
+      }
+    ];
+
+    DATE_PERIODS_TO_TEST.forEach((test) => {
+      const date = test.date,
+        period = test.period,
+        expected = test.expected;
+
+      it(`should parse the period in the URL correctly when date=${date} and period=${period}`, () => {
+        delete Piwik.currentDateString;
+        delete Piwik.period;
+        delete Piwik.startDateString;
+        delete Piwik.endDateString;
+
+        history.pushState(null, '', '?date=' + date + '&period=' + period);
+
+        Piwik.updatePeriodParamsFromUrl();
+
+        expect(Piwik.currentDateString).toEqual(expected.currentDateString);
+        expect(Piwik.period).toEqual(expected.period);
+        expect(Piwik.startDateString).toEqual(expected.startDateString);
+        expect(Piwik.endDateString).toEqual(expected.endDateString);
+      });
+
+      it('should parse the period in the URL hash correctly when date=' + date + ' and period=' + period, () => {
+        delete Piwik.currentDateString;
+        delete Piwik.period;
+        delete Piwik.startDateString;
+        delete Piwik.endDateString;
+
+        history.pushState(null, '', '?someparam=somevalue#?date=' + date + '&period=' + period);
+
+        Piwik.updatePeriodParamsFromUrl();
+
+        expect(Piwik.currentDateString).toEqual(expected.currentDateString);
+        expect(Piwik.period).toEqual(expected.period);
+        expect(Piwik.startDateString).toEqual(expected.startDateString);
+        expect(Piwik.endDateString).toEqual(expected.endDateString);
+      });
+    });
+
+    it('should not change object values if the current date/period is the same as the URL date/period', () => {
+      Piwik.period = 'range';
+      Piwik.currentDateString = '2012-01-01,2012-01-02';
+      Piwik.startDateString = 'shouldnotchange';
+      Piwik.endDateString = 'shouldnotchangeeither';
+
+      history.pushState(null, '', '?someparam=somevalue#?date=' + Piwik.currentDateString + '&period=' + Piwik.period);
+
+      Piwik.updatePeriodParamsFromUrl();
+
+      expect(Piwik.startDateString).toEqual('shouldnotchange');
+      expect(Piwik.endDateString).toEqual('shouldnotchangeeither');
+    });
+  });
+});
diff --git a/plugins/CoreHome/vue/src/Piwik/Piwik.ts b/plugins/CoreHome/vue/src/Piwik/Piwik.ts
new file mode 100644
index 0000000000..084dd53a1d
--- /dev/null
+++ b/plugins/CoreHome/vue/src/Piwik/Piwik.ts
@@ -0,0 +1,78 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+import PiwikUrl from '../PiwikUrl/PiwikUrl';
+import Periods from '../Periods/Periods';
+import { format } from '../Periods/utilities';
+
+let originalTitle: string;
+
+const { piwik, broadcast, piwikHelper } = window;
+
+piwik.helper = piwikHelper;
+piwik.broadcast = broadcast;
+
+function isValidPeriod(periodStr: string, dateStr: string) {
+  try {
+    Periods.parse(periodStr, dateStr);
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+piwik.updatePeriodParamsFromUrl = function updatePeriodParamsFromUrl() {
+  let date = PiwikUrl.getSearchParam('date');
+  const period = PiwikUrl.getSearchParam('period');
+  if (!isValidPeriod(period, date)) {
+    // invalid data in URL
+    return;
+  }
+
+  if (piwik.period === period && piwik.currentDateString === date) {
+    // this period / date is already loaded
+    return;
+  }
+
+  piwik.period = period;
+
+  const dateRange = Periods.parse(period, date).getDateRange();
+  piwik.startDateString = format(dateRange[0]);
+  piwik.endDateString = format(dateRange[1]);
+
+  piwik.updateDateInTitle(date, period);
+
+  // do not set anything to previousN/lastN, as it's more useful to plugins
+  // to have the dates than previousN/lastN.
+  if (piwik.period === 'range') {
+    date = `${piwik.startDateString},${piwik.endDateString}`;
+  }
+
+  piwik.currentDateString = date;
+};
+
+piwik.updateDateInTitle = function updateDateInTitle(date: string, period: string) {
+  if (!$('.top_controls #periodString').length) {
+    return;
+  }
+
+  // Cache server-rendered page title
+  originalTitle = originalTitle || document.title;
+
+  if (originalTitle.indexOf(piwik.siteName) === 0) {
+    const dateString = ` - ${Periods.parse(period, date).getPrettyString()} `;
+    document.title = `${piwik.siteName}${dateString}${originalTitle.substr(piwik.siteName.length)}`;
+  }
+};
+
+piwik.hasUserCapability = function hasUserCapability(capability: string) {
+  return window.angular.isArray(piwik.userCapabilities)
+    && piwik.userCapabilities.indexOf(capability) !== -1;
+};
+
+const Piwik = piwik;
+export default Piwik;
diff --git a/plugins/CoreHome/vue/src/PiwikUrl/PiwikUrl.ts b/plugins/CoreHome/vue/src/PiwikUrl/PiwikUrl.ts
index 23606fa076..83ab1f68b2 100644
--- a/plugins/CoreHome/vue/src/PiwikUrl/PiwikUrl.ts
+++ b/plugins/CoreHome/vue/src/PiwikUrl/PiwikUrl.ts
@@ -15,7 +15,7 @@ const PiwikUrl = {
 
     const regex = new RegExp(`${paramName}(\\[]|=)`);
     if (hash && hash[1] && regex.test(decodeURIComponent(hash[1]))) {
-      const valueFromHash = broadcast.getValueFromHash(paramName, window.location.href);
+      const valueFromHash = window.broadcast.getValueFromHash(paramName, window.location.href);
 
       // for date, period and idsite fall back to parameter from url, if non in hash was provided
       if (valueFromHash
@@ -25,7 +25,7 @@ const PiwikUrl = {
       }
     }
 
-    return broadcast.getValueFromUrl(paramName, window.location.search);
+    return window.broadcast.getValueFromUrl(paramName, window.location.search);
   },
 };
 
diff --git a/plugins/CoreHome/vue/src/index.ts b/plugins/CoreHome/vue/src/index.ts
index 5d795d3abe..97d056019f 100644
--- a/plugins/CoreHome/vue/src/index.ts
+++ b/plugins/CoreHome/vue/src/index.ts
@@ -5,19 +5,15 @@
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
  */
 
-import './Periods/Day';
-import './Periods/Week';
-import './Periods/Month';
-import './Periods/Year';
-import './Periods/Range';
-import './Periods/Periods.adapter';
 import './AjaxHelper/AjaxHelper.adapter';
 import './PiwikUrl/PiwikUrl.adapter';
+import './Piwik/Piwik.adapter';
 
 export { default as activityIndicatorAdapter } from './ActivityIndicator/ActivityIndicator.adapter';
 export { default as ActivityIndicator } from './ActivityIndicator/ActivityIndicator.vue';
 export { default as translate } from './translate';
 export { default as alertAdapter } from './Alert/Alert.adapter';
-export { default as Periods } from './Periods/Periods';
 export { default as AjaxHelper } from './AjaxHelper/AjaxHelper';
 export { default as PiwikUrl } from './PiwikUrl/PiwikUrl';
+export { default as Piwik } from './Piwik/Piwik';
+export * from './Periods';
diff --git a/plugins/CoreHome/vue/src/translate.ts b/plugins/CoreHome/vue/src/translate.ts
index cb233f6acd..0f543432de 100644
--- a/plugins/CoreHome/vue/src/translate.ts
+++ b/plugins/CoreHome/vue/src/translate.ts
@@ -6,5 +6,5 @@
  */
 
 export default function translate(translationStringId: string, values: string[] = []): string {
-  return _pk_translate(translationStringId, values);
+  return window._pk_translate(translationStringId, values); // eslint-disable-line
 }