Merge pull request #9840 from google/enhancement/#9595-groups-edit-scope

google · Feb 21, 2025 · 76e630c · 76e630c
2 parents 644a676 + 9a03b2a
commit 76e630c
Show file tree

Hide file tree

Showing 8 changed files with 516 additions and 436 deletions.
diff --git a/...lytics-4/components/audience-segmentation/dashboard/AudienceSegmentationSetupCTAWidget.js b/...lytics-4/components/audience-segmentation/dashboard/AudienceSegmentationSetupCTAWidget.js
@@ -104,24 +104,26 @@ function AudienceSegmentationSetupCTAWidget( { id, Notification } ) {
 
 	const { dismissItem, dismissPrompt } = useDispatch( CORE_USER );
 
+	const onSuccess = useCallback( () => {
+		invalidateResolution( 'getQueuedNotifications', [
+			viewContext,
+			NOTIFICATION_GROUPS.DEFAULT,
+		] );
+		dismissPrompt( id, {
+			expiresInSeconds: 0,
+		} );
+		// Dismiss success notification in settings.
+		dismissItem( SETTINGS_VISITOR_GROUPS_SETUP_SUCCESS_NOTIFICATION );
+	}, [ dismissItem, dismissPrompt, id, invalidateResolution, viewContext ] );
+
+	const onError = useCallback( () => {
+		setShowErrorModal( true );
+	}, [ setShowErrorModal ] );
+
 	const { apiErrors, failedAudiences, isSaving, onEnableGroups } =
 		useEnableAudienceGroup( {
-			onSuccess: () => {
-				invalidateResolution( 'getQueuedNotifications', [
-					viewContext,
-					NOTIFICATION_GROUPS.DEFAULT,
-				] );
-				dismissPrompt( id, {
-					expiresInSeconds: 0,
-				} );
-				// Dismiss success notification in settings.
-				dismissItem(
-					SETTINGS_VISITOR_GROUPS_SETUP_SUCCESS_NOTIFICATION
-				);
-			},
-			onError: () => {
-				setShowErrorModal( true );
-			},
+			onSuccess,
+			onError,
 		} );
 
 	const { clearPermissionScopeError } = useDispatch( CORE_USER );

diff --git a/...s-4/components/audience-segmentation/dashboard/AudienceSegmentationSetupCTAWidget.test.js b/...s-4/components/audience-segmentation/dashboard/AudienceSegmentationSetupCTAWidget.test.js
@@ -28,6 +28,7 @@ import {
 } from '../../../../../../../tests/js/test-utils';
 import {
 	createTestRegistry,
+	freezeFetch,
 	muteFetch,
 	provideModules,
 	provideSiteInfo,
@@ -898,6 +899,8 @@ describe( 'AudienceSegmentationSetupCTAWidget', () => {
 			it( 'should track an event when the Retry button is clicked', () => {
 				mockTrackEvent.mockClear();
 
+				freezeFetch( syncAvailableAudiencesEndpoint );
+
 				act( () => {
 					fireEvent.click(
 						getByRole( 'button', { name: /retry/i } )

diff --git a/...alytics-4/components/audience-segmentation/settings/SettingsCardVisitorGroups/SetupCTA.js b/...alytics-4/components/audience-segmentation/settings/SettingsCardVisitorGroups/SetupCTA.js
@@ -19,7 +19,7 @@
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -46,18 +46,20 @@ export default function SetupCTA() {
 
 	const { dismissNotification } = useDispatch( CORE_NOTIFICATIONS );
 
+	const onSuccess = useCallback( () => {
+		// Dismiss success notification in dashboard.
+		dismissNotification( AUDIENCE_SEGMENTATION_SETUP_SUCCESS_NOTIFICATION );
+	}, [ dismissNotification ] );
+
+	const onError = useCallback( () => {
+		setShowErrorModal( true );
+	}, [ setShowErrorModal ] );
+
 	const { apiErrors, failedAudiences, isSaving, onEnableGroups } =
 		useEnableAudienceGroup( {
 			redirectURL: global.location.href,
-			onSuccess: () => {
-				// Dismiss success notification in dashboard.
-				dismissNotification(
-					AUDIENCE_SEGMENTATION_SETUP_SUCCESS_NOTIFICATION
-				);
-			},
-			onError: () => {
-				setShowErrorModal( true );
-			},
+			onSuccess,
+			onError,
 		} );
 
 	const setupErrorCode = useSelect( ( select ) =>

diff --git a/...cs-4/components/audience-segmentation/settings/SettingsCardVisitorGroups/SetupCTA.test.js b/...cs-4/components/audience-segmentation/settings/SettingsCardVisitorGroups/SetupCTA.test.js
@@ -60,6 +60,9 @@ describe( 'SettingsCardVisitorGroups SetupCTA', () => {
 	const syncAvailableAudiencesEndpoint = new RegExp(
 		'^/google-site-kit/v1/modules/analytics-4/data/sync-audiences'
 	);
+	const syncAvailableCustomDimensionsEndpoint = new RegExp(
+		'^/google-site-kit/v1/modules/analytics-4/data/sync-custom-dimensions'
+	);
 
 	beforeEach( () => {
 		registry = createTestRegistry();
@@ -157,6 +160,9 @@ describe( 'SettingsCardVisitorGroups SetupCTA', () => {
 		);
 
 		expect( fetchMock ).toHaveFetched( syncAvailableAudiencesEndpoint );
+		expect( fetchMock ).toHaveFetched(
+			syncAvailableCustomDimensionsEndpoint
+		);
 
 		await act( waitForDefaultTimeouts );
 	} );
@@ -185,6 +191,16 @@ describe( 'SettingsCardVisitorGroups SetupCTA', () => {
 
 	describe( 'AudienceErrorModal', () => {
 		it( 'should show the OAuth error modal when the required scopes are not granted', async () => {
+			fetchMock.postOnce( syncAvailableAudiencesEndpoint, {
+				body: [],
+				status: 200,
+			} );
+
+			fetchMock.postOnce( syncAvailableCustomDimensionsEndpoint, {
+				body: [],
+				status: 200,
+			} );
+
 			provideSiteInfo( registry, {
 				setupErrorCode: 'access_denied',
 			} );
@@ -221,13 +237,13 @@ describe( 'SettingsCardVisitorGroups SetupCTA', () => {
 				);
 			} );
 
-			// Allow the `trackEvent()` promise to resolve.
-			await waitForDefaultTimeouts();
-
-			// Verify the error is an OAuth error variant.
-			expect(
-				getByText( /Analytics update failed/i )
-			).toBeInTheDocument();
+			// Wait for the error modal to be displayed.
+			await waitFor( () => {
+				// Verify the error is an OAuth error variant.
+				expect(
+					getByText( /Analytics update failed/i )
+				).toBeInTheDocument();
+			} );
 
 			// Verify the "Get help" link is displayed.
 			expect( getByText( /get help/i ) ).toBeInTheDocument();
@@ -252,7 +268,7 @@ describe( 'SettingsCardVisitorGroups SetupCTA', () => {
 				data: { reason: ERROR_REASON_INSUFFICIENT_PERMISSIONS },
 			};
 
-			fetchMock.post( syncAvailableAudiencesEndpoint, {
+			fetchMock.postOnce( syncAvailableAudiencesEndpoint, {
 				body: errorResponse,
 				status: 500,
 			} );
@@ -292,7 +308,7 @@ describe( 'SettingsCardVisitorGroups SetupCTA', () => {
 				data: { status: 500 },
 			};
 
-			fetchMock.post( syncAvailableAudiencesEndpoint, {
+			fetchMock.postOnce( syncAvailableAudiencesEndpoint, {
 				body: errorResponse,
 				status: 500,
 			} );