Added new tests for shopper variable product updates

tests/e2e/core-tests/CHANGELOG.md

@@ -11,9 +11,8 @@
 - Added new config variable for Simple Product price to `tests/e2e/env/config/default.json`. Defaults to 9.99
 - Shopper Single Product tests
 - Shopper Checkout Apply Coupon
-
-
 - Shopper Cart Apply Coupon
+- Shopper Variable product info updates on different varations
 
 ## Fixed
 

tests/e2e/core-tests/README.md

@@ -63,6 +63,7 @@ The functions to access the core tests are:
   - `runCheckoutPageTest` - Shopper can complete checkout
   - `runMyAccountPageTest` - Shopper can access my account page
   - `runSingleProductPageTest` - Shopper can view single product page in many variations (simple, variable, grouped)
+  -  `runVariableProductUpdateTest` - Shopper can view and update variations on a variable product
 
 ## Contributing a new test
 

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

@@ -15,6 +15,7 @@ const runCheckoutApplyCouponsTest = require( './shopper/front-end-checkout-coupo
 const runCheckoutPageTest = require( './shopper/front-end-checkout.test' );
 const runMyAccountPageTest = require( './shopper/front-end-my-account.test' );
 const runSingleProductPageTest = require( './shopper/front-end-single-product.test' );
+const runVariableProductUpdateTest = require( './shopper/front-end-variable-product-updates.test' );
 
 // Merchant tests
 const runCreateCouponTest = require( './merchant/wp-admin-coupon-new.test' );
@@ -41,6 +42,7 @@ const runShopperTests = () => {
 	runCheckoutPageTest();
 	runMyAccountPageTest();
 	runSingleProductPageTest();
+	runVariableProductUpdateTest();
 };
 
 const runMerchantTests = () => {
@@ -68,6 +70,7 @@ module.exports = {
 	runCheckoutPageTest,
 	runMyAccountPageTest,
 	runSingleProductPageTest,
+	runVariableProductUpdateTest,
 	runShopperTests,
 	runCreateCouponTest,
 	runCreateOrderTest,

tests/e2e/core-tests/specs/shopper/front-end-variable-product-updates.test.js

@@ -0,0 +1,76 @@
+/* eslint-disable jest/no-export, jest/no-disabled-tests */
+/**
+ * Internal dependencies
+ */
+const {
+	shopper,
+	merchant,
+	createVariableProduct,
+} = require( '@woocommerce/e2e-utils' );
+
+let variablePostIdValue;
+
+const cartDialogMessage = 'Please select some product options before adding this product to your cart.';
+
+const runVariableProductUpdateTest = () => {
+	describe('Update variable product',() => {
+		beforeAll(async () => {
+			await merchant.login();
+			variablePostIdValue = await createVariableProduct();
+			await merchant.logout();
+		});
+
+		it('can change variable attributes to the same value', async () => {
+			await shopper.goToProduct(variablePostIdValue);
+			await expect(page).toSelect('#attr-1', 'val1');
+			await expect(page).toSelect('#attr-2', 'val1');
+			await expect(page).toSelect('#attr-3', 'val1');
+
+			await expect(page).toMatchElement('.woocommerce-variation-price', { text: '9.99' });
+		});
+
+		it('can change attributes to combination with dimensions and weight', async () => {
+			await shopper.goToProduct(variablePostIdValue);
+			await expect(page).toSelect('#attr-1', 'val1');
+			await expect(page).toSelect('#attr-2', 'val2');
+			await expect(page).toSelect('#attr-3', 'val1');
+
+			await expect(page).toMatchElement('.woocommerce-variation-price', { text: '20.00' });
+			await expect(page).toMatchElement('.woocommerce-variation-availability', { text: 'Out of stock' });
+			await expect(page).toMatchElement('.woocommerce-product-attributes-item--weight', { text: '200 kg' });
+			await expect(page).toMatchElement('.woocommerce-product-attributes-item--dimensions', { text: '10 × 20 × 15 cm' });
+		});
+
+		it('can change variable product attributes to variation with a different price', async () => {
+			await shopper.goToProduct(variablePostIdValue);
+			await expect(page).toSelect('#attr-1', 'val1');
+			await expect(page).toSelect('#attr-2', 'val1');
+			await expect(page).toSelect('#attr-3', 'val2');
+
+			await expect(page).toMatchElement('.woocommerce-variation-price', { text: '11.99' });
+		});
+
+		it('can reset variations', async () => {
+			await shopper.goToProduct(variablePostIdValue);
+			await expect(page).toSelect('#attr-1', 'val1');
+			await expect(page).toSelect('#attr-2', 'val2');
+			await expect(page).toSelect('#attr-3', 'val1');
+
+			await expect(page).toClick('.reset_variations');
+
+			// Verify the reset by attempting to add the product to the cart
+			const couponDialog = await expect(page).toDisplayDialog(async () => {
+				await expect(page).toClick('.single_add_to_cart_button');
+			});
+
+			expect(couponDialog.message()).toMatch(cartDialogMessage);
+
+			// Accept the dialog
+			await couponDialog.accept();
+		});
+
+	});
+
+};
+
+module.exports = runVariableProductUpdateTest;

tests/e2e/specs/front-end/test-variable-product-updates.js

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

tests/e2e/utils/CHANGELOG.md

@@ -5,6 +5,7 @@
 ## Fixed
 
 - Missing `config` package dependency
+- Added `page.removeAllListeners('dialog')` to `createVariableProduct()` to fix dialog already handled errors
 
 ## Added
 

tests/e2e/utils/src/components.js

@@ -183,6 +183,10 @@ const createSimpleProduct = async () => {
  * Create variable product.
  */
 const createVariableProduct = async () => {
+
+	// We need to remove any listeners on the `dialog` event otherwise we can't catch the dialogs below
+	page.removeAllListeners('dialog');
+
 	// Go to "add product" page
 	await merchant.openNewProduct();