Add new e2e test merchant shipping zones

In progress still

tests/e2e/config/default.json

@@ -1,6 +1,5 @@
 {
   "url": "http://localhost:8084/",
-  "appName": "woocommerce_e2e",
   "users": {
     "admin": {
       "username": "admin",

tests/e2e/core-tests/CHANGELOG.md

@@ -13,6 +13,7 @@
 - Shopper Checkout Apply Coupon
 - Merchant Orders Customer Checkout Page
 - Shopper Cart Apply Coupon
+- Merchant Settings Shipping Zones
 
 ## Fixed
 

tests/e2e/core-tests/README.md

@@ -56,6 +56,7 @@ The functions to access the core tests are:
   - `runOrderRefundTest` - Merchant can refund an order
   - `runOrderApplyCouponTest` - Merchant can apply a coupon to an order
   - `runMerchantOrdersCustomerPaymentPage` - Merchant can visit the customer payment page
+  - `runAddNewShippingZoneTest` - Merchant can create shipping zones and let shopper test them
 
 ### Shopper
 

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

@@ -27,6 +27,7 @@ const runOrderStatusFiltersTest = require( './merchant/wp-admin-order-status-fil
 const runOrderRefundTest = require( './merchant/wp-admin-order-refund.test' );
 const runOrderApplyCouponTest = require( './merchant/wp-admin-order-apply-coupon.test' );
 const runMerchantOrdersCustomerPaymentPage = require( './merchant/wp-admin-order-customer-payment-page.test' );
+const runAddNewShippingZoneTest = require ( './merchant/wp-admin-settings-shipping-zones.test' );
 
 const runSetupOnboardingTests = () => {
 	runActivationTest();
@@ -56,6 +57,7 @@ const runMerchantTests = () => {
 	runOrderRefundTest();
 	runOrderApplyCouponTest();
 	runMerchantOrdersCustomerPaymentPage();
+	runAddNewShippingZoneTest();
 }
 
 module.exports = {
@@ -83,4 +85,5 @@ module.exports = {
 	runOrderApplyCouponTest,
 	runMerchantOrdersCustomerPaymentPage,
 	runMerchantTests,
+	runAddNewShippingZoneTest,
 };

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

@@ -0,0 +1,59 @@
+/* eslint-disable jest/no-export, jest/no-disabled-tests */
+/**
+ * Internal dependencies
+ */
+const {
+	merchant,
+	addShippingZoneAndMethod,
+} = require( '@woocommerce/e2e-utils' );
+
+/**
+ * External dependencies
+ */
+const {
+	it,
+	describe,
+	beforeAll,
+} = require( '@jest/globals' );
+
+// Shipping Zone Names
+const nameUSFlatRate = 'US with Flat rate';
+const nameCAFreeShipping = 'CA with Free shipping';
+const nameSFLocalPickup = 'SF with Local pickup';
+// Shipping Zone Locations
+const californiaUS = 'California, United States (US)';
+const sanFranciscoCA = 'San Francisco';
+
+const runAddNewShippingZoneTest = () => {
+	describe('WooCommerce Shipping Settings - Add new shipping zone', () => {
+		beforeAll(async () => {
+			await merchant.login();
+		});
+
+		it('add new shipping zone for the US with Flat rate', async () => {
+			// Add a new shipping zone for the US with Flat rate
+			await addShippingZoneAndMethod(shippingZoneNameUSFlatRate);
+
+			// Verify that settings have been saved
+			await Promise.all([
+				verifyValueOfInputField('input#zone_name', nameUSFlatRate),
+				expect(page).toMatchElement('li.select2-selection__choice', {text: shippingZoneNameUSFlatRate}),
+				expect(page).toMatchElement('a.wc-shipping-zone-method-settings', {text: 'Flat rate'})
+			]);
+		});
+
+		it('add new shipping zone for California with Free shipping', async () => {
+			// Add a new shipping zone for California with Free shipping
+			await addShippingZoneAndMethod(nameCAFreeShipping, californiaUS, 'Free shipping');
+
+		});
+
+		it('add new shipping zone for San Francisco with Local pickup for free', async () => {
+			// Add a new shipping zone for the US with Flat Rate
+			await addShippingZoneAndMethod(nameSFLocalPickup, sanFranciscoCA, 'Local pickup');
+
+		});
+	});
+};
+
+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/src/components.js

@@ -426,6 +426,32 @@ 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 zoneMethod Shipping method type. Defaults to Flat rate method.
+ */
+const addShippingZoneAndMethod = async ( zoneName, zoneLocation = 'United States (US)', zoneMethod = 'flat_rate' ) => {
+	await merchant.openNewShipping();
+	
+	// Fill shipping zone name
+	await expect(page).toFill('input#zone_name', zoneName);
+
+	// Select shipping zone location
+	await expect(page).toSelect('#zone_locations', "   " + zoneLocation);
+
+	// Add shipping zone method
+	await expect(page).toClick('button.button.wc-shipping-zone-add-method', {text:'Add shipping method'});
+	await expect(page).toSelect('select[name="add_method_id"]', zoneMethod);
+	await expect(page).toClick('button#btn-ok');
+	await page.waitForSelector('#zone_locations');
+
+	// Save the shipping zone with method
+	await expect(page).toClick('#submit');
+};
+
 export {
 	completeOnboardingWizard,
 	createSimpleProduct,
@@ -435,4 +461,5 @@ export {
 	verifyAndPublish,
 	addProductToOrder,
 	createCoupon,
+	addShippingZoneAndMethod,
 };

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

@@ -15,6 +15,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

@@ -156,6 +156,12 @@ const merchant = {
 			await expect( page ).toMatchElement( 'label[for="customer_user"] a[href*=user-edit]', { text: 'Profile' } );
 		}
 	},
+
+	openNewShipping: async () => {
+		await page.goto( WP_ADMIN_NEW_SHIPPING_ZONE, {
+			waitUntil: 'networkidle0',
+		} );
+	},
 };
 
 module.exports = merchant;