Merge pull request #29098 from woocommerce/e2e/e2e-page-utils-coupons

Add new e2e page utils and update coupon tests

tests/e2e/config/default.json

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

tests/e2e/core-tests/specs/shopper/front-end-cart-coupons.test.js

@@ -8,7 +8,8 @@ const {
 	createCoupon,
 	createSimpleProduct,
 	uiUnblocked,
-	clearAndFillInput,
+	applyCoupon,
+	removeCoupon,
 } = require( '@woocommerce/e2e-utils' );
 
 /**
@@ -20,28 +21,6 @@ const {
 	beforeAll,
 } = require( '@jest/globals' );
 
-/**
- * Apply a coupon code to the cart.
- *
- * @param couponCode string
- * @returns {Promise<void>}
- */
-const applyCouponToCart = async ( couponCode ) => {
-	await clearAndFillInput('#coupon_code', couponCode);
-	await expect(page).toClick('button', {text: 'Apply coupon'});
-	await uiUnblocked();
-};
-
-/**
- * Remove one coupon from the cart.
- *
- * @returns {Promise<void>}
- */
-const removeCouponFromCart = async () => {
-	await expect(page).toClick('.woocommerce-remove-coupon', {text: '[Remove]'});
-	await uiUnblocked();
-	await expect(page).toMatchElement('.woocommerce-message', {text: 'Coupon has been removed.'});
-}
 const runCartApplyCouponsTest = () => {
 	describe('Cart applying coupons', () => {
 		let couponFixedCart;
@@ -62,42 +41,42 @@ const runCartApplyCouponsTest = () => {
 		});
 
 		it('allows customer to apply fixed cart coupon', async () => {
-			await applyCouponToCart( couponFixedCart );
+			await applyCoupon(couponFixedCart);
 			await expect(page).toMatchElement('.woocommerce-message', {text: 'Coupon code applied successfully.'});
 
 			// Verify discount applied and order total
 			await page.waitForSelector('.order-total');
 			await expect(page).toMatchElement('.cart-discount .amount', {text: '$5.00'});
 			await expect(page).toMatchElement('.order-total .amount', {text: '$4.99'});
-			await removeCouponFromCart();
+			await removeCoupon(couponFixedCart);
 		});
 
 		it('allows customer to apply percentage coupon', async () => {
-			await applyCouponToCart( couponPercentage );
+			await applyCoupon(couponPercentage);
 			await expect(page).toMatchElement('.woocommerce-message', {text: 'Coupon code applied successfully.'});
 
 			// Verify discount applied and order total
 			await page.waitForSelector('.order-total');
 			await expect(page).toMatchElement('.cart-discount .amount', {text: '$4.99'});
 			await expect(page).toMatchElement('.order-total .amount', {text: '$5.00'});
-			await removeCouponFromCart();
+			await removeCoupon(couponPercentage);
 		});
 
 		it('allows customer to apply fixed product coupon', async () => {
-			await applyCouponToCart( couponFixedProduct );
+			await applyCoupon(couponFixedProduct);
 			await expect(page).toMatchElement('.woocommerce-message', {text: 'Coupon code applied successfully.'});
 
 			// Verify discount applied and order total
 			await page.waitForSelector('.order-total');
 			await expect(page).toMatchElement('.cart-discount .amount', {text: '$5.00'});
 			await expect(page).toMatchElement('.order-total .amount', {text: '$4.99'});
-			await removeCouponFromCart();
+			await removeCoupon(couponFixedProduct);
 		});
 
 		it('prevents customer applying same coupon twice', async () => {
-			await applyCouponToCart( couponFixedCart );
+			await applyCoupon(couponFixedCart);
 			await expect(page).toMatchElement('.woocommerce-message', {text: 'Coupon code applied successfully.'});
-			await applyCouponToCart( couponFixedCart );
+			await applyCoupon(couponFixedCart);
 			// Verify only one discount applied
 			// This is a work around for Puppeteer inconsistently finding 'Coupon code already applied'
 			await expect(page).toMatchElement('.cart-discount .amount', {text: '$5.00'});
@@ -105,7 +84,7 @@ const runCartApplyCouponsTest = () => {
 		});
 
 		it('allows customer to apply multiple coupons', async () => {
-			await applyCouponToCart( couponFixedProduct );
+			await applyCoupon(couponFixedProduct);
 			await expect(page).toMatchElement('.woocommerce-message', {text: 'Coupon code applied successfully.'});
 
 			// Verify discount applied and order total
@@ -114,8 +93,8 @@ const runCartApplyCouponsTest = () => {
 		});
 
 		it('restores cart total when coupons are removed', async () => {
-			await removeCouponFromCart();
-			await removeCouponFromCart();
+			await removeCoupon(couponFixedCart);
+			await removeCoupon(couponFixedProduct);
 			await expect(page).toMatchElement('.order-total .amount', {text: '$9.99'});
 		});
 	});

tests/e2e/core-tests/specs/shopper/front-end-checkout-coupons.test.js

@@ -8,7 +8,8 @@ const {
 	createCoupon,
 	createSimpleProduct,
 	uiUnblocked,
-	clearAndFillInput,
+	applyCoupon,
+	removeCoupon,
 } = require( '@woocommerce/e2e-utils' );
 
 /**
@@ -20,30 +21,6 @@ const {
 	beforeAll,
 } = require( '@jest/globals' );
 
-/**
- * Apply a coupon code to the cart.
- *
- * @param couponCode string
- * @returns {Promise<void>}
- */
-const applyCouponToCart = async ( couponCode ) => {
-	await expect(page).toClick('a', {text: 'Click here to enter your code'});
-	await uiUnblocked();
-	await clearAndFillInput('#coupon_code', couponCode);
-	await expect(page).toClick('button', {text: 'Apply coupon'});
-	await uiUnblocked();
-};
-
-/**
- * Remove one coupon from the cart.
- *
- * @returns {Promise<void>}
- */
-const removeCouponFromCart = async () => {
-	await expect(page).toClick('.woocommerce-remove-coupon', {text: '[Remove]'});
-	await uiUnblocked();
-	await expect(page).toMatchElement('.woocommerce-message', {text: 'Coupon has been removed.'});
-}
 const runCheckoutApplyCouponsTest = () => {
 	describe('Checkout coupons', () => {
 		let couponFixedCart;
@@ -64,7 +41,7 @@ const runCheckoutApplyCouponsTest = () => {
 		});
 
 		it('allows customer to apply fixed cart coupon', async () => {
-			await applyCouponToCart( couponFixedCart );
+			await applyCoupon(couponFixedCart);
 			await expect(page).toMatchElement('.woocommerce-message', {text: 'Coupon code applied successfully.'});
 
 			// Wait for page to expand total calculations to avoid flakyness
@@ -73,31 +50,31 @@ const runCheckoutApplyCouponsTest = () => {
 			// Verify discount applied and order total
 			await expect(page).toMatchElement('.cart-discount .amount', {text: '$5.00'});
 			await expect(page).toMatchElement('.order-total .amount', {text: '$4.99'});
-			await removeCouponFromCart();
+			await removeCoupon(couponFixedCart);
 		});
 
 		it('allows customer to apply percentage coupon', async () => {
-			await applyCouponToCart( couponPercentage );
+			await applyCoupon(couponPercentage);
 			await expect(page).toMatchElement('.woocommerce-message', {text: 'Coupon code applied successfully.'});
 
 			// Verify discount applied and order total
 			await expect(page).toMatchElement('.cart-discount .amount', {text: '$4.99'});
 			await expect(page).toMatchElement('.order-total .amount', {text: '$5.00'});
-			await removeCouponFromCart();
+			await removeCoupon(couponPercentage);
 		});
 
 		it('allows customer to apply fixed product coupon', async () => {
-			await applyCouponToCart( couponFixedProduct );
+			await applyCoupon(couponFixedProduct);
 			await expect(page).toMatchElement('.woocommerce-message', {text: 'Coupon code applied successfully.'});
 			await expect(page).toMatchElement('.cart-discount .amount', {text: '$5.00'});
 			await expect(page).toMatchElement('.order-total .amount', {text: '$4.99'});
-			await removeCouponFromCart();
+			await removeCoupon(couponFixedProduct);
 		});
 
 		it('prevents customer applying same coupon twice', async () => {
-			await applyCouponToCart( couponFixedCart );
+			await applyCoupon(couponFixedCart);
 			await expect(page).toMatchElement('.woocommerce-message', {text: 'Coupon code applied successfully.'});
-			await applyCouponToCart( couponFixedCart );
+			await applyCoupon(couponFixedCart);
 			// Verify only one discount applied
 			// This is a work around for Puppeteer inconsistently finding 'Coupon code already applied'
 			await expect(page).toMatchElement('.cart-discount .amount', {text: '$5.00'});
@@ -105,14 +82,14 @@ const runCheckoutApplyCouponsTest = () => {
 		});
 
 		it('allows customer to apply multiple coupons', async () => {
-			await applyCouponToCart( couponFixedProduct );
+			await applyCoupon(couponFixedProduct);
 			await expect(page).toMatchElement('.woocommerce-message', {text: 'Coupon code applied successfully.'});
 			await expect(page).toMatchElement('.order-total .amount', {text: '$0.00'});
 		});
 
 		it('restores cart total when coupons are removed', async () => {
-			await removeCouponFromCart();
-			await removeCouponFromCart();
+			await removeCoupon(couponFixedCart);
+			await removeCoupon(couponFixedProduct);
 			await expect(page).toMatchElement('.order-total .amount', {text: '$9.99'});
 		});
 	});

tests/e2e/utils/CHANGELOG.md

@@ -17,6 +17,8 @@
 - `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
+- `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
 
 ## Changes
 

tests/e2e/utils/README.md

@@ -102,6 +102,8 @@ describe( 'Cart page', () => {
 | `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
 
 ### Test Utilities
 

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

@@ -209,6 +209,39 @@ const selectOptionInSelect2 = async ( value, selector = 'input.select2-search__f
 	await page.keyboard.press('Enter');
 };
 
+/**
+ * Apply a coupon code within cart or checkout.
+ * Method will try to apply a coupon in the checkout, otherwise will try to apply in the cart.
+ *
+ * @param couponCode string
+ * @returns {Promise<void>}
+ */
+const applyCoupon = async ( couponCode ) => {
+	try {
+		await expect(page).toClick('a', {text: 'Click here to enter your code'});
+		await uiUnblocked();
+		await clearAndFillInput('#coupon_code', couponCode);
+		await expect(page).toClick('button', {text: 'Apply coupon'});
+		await uiUnblocked();
+	} catch (error) {
+		await clearAndFillInput('#coupon_code', couponCode);
+		await expect(page).toClick('button', {text: 'Apply coupon'});
+		await uiUnblocked();
+	};
+};
+
+/**
+ * Remove one coupon within cart or checkout.
+ *
+ * @param couponCode Coupon name.
+ * @returns {Promise<void>}
+ */
+const removeCoupon = async ( couponCode ) => {
+	await expect(page).toClick('[data-coupon="'+couponCode.toLowerCase()+'"]', {text: '[Remove]'});
+	await uiUnblocked();
+	await expect(page).toMatchElement('.woocommerce-message', {text: 'Coupon has been removed.'});
+};
+
 export {
 	clearAndFillInput,
 	clickTab,
@@ -225,4 +258,6 @@ export {
 	moveAllItemsToTrash,
 	evalAndClick,
 	selectOptionInSelect2,
+	applyCoupon,
+	removeCoupon,
 };