diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/merchant/checkout-terms.test.js b/plugins/woocommerce-blocks/tests/e2e/specs/merchant/checkout-terms.test.js index 632786ac7e4..c27733f85cc 100644 --- a/plugins/woocommerce-blocks/tests/e2e/specs/merchant/checkout-terms.test.js +++ b/plugins/woocommerce-blocks/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' ); } ); diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/shopper/cart-checkout/account.test.js b/plugins/woocommerce-blocks/tests/e2e/specs/shopper/cart-checkout/account.test.js index 83c4c7a0b4b..7efab82179f 100644 --- a/plugins/woocommerce-blocks/tests/e2e/specs/shopper/cart-checkout/account.test.js +++ b/plugins/woocommerce-blocks/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(); diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/shopper/cart-checkout/checkout.test.js b/plugins/woocommerce-blocks/tests/e2e/specs/shopper/cart-checkout/checkout.test.js index 11e3d50f9bb..0a3eb12f26f 100644 --- a/plugins/woocommerce-blocks/tests/e2e/specs/shopper/cart-checkout/checkout.test.js +++ b/plugins/woocommerce-blocks/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', () => { diff --git a/plugins/woocommerce-blocks/tests/utils/shopper.js b/plugins/woocommerce-blocks/tests/utils/shopper.js index 72ac26fddcc..114126cc286 100644 --- a/plugins/woocommerce-blocks/tests/utils/shopper.js +++ b/plugins/woocommerce-blocks/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: 'john.doe@test.com', + ...{ + firstname: 'John', + lastname: 'Doe', + addressfirstline: '123 Easy Street', + addresssecondline: 'Testville', + country: 'United States (US)', + city: 'New York', + state: 'New York', + postcode: '90210', + email: 'john.doe@test.com', + phone: '01234567890', + }, + ...overrideData, }; await expect( page ).toFill( `#email`, testData.email ); - await shopper.block.fillInCheckoutAddress( - testData, - shippingOrBilling - ); + 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 - 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 ); - }, - // 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' );