jest: Fail on Vue and other warnings

If console.warn/console.error are invoked, fail the test. This is useful
for catching Vue warnings before they're merged.

Fix various warnings triggered by tests.

Bug: T323252
Change-Id: I1c0064f8dd1fcd050049df2811eafbec63f09717

Author: kostajh

jest.config.js

@@ -39,5 +39,8 @@ module.exports = {
 	],
 	setupFiles: [
 		'./jest.setup.js'
+	],
+	setupFilesAfterEnv: [
+		'./jest.setupAfterEnv.js'
 	]
 };

jest.setupAfterEnv.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const failOnConsole = require( 'jest-fail-on-console' );
+
+failOnConsole();

modules/ext.growthExperiments.Homepage.NewImpact/components/NewImpactVue.test.js

@@ -108,7 +108,8 @@ describe( 'NewImpactVue', () => {
 			global: {
 				provide: {
 					RENDER_MODE: 'desktop',
-					RELEVANT_USER_USERNAME: 'Alice'
+					RELEVANT_USER_USERNAME: 'Alice',
+					$log: jest.fn()
 				},
 				mocks: {
 					$filters: {

modules/ext.growthExperiments.Homepage.NewImpact/components/NoEditsDisplay.test.js

@@ -33,15 +33,15 @@ describe( 'NoEditsDisplay', () => {
 		'overlay-summary'
 	];
 	for ( const mode of modes ) {
-		it( `displays appropiate text when disabled (${mode})`, () => {
+		it( `displays appropriate text when disabled (${mode})`, () => {
 			const wrapper = renderComponent( {
 				userName: 'Alice',
 				isDisabled: true
 			}, mode );
 
 			expect( wrapper.element ).toMatchSnapshot();
 		} );
-		it( `displays appropiate text when activated (${mode})`, () => {
+		it( `displays appropriate text when activated (${mode})`, () => {
 			const wrapper = renderComponent( {
 				userName: 'Alice',
 				isActivated: true

modules/ext.growthExperiments.Homepage.NewImpact/components/NoEditsDisplay.vue

@@ -101,10 +101,10 @@ module.exports = exports = {
 	},
 	computed: {
 		subtextFontWeight() {
-			return this.renderMode !== 'overlay-summary' && 'bold';
+			return this.renderMode !== 'overlay-summary' ? 'bold' : null;
 		},
 		footerFontSize() {
-			return this.renderMode !== 'desktop' && 'sm';
+			return this.renderMode !== 'desktop' ? 'sm' : null;
 		}
 	}
 };

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NoEditsDisplay displays appropiate text when activated (desktop) 1`] = `
+exports[`NoEditsDisplay displays appropriate text when activated (desktop) 1`] = `
 <div
   class="ext-growthExperiments-NoEditsDisplay--desktop"
 >
@@ -40,7 +40,7 @@ exports[`NoEditsDisplay displays appropiate text when activated (desktop) 1`] =
 </div>
 `;
 
-exports[`NoEditsDisplay displays appropiate text when activated (overlay) 1`] = `
+exports[`NoEditsDisplay displays appropriate text when activated (overlay) 1`] = `
 <div
   class="ext-growthExperiments-NoEditsDisplay--overlay"
 >
@@ -89,7 +89,7 @@ exports[`NoEditsDisplay displays appropiate text when activated (overlay) 1`] =
 </div>
 `;
 
-exports[`NoEditsDisplay displays appropiate text when activated (overlay-summary) 1`] = `
+exports[`NoEditsDisplay displays appropriate text when activated (overlay-summary) 1`] = `
 <div
   class="ext-growthExperiments-NoEditsDisplay--overlay-summary"
 >
@@ -129,7 +129,7 @@ exports[`NoEditsDisplay displays appropiate text when activated (overlay-summary
 </div>
 `;
 
-exports[`NoEditsDisplay displays appropiate text when disabled (desktop) 1`] = `
+exports[`NoEditsDisplay displays appropriate text when disabled (desktop) 1`] = `
 <div
   class="ext-growthExperiments-NoEditsDisplay--desktop"
 >
@@ -171,7 +171,7 @@ exports[`NoEditsDisplay displays appropiate text when disabled (desktop) 1`] = `
 </div>
 `;
 
-exports[`NoEditsDisplay displays appropiate text when disabled (overlay) 1`] = `
+exports[`NoEditsDisplay displays appropriate text when disabled (overlay) 1`] = `
 <div
   class="ext-growthExperiments-NoEditsDisplay--overlay"
 >
@@ -213,7 +213,7 @@ exports[`NoEditsDisplay displays appropiate text when disabled (overlay) 1`] = `
 </div>
 `;
 
-exports[`NoEditsDisplay displays appropiate text when disabled (overlay-summary) 1`] = `
+exports[`NoEditsDisplay displays appropriate text when disabled (overlay-summary) 1`] = `
 <div
   class="ext-growthExperiments-NoEditsDisplay--overlay-summary"
 >

modules/ext.growthExperiments.MentorDashboard/components/MenteeOverview/MenteeFiltersForm.vue

@@ -83,7 +83,8 @@
 			<cdx-button
 				class="ext-growthExperiments-utils__pull-right"
 				form="mentee-filters-form"
-				type="submit">
+				type="primary"
+			>
 				{{
 					$i18n( 'growthexperiments-mentor-dashboard-mentee-overview-add-filter-submit' ).text()
 				}}

modules/ext.growthExperiments.MentorDashboard/components/MenteeOverview/MenteeOverview.test.js

@@ -1,4 +1,6 @@
-jest.mock( '../icons.json', () => ( {} ), { virtual: true } );
+jest.mock( '../icons.json', () => ( {
+	cdxIconError: ''
+} ), { virtual: true } );
 const { shallowMount } = require( '@vue/test-utils' );
 const Vuex = require( 'vuex' );
 const MenteeOverview = require( './MenteeOverview.vue' );

modules/ext.growthExperiments.MentorDashboard/components/MenteeOverview/NoResults.vue

@@ -16,6 +16,7 @@
 
 <script>
 const { CdxIcon } = require( '@wikimedia/codex' );
+const { cdxIconError } = require( '../icons.json' );
 
 // @vue/component
 module.exports = exports = {
@@ -27,7 +28,7 @@ module.exports = exports = {
 		description: { type: String, default: null },
 		iconLabel: { type: String, required: true },
 		text: { type: String, required: true },
-		icon: { type: String, required: true }
+		icon: { type: String, required: true, default: cdxIconError }
 	}
 };
 </script>

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

@@ -163,7 +163,7 @@ exports[`MenteeFiltersForm it should localise numbers in the recent edits 1`] =
     class="ext-growthExperiments-MenteeFiltersForm__form-group ext-growthExperiments-MenteeFiltersForm__form-actions"
   >
     <button
-      class="cdx-button cdx-button--action-default cdx-button--type-submit cdx-button--framed ext-growthExperiments-utils__pull-right"
+      class="cdx-button cdx-button--action-default cdx-button--type-primary cdx-button--framed ext-growthExperiments-utils__pull-right"
       form="mentee-filters-form"
     >