[tests] Allow to test arguments passed to i18n

Why:
 - To facilitate functional testing of components
displaying translated text with relevants arguments.
eg: username, gender, counters, etc.

What:
- Add the same mock for Vue global property $i18n and
i18n provider which are added by MW's core
- Update snapshot tests which will contain now the
arguments the function was called with

Change-Id: I175e0132f7e8d73928f51097910458c463a4a7ca

jest.setup.js

@@ -1,14 +1,38 @@
 /* global jest:false */
 'use strict';
 const { config } = require( '@vue/test-utils' );
-// Mock Vue plugins in test suites
-config.global.mocks = {
-	$i18n: ( str ) => {
-		return {
-			text: () => str,
-			parse: () => str
-		};
+
+/**
+ * Mock for the calls to MW core's i18n plugin which returns
+ * a mw.Message object.
+ *
+ * @param {string} key The text key to parse
+ * @param {...*} args Arbitrary number of arguments to be parsed
+ * @return {mw.growthTests.MwMessageInterface}
+ */
+function $i18nMock( key, ...args ) {
+	function serializeArgs() {
+		return args.length ? `${key}:[${args.join( ',' )}]` : key;
 	}
+	/**
+	 * mw.Message-like object with .text() and .parse() method
+	 *
+	 * @typedef {Object} mw.growthTests.MwMessageInterface
+	 *
+	 * @property {Function} text parses the given banana message
+	 * @property {Function} parse parses the given banana message (without html support)
+	 */
+	return {
+		text: () => serializeArgs(),
+		parse: () => serializeArgs()
+	};
+}
+// Mock Vue plugins in test suites
+config.global.provide = {
+	i18n: $i18nMock
+};
+config.global.mocks = {
+	$i18n: $i18nMock
 };
 config.global.directives = {
 	'i18n-html': ( el, binding ) => {

modules/ext.growthExperiments.Homepage.NewImpact/components/__snapshots__/ErrorDisplay.test.js.snap

@@ -12,7 +12,7 @@ exports[`ErrorDisplay displays appropriate text when disabled ( third person: fa
       class="ext-growthExperiments-CText ext-growthExperiments-CText--weight-bold"
     >
       
-      growthexperiments-homepage-impact-error-data-not-found-text
+      growthexperiments-homepage-impact-error-data-not-found-text:[Alice]
       
     </h3>
     <div
@@ -22,7 +22,7 @@ exports[`ErrorDisplay displays appropriate text when disabled ( third person: fa
       class="ext-growthExperiments-CText ext-growthExperiments-CText--color-subtle ext-growthExperiments-ErrorDisplay__subtext"
     >
       
-      growthexperiments-homepage-impact-error-data-not-found-subtext
+      growthexperiments-homepage-impact-error-data-not-found-subtext:[Alice]
       
     </div>
   </div>

modules/ext.growthExperiments.MentorDashboard/components/MenteeOverview/__snapshots__/MenteeFiltersForm.test.js.snap

@@ -65,7 +65,7 @@ exports[`MenteeFiltersForm it should localise numbers in the recent edits 1`] =
       >
         
         <button
-          alt="growthexperiments-mentor-dashboard-mentee-overview-add-filter-active-days-ago-days-title"
+          alt="growthexperiments-mentor-dashboard-mentee-overview-add-filter-active-days-ago-days-title:[1,localised-1]"
           class="cdx-button cdx-button--action-default cdx-button--weight-normal cdx-button--size-medium cdx-button--framed"
         >
           
@@ -73,7 +73,7 @@ exports[`MenteeFiltersForm it should localise numbers in the recent edits 1`] =
           
         </button>
         <button
-          alt="growthexperiments-mentor-dashboard-mentee-overview-add-filter-active-days-ago-days-title"
+          alt="growthexperiments-mentor-dashboard-mentee-overview-add-filter-active-days-ago-days-title:[7,localised-7]"
           class="cdx-button cdx-button--action-default cdx-button--weight-normal cdx-button--size-medium cdx-button--framed"
         >
           
@@ -81,7 +81,7 @@ exports[`MenteeFiltersForm it should localise numbers in the recent edits 1`] =
           
         </button>
         <button
-          alt="growthexperiments-mentor-dashboard-mentee-overview-add-filter-active-days-ago-days-title"
+          alt="growthexperiments-mentor-dashboard-mentee-overview-add-filter-active-days-ago-days-title:[14,localised-14]"
           class="cdx-button cdx-button--action-default cdx-button--weight-normal cdx-button--size-medium cdx-button--framed"
         >
           
@@ -102,7 +102,7 @@ exports[`MenteeFiltersForm it should localise numbers in the recent edits 1`] =
       >
         
         <button
-          alt="growthexperiments-mentor-dashboard-mentee-overview-add-filter-active-months-ago-days-title"
+          alt="growthexperiments-mentor-dashboard-mentee-overview-add-filter-active-months-ago-days-title:[1,localised-1]"
           class="cdx-button cdx-button--action-default cdx-button--weight-normal cdx-button--size-medium cdx-button--framed"
         >
           
@@ -110,7 +110,7 @@ exports[`MenteeFiltersForm it should localise numbers in the recent edits 1`] =
           
         </button>
         <button
-          alt="growthexperiments-mentor-dashboard-mentee-overview-add-filter-active-months-ago-days-title"
+          alt="growthexperiments-mentor-dashboard-mentee-overview-add-filter-active-months-ago-days-title:[2,localised-2]"
           class="cdx-button cdx-button--action-default cdx-button--weight-normal cdx-button--size-medium cdx-button--framed"
         >
           
@@ -118,7 +118,7 @@ exports[`MenteeFiltersForm it should localise numbers in the recent edits 1`] =
           
         </button>
         <button
-          alt="growthexperiments-mentor-dashboard-mentee-overview-add-filter-active-months-ago-days-title"
+          alt="growthexperiments-mentor-dashboard-mentee-overview-add-filter-active-months-ago-days-title:[6,localised-6]"
           class="cdx-button cdx-button--action-default cdx-button--weight-normal cdx-button--size-medium cdx-button--framed"
         >
           

modules/vue-components/__snapshots__/CScoreCards.test.js.snap

@@ -226,7 +226,7 @@ exports[`ScoreCards renders correctly with data 1`] = `
         class="ext-growthExperiments-CText ext-growthExperiments-CText--size-md ext-growthExperiments-CText--weight-bold"
       >
         
-        growthexperiments-homepage-impact-recent-activity-streak-count-text
+        growthexperiments-homepage-impact-recent-activity-streak-count-text:[1]
         
       </span>