SEO: Record a Tracks event when Google one-click verify saves the code (#53798)

* SEO: Record a Tracks event when Google one-click verify saves the code

Google auto-verify saved the verification code through its own request,
so it never fired jetpack_seo_setting_updated, and only mirrored the code
into unsaved form state. The next verification save then re-sent the code
and recorded it late.

The settings form now saves the code for it (saveVerification), records
it like a form save (only when the code changed, or the failure event if
the save fails), and adopts it as saved in the form and the settings store.

* SEO: Keep the auto-verified Google code when a form save finishes later

saveValues adopted its whole start-of-save snapshot as the new baseline
and store state. A Google code saveVerification adopted while that save
was in flight was rolled back, so the code looked unsaved again and the
next verification save recorded it a second time. Adopt only the fields
the save sent.

Also cover the hook's save-then-verify order and its stop on a failed
save, and correct wording that claimed later saves don't re-send the
code: the section save still sends the full map; it no longer counts
the code as a change.

* SEO: Send only changed verification codes and patch the latest store snapshot

A verification-section save sent the whole code map and adopted it as
saved, so finishing after a Google auto-verify could overwrite the new
code on the server and roll it back in the form. The server merges
submitted codes over the stored ones, so send and adopt only the codes
that changed.

Every write to the settings store now patches its latest snapshot
instead of replacing it with the writing form's own baseline, so a form
left on another tab mid-save can't roll back what a newer one saved.

* SEO: Serialize Google auto-verify with form saves

The server merges verification codes without a lock, so a form save
overlapping saveVerification could drop the new code, and a form save's
post-save re-read arriving after it could roll the code back in the form
and store.

saveVerification now waits for the save in flight, re-read included, and
holds isSaving during its own request so the form's controls stay locked.
A re-read also applies only the codes its save changed, which covers a
form left on another tab, where the two don't share a queue.

* SEO: Queue form saves behind Google auto-verify too

The isSaving lock saveVerification takes disables a focused code field,
and in Chrome that fires blur, which starts a section save while the
Google save is still running. saveValues didn't wait for it, and either
save's finally could clear isSaving while the other still ran.

Form saves now queue behind the save in flight as well (their payload is
still computed when called, and applied only to the codes they changed),
and isSaving holds until the last queued save settles.

* SEO: Lock the manual Google code field during auto-verify

A code typed into the manual Google field while auto-verify was running
got saved by the blur the form lock fires, queued right after the token,
and replaced it, so Google could not find the token it was asked to
verify. Disable that field while auto-verify runs; clicking Verify
already blurs it, so a code typed before the click saves first.

* SEO: Lock the manual Google field only once the popup returns

Locking it for the whole auto-verify left it disabled until reload when
the browser blocked the popup, which never returns, taking away the
manual fallback. Lock it from the moment the popup returns a keyring
instead: a code typed while the popup was open is then saved by the
lock's blur before the token save is queued, so the token still wins.

* SEO: Word the Google field lock comment without relying on blur

Whether disabling a focused field fires blur differs by browser, so state only what the lock guarantees.

Author: haqadn

projects/packages/seo/_inc/data/build-payload.ts

@@ -39,17 +39,34 @@ export function buildCorePayload(
 	if ( local.front_page_description !== baseline.front_page_description ) {
 		payload.advanced_seo_front_page_description = local.front_page_description;
 	}
-	// The codes are sub-keys of one option, so the whole map goes when any of them
-	// changes; the server merges it over the codes already stored.
-	if (
-		VERIFICATION_KEYS.some( key => local.verification[ key ] !== baseline.verification[ key ] )
-	) {
-		payload.verification_services_codes = local.verification;
+	// The codes are sub-keys of one option, merged server-side over the stored ones, so
+	// only changed codes go: a whole map would overwrite a code saved meanwhile.
+	const codes = changedCodes( baseline, local );
+	if ( Object.keys( codes ).length > 0 ) {
+		payload.verification_services_codes = codes;
 	}
 
 	return payload;
 }
 
+/**
+ * The verification codes that differ from the baseline.
+ *
+ * @param baseline - The last-saved server state.
+ * @param local    - The current form state.
+ * @return The changed codes, keyed by service.
+ */
+export function changedCodes(
+	baseline: SettingsResponse,
+	local: SettingsResponse
+): Partial< SettingsResponse[ 'verification' ] > {
+	return Object.fromEntries(
+		VERIFICATION_KEYS.filter(
+			key => local.verification[ key ] !== baseline.verification[ key ]
+		).map( key => [ key, local.verification[ key ] ] )
+	);
+}
+
 /**
  * Read a `/wp/v2/settings` response back into form fields — the inverse of
  * `buildCorePayload()`, mapped the way the server's own settings read does.

projects/packages/seo/_inc/data/test/build-payload.test.ts

@@ -83,18 +83,12 @@ describe( 'buildCorePayload', () => {
 		expect( buildCorePayload( baseline, local ) ).toEqual( {} );
 	} );
 
-	it( 'sends the whole verification map when any code changed', () => {
-		const baseline = makeSettings();
-		const verification = {
-			google: 'g-code',
-			bing: '',
-			pinterest: '',
-			yandex: 'y-code',
-			facebook: '',
-		};
-		const local = makeSettings( { verification } );
+	it( 'sends only the verification codes that changed, cleared ones included', () => {
+		const codes = { google: 'g-code', bing: 'b-code', pinterest: '', yandex: '', facebook: '' };
+		const baseline = makeSettings( { verification: codes } );
+		const local = makeSettings( { verification: { ...codes, bing: '', yandex: 'y-code' } } );
 		expect( buildCorePayload( baseline, local ) ).toEqual( {
-			verification_services_codes: verification,
+			verification_services_codes: { bing: '', yandex: 'y-code' },
 		} );
 	} );
 
@@ -107,7 +101,7 @@ describe( 'buildCorePayload', () => {
 		} );
 		expect( buildCorePayload( baseline, local ) ).toEqual( {
 			advanced_seo_front_page_description: 'Desc',
-			verification_services_codes: verification,
+			verification_services_codes: { google: 'g' },
 		} );
 	} );
 

projects/packages/seo/_inc/data/test/use-google-verify.test.ts

@@ -0,0 +1,122 @@
+import { jest } from '@jest/globals';
+import { act, renderHook, waitFor } from '@testing-library/react';
+
+type Request = { path: string; method?: string };
+
+const mockApiFetch = jest.fn< ( options: Request ) => Promise< unknown > >();
+const saveCode = jest.fn< ( code: string ) => Promise< void > >();
+
+jest.unstable_mockModule( '@wordpress/api-fetch', () => ( { default: mockApiFetch } ) );
+jest.unstable_mockModule( '@automattic/request-external-access', () => ( {
+	default: ( _url: string, callback: ( result: { keyring_id: number } ) => void ) =>
+		callback( { keyring_id: 7 } ),
+} ) );
+jest.unstable_mockModule( '@automattic/jetpack-script-data', () => ( {
+	getScriptData: () => ( {
+		seo: { google_verify: { connect_url: 'https://example.com/connect', is_connected: true } },
+	} ),
+} ) );
+jest.unstable_mockModule( '@wordpress/notices', () => ( { store: 'core/notices' } ) );
+const createErrorNotice = jest.fn();
+
+jest.unstable_mockModule( '@wordpress/data', () => ( {
+	useDispatch: () => ( {
+		createInfoNotice: jest.fn(),
+		createSuccessNotice: jest.fn(),
+		createErrorNotice,
+	} ),
+} ) );
+
+const { useGoogleVerify } = await import( '../use-google-verify' );
+
+const VERIFY_POST = expect.objectContaining( {
+	path: '/jetpack/v4/verify-site/google',
+	method: 'POST',
+} );
+
+/**
+ * Answer the verify-site status reads, and acknowledge every POST.
+ *
+ * @param alreadyVerified - Whether Google already considers the site verified.
+ */
+function respond( alreadyVerified = false ) {
+	mockApiFetch.mockImplementation( ( { path, method } ) =>
+		Promise.resolve(
+			method === 'POST'
+				? {}
+				: {
+						verified: alreadyVerified && path.endsWith( '/7' ),
+						is_owner: true,
+						google_search_console_url: '',
+						token: 'tok',
+					}
+		)
+	);
+}
+
+/**
+ * Mount the hook and wait for its status read.
+ *
+ * @return The rendered hook.
+ */
+async function mountHook() {
+	const view = renderHook( () => useGoogleVerify( { saveCode } ) );
+	await waitFor( () => expect( view.result.current.state ).not.toBe( 'loading' ) );
+	return view;
+}
+
+describe( 'useGoogleVerify', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+		saveCode.mockResolvedValue( undefined );
+	} );
+
+	it.each( [
+		[ 'saves the token through the settings form', false, [ [ 'tok' ] ] ],
+		[ 'saves nothing when the site is already verified', true, [] ],
+	] )( '%s', async ( _label, alreadyVerified, calls ) => {
+		respond( alreadyVerified );
+		const { result } = await mountHook();
+
+		act( () => result.current.autoVerify() );
+		await waitFor( () => expect( result.current.isVerifying ).toBe( false ) );
+		expect( saveCode.mock.calls ).toEqual( calls );
+		expect( mockApiFetch ).not.toHaveBeenCalledWith(
+			expect.objectContaining( { path: '/wp/v2/settings' } )
+		);
+	} );
+
+	it( 'asks Google to verify only once the code is saved', async () => {
+		let finishSave: () => void = () => undefined;
+		saveCode.mockImplementation(
+			() =>
+				new Promise< void >( resolve => {
+					finishSave = resolve;
+				} )
+		);
+		respond();
+		const { result } = await mountHook();
+
+		act( () => result.current.autoVerify() );
+		await waitFor( () => expect( saveCode ).toHaveBeenCalled() );
+		expect( mockApiFetch ).not.toHaveBeenCalledWith( VERIFY_POST );
+		expect( result.current.isConfirming ).toBe( true );
+
+		await act( async () => finishSave() );
+
+		await waitFor( () => expect( result.current.isVerifying ).toBe( false ) );
+		expect( mockApiFetch ).toHaveBeenCalledWith( VERIFY_POST );
+		expect( result.current.isConfirming ).toBe( false );
+	} );
+
+	it( 'stops with an error when the code save fails', async () => {
+		saveCode.mockRejectedValue( { message: 'Nope.' } );
+		respond();
+		const { result } = await mountHook();
+
+		act( () => result.current.autoVerify() );
+		await waitFor( () => expect( result.current.isVerifying ).toBe( false ) );
+		expect( mockApiFetch ).not.toHaveBeenCalledWith( VERIFY_POST );
+		expect( createErrorNotice ).toHaveBeenCalledWith( 'Nope.', expect.anything() );
+	} );
+} );