Shopper → Checkout → Can have different shipping and billing addresses (

#5860) * 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 <[email protected]> Co-authored-by: Saad Tarhi <[email protected]>
woocommerce · Mar 31, 2022 · a0ffa4b · a0ffa4b
1 parent 97778a6
commit a0ffa4b
Show file tree

Hide file tree

Showing 6 changed files with 192 additions and 80 deletions.
diff --git a/tests/e2e/config/default.json b/tests/e2e/config/default.json
@@ -39,24 +39,25 @@
 				"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",
 				"phone": "123456789",
 				"email": "[email protected]"
 			},
 			"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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 ),
+			] );
 		},
 
 		/**