Fix E2E tests - Wait for the Checkout to push changes before proceedi…

…ng with tests (#8502)

* Wait for push changes before clicking place order

* Blur last field and wait for network requests when entering addresses

* Use correct quote style

* Add address_2 to fake test address

* Use correct property names when filling test address

* Use correct comment style

* Update address values to reflect what is in the config file

* Remove unnecessary waits

* Improve batch request checking when filling shipping and billing address

* Wait for network idle before selecting shipping address

* Add checkCustomerPushCompleted function

* Override checkout data with test email

* Fill in the checkout data when testing for terms and conditions text

* Improve comments

---------

Co-authored-by: Nadir Seghir <[email protected]>

tests/e2e/specs/merchant/checkout-terms.test.js

@@ -56,6 +56,7 @@ describe( 'Merchant → Checkout → Can adjust T&S and Privacy Policy options',
 		await expect( page ).toMatch(
 			'By proceeding with your purchase you agree to our Terms and Conditions and Privacy Policy'
 		);
+		await shopper.block.fillInCheckoutWithTestData();
 		await shopper.block.placeOrder();
 		await expect( page ).toMatch( 'Order received' );
 	} );

tests/e2e/specs/shopper/cart-checkout/account.test.js

@@ -59,8 +59,7 @@ describe( 'Shopper → Checkout → Account', () => {
 		} );
 		//Create random email to place an order.
 		const testEmail = `test${ Math.random() * 10 }@example.com`;
-		await shopper.block.fillInCheckoutWithTestData();
-		await expect( page ).toFill( `#email`, testEmail );
+		await shopper.block.fillInCheckoutWithTestData( { email: testEmail } );
 		await shopper.block.placeOrder();
 		await expect( page ).toMatch( 'Order received' );
 		await merchant.login();

tests/e2e/specs/shopper/cart-checkout/checkout.test.js

