Merge pull request #29104 from woocommerce/e2e/e2e-merchant-settings-shipping-zones

Add new e2e test merchant shipping zones test

tests/e2e/core-tests/CHANGELOG.md

@@ -24,6 +24,7 @@
 - Shopper Shop Browse Search Sort
 - Merchant Orders Customer Checkout Page
 - Shopper Cart Apply Coupon
+- Merchant Settings Shipping Zones
 - Shopper Variable product info updates on different variations
 - Merchant order emails flow
 

tests/e2e/core-tests/README.md

@@ -58,6 +58,7 @@ The functions to access the core tests are:
   - `runProductEditDetailsTest` - Merchant can edit an existing product
   - `runProductSearchTest` - Merchant can search for a product and view it
   - `runMerchantOrdersCustomerPaymentPage` - Merchant can visit the customer payment page
+  - `runAddNewShippingZoneTest` - Merchant can create shipping zones and let shopper test them
   - `runMerchantOrderEmailsTest` - Merchant can receive order emails and resend emails by Order Actions
 
 ### Shopper

tests/e2e/core-tests/specs/index.js

@@ -20,6 +20,7 @@ const runSingleProductPageTest = require( './shopper/front-end-single-product.te
 const runVariableProductUpdateTest = require( './shopper/front-end-variable-product-updates.test' );
 
 // Merchant tests
+const runAddNewShippingZoneTest = require ( './merchant/wp-admin-settings-shipping-zones.test' );
 const runCreateCouponTest = require( './merchant/wp-admin-coupon-new.test' );
 const runCreateOrderTest = require( './merchant/wp-admin-order-new.test' );
 const runEditOrderTest = require( './merchant/wp-admin-order-edit.test' );
@@ -61,6 +62,7 @@ const runShopperTests = () => {
 };
 
 const runMerchantTests = () => {
+	runAddNewShippingZoneTest();
 	runCreateCouponTest();
 	runCreateOrderTest();
 	runEditOrderTest();
@@ -119,6 +121,7 @@ module.exports = {
 	runMerchantOrdersCustomerPaymentPage,
 	runMerchantOrderEmailsTest,
 	runMerchantTests,
+	runAddNewShippingZoneTest,
 	runProductBrowseSearchSortTest,
 	runApiTests,
 };

tests/e2e/core-tests/specs/merchant/wp-admin-settings-shipping-zones.test.js

@@ -0,0 +1,126 @@
+/* eslint-disable jest/no-export, jest/no-disabled-tests */
+
+/**
+ * Internal dependencies
+ */
+const {
+	shopper,
+	merchant,
+	createSimpleProduct,
+	addShippingZoneAndMethod,
+	clearAndFillInput,
+	selectOptionInSelect2,
+	evalAndClick,
+} = require( '@woocommerce/e2e-utils' );
+
+const config = require( 'config' );
+const simpleProductPrice = config.has( 'products.simple.price' ) ? config.get( 'products.simple.price' ) : '9.99';
+const simpleProductName = config.get( 'products.simple.name' );
+const california = 'California, United States (US)';
+const sanFranciscoZIP = '94107';
+const shippingZoneNameUS = 'US with Flat rate';
+const shippingZoneNameFL = 'CA with Free shipping';
+const shippingZoneNameSF = 'SF with Local pickup';
+
+const runAddNewShippingZoneTest = () => {
+	describe('WooCommerce Shipping Settings - Add new shipping zone', () => {
+		beforeAll(async () => {
+			await merchant.login();
+			await createSimpleProduct();
+			await merchant.openSettings('shipping');
+
+			// Check if you can go via blank shipping zones, otherwise remove one existing zone
+			// This is a workaround to avoid flakyness and to give this test more confidence
+			try {
+				await page.click('.wc-shipping-zones-blank-state > a.wc-shipping-zone-add');
+
+			} catch (error) {
+				await evalAndClick('.wc-shipping-zone-delete');
+				await page.keyboard.press('Enter');
+			}
+		});
+
+		it('add shipping zone for San Francisco with free Local pickup', async () => {
+			// Add a new shipping zone for San Francisco 94107, CA, US with Local pickup
+			await addShippingZoneAndMethod(shippingZoneNameSF, california, sanFranciscoZIP, 'local_pickup');
+		});
+
+		it('add shipping zone for California with Free shipping', async () => {
+			// Add a new shipping zone for CA, US with Free shipping
+			await addShippingZoneAndMethod(shippingZoneNameFL, california, ' ', 'free_shipping');
+		});
+
+		it('add shipping zone for the US with Flat rate', async () => {
+			// Add a new shipping zone for the US with Flat rate
+			await addShippingZoneAndMethod(shippingZoneNameUS);
+
+			// Set Flat rate cost
+			await expect(page).toClick('a.wc-shipping-zone-method-settings', {text: 'Edit'});
+			await clearAndFillInput('#woocommerce_flat_rate_cost', '10');
+			await expect(page).toClick('button#btn-ok');
+			await merchant.logout();
+		});
+
+		it('allows customer to pay for a Flat rate shipping method', async() => {
+			await shopper.login();
+
+			// Add product to cart as a shopper
+			await shopper.goToShop();
+			await shopper.addToCartFromShopPage(simpleProductName);
+			await shopper.goToCart();
+
+			// Set shipping country to United States (US)
+			await expect(page).toClick('a.shipping-calculator-button');
+			await expect(page).toClick('#select2-calc_shipping_country-container');
+			await selectOptionInSelect2('United States (US)');
+
+			// Set shipping state to New York
+			await expect(page).toClick('#select2-calc_shipping_state-container');
+			await selectOptionInSelect2('New York');
+			await expect(page).toClick('button[name="calc_shipping"]');
+
+			// Set shipping postcode to 10010
+			await clearAndFillInput('#calc_shipping_postcode', '10010');
+			await expect(page).toClick('button[name="calc_shipping"]');
+
+			// Verify shipping costs
+			await page.waitForSelector('.order-total');
+			await expect(page).toMatchElement('.shipping .amount', {text: '$10.00'});
+			await expect(page).toMatchElement('.order-total .amount', {text: `$1${simpleProductPrice}`});
+		});
+
+		it('allows customer to benefit from a Free shipping if in CA', async () => {
+			await page.reload();
+			// Set shipping state to California
+			await expect(page).toClick('a.shipping-calculator-button');
+			await expect(page).toClick('#select2-calc_shipping_state-container');
+			await selectOptionInSelect2('California');
+
+			// Set shipping postcode to 94000
+			await clearAndFillInput('#calc_shipping_postcode', '94000');
+			await expect(page).toClick('button[name="calc_shipping"]');
+
+			// Verify shipping method and cost
+			await page.waitForSelector('.order-total');
+			await expect(page).toMatchElement('.shipping ul#shipping_method > li', {text: 'Free shipping'});
+			await expect(page).toMatchElement('.order-total .amount', {text: `$${simpleProductPrice}`});
+		});
+
+		it('allows customer to benefit from a free Local pickup if in SF', async () => {
+			await page.reload();
+			// Set shipping postcode to 94107
+			await expect(page).toClick('a.shipping-calculator-button');
+			await clearAndFillInput('#calc_shipping_postcode', '94107');
+			await expect(page).toClick('button[name="calc_shipping"]');
+
+			// Verify shipping method and cost
+			await page.waitForSelector('.order-total');
+			await expect(page).toMatchElement('.shipping ul#shipping_method > li', {text: 'Local pickup'});
+			await expect(page).toMatchElement('.order-total .amount', {text: `$${simpleProductPrice}`});
+
+			await shopper.removeFromCart(simpleProductName);
+		});
+	});
+};
+
+module.exports = runAddNewShippingZoneTest;

tests/e2e/specs/wp-admin/test-add-shipping-zones.js

@@ -0,0 +1,6 @@
+/*
+ * Internal dependencies
+ */
+const { runAddNewShippingZoneTest } = require( '@woocommerce/e2e-core-tests' );
+
+runAddNewShippingZoneTest();

tests/e2e/utils/CHANGELOG.md

@@ -17,6 +17,7 @@
 - `createCoupon( couponAmount )` component which accepts a coupon amount string (it defaults to 5) and creates a basic coupon. Returns the generated coupon code.
 - `evalAndClick( selector )` use Puppeteer page.$eval to select and click and element.
 - `selectOptionInSelect2( selector, value )` util helper method that search and select in any select2 type field
+- `addShippingZoneAndMethod( zoneName, zoneLocation, zipCode, zoneMethod )` util helper method for adding shipping zones with shipping methods
 - `createSimpleProductWithCategory` component which creates a simple product with categories, containing three parameters for title, price and category name.
 - `applyCoupon( couponName )` util helper method which applies previously created coupon to cart or checkout
 - `removeCoupon()` util helper method that removes a single coupon within cart or checkout

tests/e2e/utils/README.md

@@ -103,9 +103,10 @@ describe( 'Cart page', () => {
 | `clickFilter` | `selector` | Click on a list page filter |
 | `moveAllItemsToTrash` |  | Moves all items in a list view to the Trash |
 | `verifyAndPublish` | `noticeText` | Verify that an item can be published |
-| `selectOptionInSelect2` | `selector, value` | helper method that searchs for select2 type fields and select plus insert value inside |
-| `applyCoupon` | `couponName` | helper method which applies a coupon in cart or checkout |
-| `removeCoupon` | | helper method that removes a single coupon within cart or checkout |
+| `selectOptionInSelect2` | `selector, value` | helper method that searchs for select2 type fields and select plus insert value inside
+| `addShippingZoneAndMethod` | `zoneName, zoneLocation, zipCode, zoneMethod` | util helper method for adding shipping zones with shipping methods
+| `applyCoupon` | `couponName` | helper method which applies a coupon in cart or checkout
+| `removeCoupon` | | helper method that removes a single coupon within cart or checkout
 | `selectOrderAction` | `action` | Helper method to select an order action in the `Order Actions` postbox |
 | `clickUpdateOrder` | `noticeText`, `waitForSave` | Helper method to click the Update button on the order details page |
 

tests/e2e/utils/src/components.js

@@ -457,6 +457,48 @@ const createCoupon = async ( couponAmount = '5', discountType = 'Fixed cart disc
 	return couponCode;
 };
 
+/**
+ * Adds a shipping zone along with a shipping method.
+ *
+ * @param zoneName Shipping zone name.
+ * @param zoneLocation Shiping zone location. Defaults to United States (US).
+ * @param zipCode Shipping zone zip code. Defaults to empty one space.
+ * @param zoneMethod Shipping method type. Defaults to flat_rate (use also: free_shipping or local_pickup)
+ */
+const addShippingZoneAndMethod = async ( zoneName, zoneLocation = 'United States (US)', zipCode = ' ', zoneMethod = 'flat_rate' ) => {
+	await merchant.openNewShipping();
+	
+	// Fill shipping zone name
+	await page.waitForSelector('input#zone_name');
+	await expect(page).toFill('input#zone_name', zoneName);
+
+	// Select shipping zone location
+	// (.toSelect is not best option here because a lot of &nbsp are present in country/state names)
+	await expect(page).toFill('#zone_locations', zoneLocation);
+	await page.waitFor(1000); // avoiding flakiness
+	await page.keyboard.press('Tab');
+	await page.waitFor(1000); // avoiding flakiness
+	await page.keyboard.press('Enter');
+
+	// Fill shipping zone postcode if needed otherwise just put empty space
+	await page.waitForSelector('a.wc-shipping-zone-postcodes-toggle');
+	await expect(page).toClick('a.wc-shipping-zone-postcodes-toggle');
+	await expect(page).toFill('#zone_postcodes', zipCode);
+	await expect(page).toMatchElement('#zone_postcodes', zipCode);
+	await expect(page).toClick('button#submit');
+
+	// Add shipping zone method
+	await page.waitFor(2000); // avoiding flakiness
+	await expect(page).toClick('button.wc-shipping-zone-add-method', {text:'Add shipping method'});
+	await page.waitFor(2000); // avoiding flakiness
+	await page.waitForSelector('.wc-shipping-zone-method-description');
+	await expect(page).toSelect('select[name="add_method_id"]', zoneMethod);
+	await page.waitFor(1000); // avoiding flakiness
+	await expect(page).toClick('button#btn-ok');
+	await page.waitForSelector('#zone_locations');
+	await page.waitFor(1000); // avoiding flakiness
+};
+
 /**
  * Click the Update button on the order details page.
  *
@@ -468,7 +510,7 @@ const clickUpdateOrder = async ( noticeText, waitForSave = false ) => {
 		await page.waitFor( 2000 );
 	}
 
-	// PUpdate order
+	// Update order
 	await expect( page ).toClick( 'button.save_order' );
 	await page.waitForSelector( '.updated.notice' );
 
@@ -502,6 +544,7 @@ export {
 	verifyAndPublish,
 	addProductToOrder,
 	createCoupon,
+	addShippingZoneAndMethod,
 	createSimpleProductWithCategory,
   clickUpdateOrder,
 	deleteAllEmailLogs,

tests/e2e/utils/src/flows/constants.js

@@ -16,6 +16,7 @@ export const WP_ADMIN_NEW_ORDER = baseUrl + 'wp-admin/post-new.php?post_type=sho
 export const WP_ADMIN_NEW_PRODUCT = baseUrl + 'wp-admin/post-new.php?post_type=product';
 export const WP_ADMIN_WC_SETTINGS = baseUrl + 'wp-admin/admin.php?page=wc-settings&tab=';
 export const WP_ADMIN_PERMALINK_SETTINGS = baseUrl + 'wp-admin/options-permalink.php';
+export const WP_ADMIN_NEW_SHIPPING_ZONE = baseUrl + 'wp-admin/admin.php?page=wc-settings&tab=shipping&zone_id=new';
 
 export const SHOP_PAGE = baseUrl + 'shop';
 export const SHOP_PRODUCT_PAGE = baseUrl + '?p=';

tests/e2e/utils/src/flows/merchant.js

@@ -18,7 +18,8 @@ const {
 	WP_ADMIN_PERMALINK_SETTINGS,
 	WP_ADMIN_PLUGINS,
 	WP_ADMIN_SETUP_WIZARD,
-	WP_ADMIN_WC_SETTINGS
+	WP_ADMIN_WC_SETTINGS,
+	WP_ADMIN_NEW_SHIPPING_ZONE
 } = require( './constants' );
 
 const baseUrl = config.get( 'url' );
@@ -170,11 +171,17 @@ const merchant = {
 		}
 	},
 
+	openNewShipping: async () => {
+		await page.goto( WP_ADMIN_NEW_SHIPPING_ZONE, {
+			waitUntil: 'networkidle0',
+		} );
+	},
+
 	openEmailLog: async () => {
 		await page.goto( `${baseUrl}wp-admin/tools.php?page=wpml_plugin_log`, {
 			waitUntil: 'networkidle0',
 		} );
-	}
+	},
 };
 
 module.exports = merchant;

tests/e2e/utils/src/page-utils.js

@@ -10,6 +10,7 @@ import { pressKeyWithModifier } from '@wordpress/e2e-test-utils';
  * @param {string} value
  */
 const clearAndFillInput = async ( selector, value ) => {
+	await page.waitForSelector( selector );
 	await page.focus( selector );
 	await pressKeyWithModifier( 'primary', 'a' );
 	await page.type( selector, value );