From a0ffa4bfdffc6d70add2356bcb1ba94111f29278 Mon Sep 17 00:00:00 2001 From: Niels Lange Date: Thu, 31 Mar 2022 13:10:50 +0200 Subject: [PATCH] =?UTF-8?q?Shopper=20=E2=86=92=20Checkout=20=E2=86=92=20Ca?= =?UTF-8?q?n=20have=20different=20shipping=20and=20billing=20addresses=20(?= =?UTF-8?q?#5860)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Shopper can have different shipping and billing addresses * Shopper can have different shipping and billing addresses * Shopper can have different shipping and billing addresses * Correct billing field IDs * Remove unused variable * Remove unused timeout * Remove unused commands * Activate company field using setCheckbox * Deactivate company field using unsetCheckbox * Remove obsolete command * Empty cart before and after each test * Remove obsolete import * Check billing and shipping company * Remove manual code with unsetCheckbox * Fill company if field exist * Get checkbox ID from label * Remove duplicate company field toFill method Co-authored-by: Saad Tarhi Co-authored-by: Saad Tarhi --- tests/e2e/config/default.json | 17 +- .../checkout-different-addresses.test.js | 83 ++++++++++ tests/utils/compatibility-notice.js | 18 +++ tests/utils/constants.js | 1 + tests/utils/index.js | 4 + tests/utils/shopper.js | 149 +++++++++--------- 6 files changed, 192 insertions(+), 80 deletions(-) create mode 100644 tests/e2e/specs/shopper/checkout-different-addresses.test.js create mode 100644 tests/utils/compatibility-notice.js diff --git a/tests/e2e/config/default.json b/tests/e2e/config/default.json index 0b13824f9e9..247a4d3d34f 100644 --- a/tests/e2e/config/default.json +++ b/tests/e2e/config/default.json @@ -39,8 +39,8 @@ "lastname": "Doe", "company": "Automattic", "country": "United States (US)", - "addressfirstline": "addr 1", - "addresssecondline": "addr 2", + "addressfirstline": "123 Main Road", + "addresssecondline": "Unit 23", "city": "San Francisco", "state": "CA", "postcode": "94107", @@ -48,15 +48,16 @@ "email": "john.doe@example.com" }, "shipping": { - "firstname": "John", + "firstname": "Jane", "lastname": "Doe", - "company": "Automattic", + "company": "WooCommerce", "country": "United States (US)", - "addressfirstline": "addr 1", - "addresssecondline": "addr 2", - "city": "San Francisco", + "addressfirstline": "123 Main Avenue", + "addresssecondline": "Unit 42", + "city": "Los Angeles", "state": "CA", - "postcode": "94107" + "postcode": "90010", + "phone": "987654321" } } } diff --git a/tests/e2e/specs/shopper/checkout-different-addresses.test.js b/tests/e2e/specs/shopper/checkout-different-addresses.test.js new file mode 100644 index 00000000000..20e01865248 --- /dev/null +++ b/tests/e2e/specs/shopper/checkout-different-addresses.test.js @@ -0,0 +1,83 @@ +/** + * External dependencies + */ +import { + merchant, + openDocumentSettingsSidebar, + setCheckbox, + unsetCheckbox, +} from '@woocommerce/e2e-utils'; + +import { + visitBlockPage, + selectBlockByName, + saveOrPublish, +} from '@woocommerce/blocks-test-utils'; + +/** + * Internal dependencies + */ +import { + shopper, + preventCompatibilityNotice, + reactivateCompatibilityNotice, +} from '../../../utils'; + +import { BILLING_DETAILS, SHIPPING_DETAILS } from '../../../utils/constants'; +const SIMPLE_PRODUCT_NAME = '128GB USB Stick'; + +if ( process.env.WOOCOMMERCE_BLOCKS_PHASE < 2 ) + // eslint-disable-next-line jest/no-focused-tests + test.only( 'Skipping Checkout tests', () => {} ); + +let companyCheckboxId = null; + +describe( 'Shopper → Checkout → Can have different shipping and billing addresses', () => { + beforeAll( async () => { + await preventCompatibilityNotice(); + await merchant.login(); + await visitBlockPage( 'Checkout Block' ); + await openDocumentSettingsSidebar(); + await selectBlockByName( + 'woocommerce/checkout-shipping-address-block' + ); + + // This checkbox ID is unstable, so, we're getting its value from "for" attribute of the label + const [ companyCheckboxLabel ] = await page.$x( + `//label[contains(text(), "Company") and contains(@class, "components-toggle-control__label")]` + ); + companyCheckboxId = await page.evaluate( + ( label ) => `#${ label.getAttribute( 'for' ) }`, + companyCheckboxLabel + ); + + await setCheckbox( companyCheckboxId ); + await saveOrPublish(); + await shopper.block.emptyCart(); + } ); + + afterAll( async () => { + await shopper.block.emptyCart(); + await visitBlockPage( 'Checkout Block' ); + await openDocumentSettingsSidebar(); + await selectBlockByName( + 'woocommerce/checkout-shipping-address-block' + ); + await unsetCheckbox( companyCheckboxId ); + await saveOrPublish(); + await merchant.logout(); + await reactivateCompatibilityNotice(); + } ); + + it( 'allows customer to have different shipping and billing addresses', async () => { + await shopper.goToShop(); + await shopper.addToCartFromShopPage( SIMPLE_PRODUCT_NAME ); + await shopper.block.goToCheckout(); + await unsetCheckbox( '#checkbox-control-0' ); + await shopper.block.fillShippingDetails( SHIPPING_DETAILS ); + await shopper.block.fillBillingDetails( BILLING_DETAILS ); + await shopper.block.placeOrder(); + await shopper.block.verifyShippingDetails( SHIPPING_DETAILS ); + await shopper.block.verifyBillingDetails( BILLING_DETAILS ); + } ); +} ); diff --git a/tests/utils/compatibility-notice.js b/tests/utils/compatibility-notice.js new file mode 100644 index 00000000000..6fc40d6aa6f --- /dev/null +++ b/tests/utils/compatibility-notice.js @@ -0,0 +1,18 @@ +/* global localStorage */ +/* eslint-disable no-unused-expressions */ + +export async function preventCompatibilityNotice() { + await page.evaluate( () => { + localStorage.setItem( + 'wc-blocks_dismissed_compatibility_notices', + '["checkout"]' + ); + } ); +} + +export async function reactivateCompatibilityNotice() { + await page.evaluate( () => { + localStorage.removeItem( 'wc-blocks_dismissed_compatibility_notices' ); + } ); +} +4; diff --git a/tests/utils/constants.js b/tests/utils/constants.js index ffd68274b58..370992a0507 100644 --- a/tests/utils/constants.js +++ b/tests/utils/constants.js @@ -10,5 +10,6 @@ const config = require( 'config' ); */ export const SIMPLE_PRODUCT_NAME = 'Woo Single #1'; export const BILLING_DETAILS = config.get( 'addresses.customer.billing' ); +export const SHIPPING_DETAILS = config.get( 'addresses.customer.shipping' ); export const CUSTOMER_USERNAME = config.get( 'users.customer.username' ); export const CUSTOMER_PASSWORD = config.get( 'users.customer.password' ); diff --git a/tests/utils/index.js b/tests/utils/index.js index 56550cf2354..8d1619a96d9 100644 --- a/tests/utils/index.js +++ b/tests/utils/index.js @@ -4,5 +4,9 @@ export { visitBlockPage, visitPostOfType } from './visit-block-page'; export { getBlockPagePermalink } from './get-block-page-permalink'; export { getNormalPagePermalink } from './get-normal-page-permalink'; export { saveOrPublish } from './save-or-publish'; +export { + preventCompatibilityNotice, + reactivateCompatibilityNotice, +} from './compatibility-notice'; export { shopper } from './shopper'; export { selectBlockByName } from './select-block-by-name'; diff --git a/tests/utils/shopper.js b/tests/utils/shopper.js index 58542032875..d797d84e3b9 100644 --- a/tests/utils/shopper.js +++ b/tests/utils/shopper.js @@ -188,85 +188,90 @@ export const shopper = { ); }, + // 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 - ); + 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 expect( page ).toFill( - '#billing-first_name', - customerBillingDetails.firstname - ); - await expect( page ).toFill( - '#billing-last_name', - customerBillingDetails.lastname - ); - await expect( page ).toFill( - '#components-form-token-input-0', - customerBillingDetails.country - ); - await expect( page ).toFill( - '#billing-address_1', - customerBillingDetails.addressfirstline - ); - await expect( page ).toFill( - '#billing-address_2', - customerBillingDetails.addresssecondline - ); - await expect( page ).toFill( - '#billing-city', - customerBillingDetails.city - ); - await expect( page ).toFill( - '#components-form-token-input-2', - customerBillingDetails.state - ); - await expect( page ).toFill( - '#billing-postcode', - customerBillingDetails.postcode - ); - await expect( page ).toFill( - '#phone', - customerBillingDetails.phone - ); - await expect( page ).toFill( - '#email', - customerBillingDetails.email - ); + const companyInputField = await page.$( '#billing-company' ); + + if ( companyInputField ) { + await expect( page ).toFill( '#billing-company', customerBillingDetails.company ); + } + + await expect( page ).toFill( '#billing-first_name', customerBillingDetails.firstname ); + await expect( page ).toFill( '#billing-last_name', customerBillingDetails.lastname ); + await expect( page ).toFill( '#billing-country input', customerBillingDetails.country ); + await expect( page ).toFill( '#billing-address_1', customerBillingDetails.addressfirstline ); + await expect( page ).toFill( '#billing-address_2', customerBillingDetails.addresssecondline ); + await expect( page ).toFill( '#billing-city', customerBillingDetails.city ); + await expect( page ).toFill( '#billing-state input', customerBillingDetails.state ); + await expect( page ).toFill( '#billing-postcode', customerBillingDetails.postcode ); + await expect( page ).toFill( '#phone', customerBillingDetails.phone ); + await expect( page ).toFill( '#email', customerBillingDetails.email ); + }, + + // prettier-ignore + fillShippingDetails: async ( customerShippingDetails ) => { + const companyInputField = await page.$( '#shipping-company' ); + + if ( companyInputField ) { + await expect( page ).toFill( '#shipping-company', customerShippingDetails.company ); + } + + await expect( page ).toFill( '#shipping-first_name', customerShippingDetails.firstname ); + await expect( page ).toFill( '#shipping-last_name', customerShippingDetails.lastname ); + await expect( page ).toFill( '#shipping-country input', customerShippingDetails.country ); + await expect( page ).toFill( '#shipping-address_1', customerShippingDetails.addressfirstline ); + await expect( page ).toFill( '#shipping-address_2', customerShippingDetails.addresssecondline ); + await expect( page ).toFill( '#shipping-city', customerShippingDetails.city ); + 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 ); + }, + + // prettier-ignore + verifyBillingDetails: async ( customerBillingDetails ) => { + await Promise.all( [ + expect( page ).toMatch( customerBillingDetails.firstname ), + expect( page ).toMatch( customerBillingDetails.lastname ), + expect( page ).toMatch( customerBillingDetails.company ), + expect( page ).toMatch( customerBillingDetails.addressfirstline ), + expect( page ).toMatch( customerBillingDetails.addresssecondline ), + // expect( page ).toMatch( customerBillingDetails.country ), + expect( page ).toMatch( customerBillingDetails.city ), + expect( page ).toMatch( customerBillingDetails.state ), + expect( page ).toMatch( customerBillingDetails.postcode ), + expect( page ).toMatch( customerBillingDetails.phone ), + ] ); + }, + + // prettier-ignore + verifyShippingDetails: async ( customerShippingDetails ) => { + await Promise.all( [ + expect( page ).toMatch( customerShippingDetails.firstname ), + expect( page ).toMatch( customerShippingDetails.lastname ), + expect( page ).toMatch( customerShippingDetails.company ), + expect( page ).toMatch( customerShippingDetails.addressfirstline ), + expect( page ).toMatch( customerShippingDetails.addresssecondline ), + // expect( page ).toMatch( customerShippingDetails.country ), + expect( page ).toMatch( customerShippingDetails.city ), + expect( page ).toMatch( customerShippingDetails.state ), + expect( page ).toMatch( customerShippingDetails.postcode ), + expect( page ).toMatch( customerShippingDetails.phone ), + ] ); }, /**