Merge branch 'develop' into release/3.6.0

Author: joemcgill

tests/e2e/specs/settings/settings.test.js

@@ -210,16 +210,60 @@ test.describe( 'Settings', () => {
 			await expect( disconnectButton ).toBeVisible();
 		} );
 
-		test( 'should show a notice if there are no channels when connected', async () => {
-			await settingsPage.mockYouTubeAccountNoChannels();
+		test( 'should show a notice if the YouTube account is incomplete', async () => {
+			await settingsPage.mockYouTubeAccountIncomplete();
 			await settingsPage.goto();
 
 			const notice = settingsPage.youTubeCard.getByText(
-				'No channels found (or permission not granted).'
+				'Your YouTube account is connected, but setup isn’t complete yet.'
 			);
 
 			await expect( notice ).toBeVisible();
 		} );
+
+		test( 'should display error message when "Complete setup" fails', async () => {
+			await settingsPage
+				.withFulfillTimes( 1 )
+				.mockNotEligibleYouTubeChannel();
+			const requestPromise =
+				settingsPage.registerYouTubeCompleteSetupRequest();
+
+			const completeSetupButton =
+				settingsPage.getYouTubeCompleteSetupButton();
+			await completeSetupButton.click();
+
+			await requestPromise;
+
+			await expect(
+				settingsPage.youTubeCard.getByText(
+					'The channel is not eligible for the linking program.'
+				)
+			).toBeVisible();
+		} );
+
+		test( 'should complete YouTube account setup successfully', async () => {
+			await settingsPage
+				.withFulfillTimes( 1 )
+				.mockYouTubeAccountIncomplete();
+			await settingsPage.mockEligibleYouTubeChannel();
+			await settingsPage.goto();
+
+			const requestPromise =
+				settingsPage.registerYouTubeCompleteSetupRequest();
+
+			const completeSetupButton =
+				settingsPage.getYouTubeCompleteSetupButton();
+			await completeSetupButton.click();
+
+			await requestPromise;
+
+			// Now mock as connected so re-renders show the channel name
+			await settingsPage.mockYouTubeAccountConnected();
+
+			await expect(
+				settingsPage.youTubeCard.getByText( 'My YouTube Channel' )
+			).toBeVisible();
+		} );
 	} );
 
 	test.describe( 'No connected Google Merchant Center account', () => {

tests/e2e/utils/mock-requests.js

@@ -1162,22 +1162,102 @@ export default class MockRequests {
 	}
 
 	/**
-	 * Mock a connected YouTube account that has no channels.
+	 * Mock helper that simulates an incomplete YouTube account connection by calling
+	 * `fulfillYouTubeAccountConnection` with a predefined payload.
+	 *
+	 * The payload sets `status` to `'incomplete'` while still providing channel metadata
+	 * (`id` and `label`), which may be used by consumers to determine that the account
+	 * connection process has been started but not completed.
 	 *
-	 * This asynchronous helper fulfills the YouTube account connection with a
-	 * status of "connected" and an explicit null channel value, simulating a
-	 * scenario where the account is connected but no channels are available or
-	 * accessible.
+	 * This method is asynchronous and awaits the underlying fulfillment call.
 	 *
-	 * @return {Promise<void>} Resolves once the mock connection has been fulfilled.
+	 * @return {Promise<*>} Resolves with whatever value `fulfillYouTubeAccountConnection` returns.
 	 */
-	async mockYouTubeAccountNoChannels() {
+	async mockYouTubeAccountIncomplete() {
 		await this.fulfillYouTubeAccountConnection( {
-			status: 'connected',
-			channel: [],
+			status: 'incomplete',
+			channel: {
+				id: 'a89ahifdaffe234',
+				label: 'My YouTube Channel',
+			},
 		} );
 	}
 
+	/**
+	 * Mock helper that simulates a YouTube account connection with an ineligible channel by calling
+	 * `fulfillYouTubeAccountConnection` with a predefined payload.
+	 * The payload includes an error message and code indicating that the channel is not eligible for the linking program.
+	 *
+	 * This method is asynchronous and awaits the underlying fulfillment call.
+	 *
+	 * @return {Promise<*>} Resolves with whatever value `fulfillYouTubeAccountConnection` returns.
+	 */
+	async mockNotEligibleYouTubeChannel() {
+		await this.fulfillYouTubeCompleteSetup(
+			{
+				message: 'The channel is not eligible for the linking program.',
+				error: {
+					code: 403,
+					message:
+						'The channel is not eligible for the linking program.',
+					errors: [
+						{
+							message:
+								'The channel is not eligible for the linking program.',
+							domain: 'youtube.thirdPartyLink',
+							reason: 'CHANNEL_NOT_ELIGIBLE',
+						},
+					],
+				},
+			},
+			403
+		);
+	}
+
+	/**
+	 * Mock helper that simulates a YouTube account connection with an eligible channel by calling
+	 * `fulfillYouTubeAccountConnection` with a predefined payload.
+	 * The payload includes a message indicating that the channel is eligible for the linking program.
+	 *
+	 * This method is asynchronous and awaits the underlying fulfillment call.
+	 *
+	 * @return {Promise<*>} Resolves with whatever value `fulfillYouTubeAccountConnection` returns.
+	 */
+	async mockEligibleYouTubeChannel() {
+		await this.fulfillYouTubeCompleteSetup( {
+			message: 'The channel is eligible for the linking program.',
+		} );
+	}
+
+	/**
+	 * Fulfills a mock request for the YouTube complete setup endpoint, simulating the completion of the YouTube setup process.
+	 *
+	 * @param {Object} payload - The mock response payload to be returned, which may include details about the completed setup.
+	 * @param {number} [status=200] - The HTTP status code to be returned. Defaults to 200.
+	 * @return {Promise<void>} A promise that resolves when the request is fulfilled.
+	 */
+	async fulfillYouTubeCompleteSetup( payload, status = 200 ) {
+		await this.fulfillRequest(
+			/\/wc\/gla\/youtube\/setup\/complete\b/,
+			payload,
+			status,
+			[ 'POST' ]
+		);
+	}
+
+	/**
+	 * Registers a wait for a request to the YouTube complete setup endpoint, allowing tests to wait until this specific request is made before proceeding.
+	 *
+	 * @return {Promise<import('playwright').Request>} A promise that resolves with the intercepted request object when a request matching the criteria is made.
+	 */
+	async registerYouTubeCompleteSetupRequest() {
+		return this.page.waitForRequest(
+			( request ) =>
+				request.url().includes( '/gla/youtube/setup/complete' ) &&
+				request.method() === 'POST'
+		);
+	}
+
 	/**
 	 * Fulfills a mock request for the final URL suggestions endpoint for campaign assets.
 	 *

tests/e2e/utils/pages/settings.js

@@ -13,9 +13,9 @@ export default class SettingsPage extends MockRequests {
 	constructor( page ) {
 		super( page );
 		this.page = page;
-		this.youTubeCard = this.page.locator(
-			'.gla-account-card:nth-child(4)'
-		);
+		this.youTubeCard = this.page
+			.locator( '.gla-account-card' )
+			.filter( { hasText: 'YouTube' } );
 	}
 
 	/**
@@ -95,6 +95,17 @@ export default class SettingsPage extends MockRequests {
 		} );
 	}
 
+	/**
+	 * Get the Complete YouTube Setup button.
+	 *
+	 * @return {Promise<import('@playwright/test').Locator>} The Complete YouTube Setup button
+	 */
+	getYouTubeCompleteSetupButton() {
+		return this.youTubeCard.getByRole( 'button', {
+			name: 'Complete setup',
+		} );
+	}
+
 	/**
 	 * Register the request when the enhanced conversions checkbox is checked or unchecked.
 	 *