@@ -31,12 +31,6 @@ import {
 
 import { createCoupon } from '../../../utils';
 
-if ( process.env.WOOCOMMERCE_BLOCKS_PHASE < 2 ) {
-	// Skips all the tests if it's a WooCommerce Core process environment.
-	// eslint-disable-next-line jest/no-focused-tests, jest/expect-expect
-	test.only( 'Skipping Cart & Checkout tests', () => {} );
-}
-
 let coupon;
 
 describe( 'Shopper → Checkout', () => {

tests/utils/shopper.js

@@ -20,6 +20,70 @@ import {
 	getQtyMinusButtonPathExpression,
 } from './path-expressions';
 
+const checkCustomerPushCompleted = async (
+	shippingOrBilling,
+	addressToCheck
+) => {
+	// Blur active field to trigger customer information update, then wait for requests to finish.
+	await page.evaluate( 'document.activeElement.blur()' );
+
+	await page.waitForResponse( async ( response ) => {
+		const isBatch = response.url().includes( '/wp-json/wc/store/v1/batch' );
+		const responseJson = await response.text();
+		const parsedResponse = JSON.parse( responseJson );
+		if ( ! Array.isArray( parsedResponse?.responses ) || ! isBatch ) {
+			return false;
+		}
+
+		const keyToCheck =
+			shippingOrBilling === 'shipping'
+				? 'shipping_address'
+				: 'billing_address';
+
+		return parsedResponse.responses.some( ( singleResponse ) => {
+			const firstname =
+				singleResponse.body[ keyToCheck ].first_name ===
+				addressToCheck.firstname;
+			const lastname =
+				singleResponse.body[ keyToCheck ].last_name ===
+				addressToCheck.lastname;
+			const address1 =
+				singleResponse.body[ keyToCheck ].address_1 ===
+				addressToCheck.addressfirstline;
+			const address2 =
+				singleResponse.body[ keyToCheck ].address_2 ===
+				addressToCheck.addresssecondline;
+			const postcode =
+				singleResponse.body[ keyToCheck ].postcode ===
+				addressToCheck.postcode;
+			const city =
+				singleResponse.body[ keyToCheck ].city === addressToCheck.city;
+			const phone =
+				singleResponse.body[ keyToCheck ].phone ===
+				addressToCheck.phone;
+			const email =
+				shippingOrBilling === 'billing'
+					? singleResponse.body[ keyToCheck ].email ===
+					  addressToCheck.email
+					: true;
+
+			// Note, we skip checking State and Country here because the value returned by the server is not the same as
+			// what gets input into the form. The server returns the code, but the form accepts the full name.
+			return (
+				firstname &&
+				lastname &&
+				address1 &&
+				address2 &&
+				postcode &&
+				city &&
+				phone &&
+				email
+			);
+		} );
+	} );
+	await page.waitForTimeout( 1500 );
+};
+
 export const shopper = {
 	...wcShopper,
 
@@ -183,45 +247,37 @@ export const shopper = {
 			);
 		},
 
-		fillInCheckoutWithTestData: async () => {
+		fillInCheckoutWithTestData: async ( overrideData = {} ) => {
 			const shippingOrBilling = ( await page.$( '#shipping-first_name' ) )
 				? 'shipping'
 				: 'billing';
 			const testData = {
-				first_name: 'John',
-				last_name: 'Doe',
-				shipping_address_1: '123 Easy Street',
-				country: 'United States (US)',
-				city: 'New York',
-				state: 'New York',
-				postcode: '90210',
-				email: '[email protected]',
+				...{
+					firstname: 'John',
+					lastname: 'Doe',
+					addressfirstline: '123 Easy Street',
+					addresssecondline: 'Testville',
+					country: 'United States (US)',
+					city: 'New York',
+					state: 'New York',
+					postcode: '90210',
+					email: '[email protected]',
+					phone: '01234567890',
+				},
+				...overrideData,
 			};
 			await expect( page ).toFill( `#email`, testData.email );
-			await shopper.block.fillInCheckoutAddress(
-				testData,
-				shippingOrBilling
-			);
-		},
-
-		// prettier-ignore
-		fillInCheckoutAddress: async (
-			address,
-			shippingOrBilling = 'shipping'
-		) => {
-			await expect( page ).toFill( `#${ shippingOrBilling }-first_name`, address.first_name );
-			await expect( page ).toFill( `#${ shippingOrBilling }-first_name`, address.first_name );
-			await expect( page ).toFill( `#${ shippingOrBilling }-last_name`, address.last_name );
-			await expect( page ).toFill( `#${ shippingOrBilling }-address_1`, address.shipping_address_1 );
-			await expect( page ).toFill( `#${ shippingOrBilling }-country input`, address.country );
-			await expect( page ).toFill( `#${ shippingOrBilling }-city`, address.city );
-			await expect( page ).toFill( `#${ shippingOrBilling }-state input`, address.state );
-			await expect( page ).toFill( `#${ shippingOrBilling }-postcode`, address.postcode );
+			if ( shippingOrBilling === 'shipping' ) {
+				await shopper.block.fillShippingDetails( testData );
+			} else {
+				await shopper.block.fillBillingDetails( testData );
+			}
+			// Blur active field to trigger shipping rates update, then wait for requests to finish.
+			await page.evaluate( 'document.activeElement.blur()' );
 		},
-
 		// prettier-ignore
 		fillBillingDetails: async ( customerBillingDetails ) => {
-			await page.waitForSelector("#billing-fields");
+			await page.waitForSelector( '#billing-fields' );
 			const companyInputField = await page.$( '#billing-company' );
 
 			if ( companyInputField ) {
@@ -238,6 +294,9 @@ export const shopper = {
 			await expect( page ).toFill( '#billing-postcode', customerBillingDetails.postcode );
 			await expect( page ).toFill( '#billing-phone', customerBillingDetails.phone );
 			await expect( page ).toFill( '#email', customerBillingDetails.email );
+			// Blur active field to trigger customer address update, then wait for requests to finish.
+			await page.evaluate( 'document.activeElement.blur()' );
+			await checkCustomerPushCompleted( 'billing', customerBillingDetails );
 		},
 
 		// prettier-ignore
@@ -257,6 +316,9 @@ export const shopper = {
 			await expect( page ).toFill( '#shipping-state input', customerShippingDetails.state );
 			await expect( page ).toFill( '#shipping-postcode', customerShippingDetails.postcode );
 			await expect( page ).toFill( '#shipping-phone', customerShippingDetails.phone );
+			// Blur active field to customer address update, then wait for requests to finish.
+			await page.evaluate( 'document.activeElement.blur()' );
+			await checkCustomerPushCompleted( 'shipping', customerShippingDetails );
 		},
 
 		// prettier-ignore
@@ -337,6 +399,7 @@ export const shopper = {
 			shippingName,
 			shippingPrice
 		) => {
+			await page.waitForNetworkIdle( { idleTime: 1000 } );
 			await page.waitForSelector(
 				'.wc-block-components-radio-control__label'
 			);