Merge pull request #30523 from woocommerce/add/e2e-create-order-component

Add/e2e create order component and update tests

tests/e2e/core-tests/specs/activate-and-setup/activate.test.js

@@ -1,4 +1,3 @@
-/* eslint-disable jest/no-export, jest/no-disabled-tests */
 /**
  * Internal dependencies
  */

tests/e2e/core-tests/specs/merchant/wp-admin-order-apply-coupon.test.js

@@ -1,20 +1,16 @@
-/* eslint-disable jest/no-export, jest/no-standalone-expect */
-
 /**
  * Internal dependencies
  */
 const {
 	createSimpleProduct,
-	createSimpleOrder,
 	createCoupon,
 	uiUnblocked,
-	addProductToOrder,
 	evalAndClick,
-	merchant
+	merchant,
+	createOrder,
 } = require( '@woocommerce/e2e-utils' );
 
 const config = require( 'config' );
-const simpleProductName = config.get( 'products.simple.name' );
 const simpleProductPrice = config.has('products.simple.price') ? config.get('products.simple.price') : '9.99';
 const discountedPrice = simpleProductPrice - 5.00;
 
@@ -22,22 +18,18 @@ const couponDialogMessage = 'Enter a coupon code to apply. Discounts are applied
 
 let couponCode;
 let orderId;
+let productId;
 
 const runOrderApplyCouponTest = () => {
 	describe('WooCommerce Orders > Apply coupon', () => {
 		beforeAll(async () => {
-			await createSimpleProduct();
+			productId = await createSimpleProduct();
 			couponCode = await createCoupon();
-			
-			await merchant.login();
-			orderId = await createSimpleOrder('Pending payment', simpleProductName);
-			
-			await Promise.all([
-				addProductToOrder(orderId, simpleProductName),
+			orderId = await createOrder( { productId, status: 'pending' } );
 
-				// We need to remove any listeners on the `dialog` event otherwise we can't catch the dialog below
-				page.removeAllListeners('dialog'),
-			]);
+			await merchant.login();
+			await merchant.goToOrder( orderId );
+			await page.removeAllListeners('dialog');
 
 			// Make sure the simple product price is greater than the coupon amount
 			await expect(Number(simpleProductPrice)).toBeGreaterThan(5.00);
@@ -72,6 +64,8 @@ const runOrderApplyCouponTest = () => {
 
 			await uiUnblocked();
 
+			await page.waitFor(2000); // to avoid flakyness
+
 			// Verify the coupon pricing has been removed
 			await expect(page).not.toMatchElement('.wc_coupon_list li.code.editable', { text: couponCode.toLowerCase() });
 			await expect(page).not.toMatchElement('.wc-order-item-discount', { text: '5.00' });

tests/e2e/core-tests/specs/merchant/wp-admin-order-customer-payment-page.test.js

@@ -1,4 +1,3 @@
-/* eslint-disable jest/no-export, jest/no-disabled-tests, jest/no-standalone-expect */
 const { createSimpleProduct } = require( '@woocommerce/e2e-utils' );
 
 /**
@@ -6,8 +5,7 @@ const { createSimpleProduct } = require( '@woocommerce/e2e-utils' );
  */
 const {
 	merchant,
-	createSimpleOrder,
-	addProductToOrder,
+	createOrder,
 } = require( '@woocommerce/e2e-utils' );
 
 // TODO create a function for the logic below getConfigSimpleProduct(), see: https://github.com/woocommerce/woocommerce/issues/29072
@@ -15,23 +13,15 @@ const config = require( 'config' );
 const simpleProductName = config.get( 'products.simple.name' );
 const simpleProductPrice = config.has( 'products.simple.price' ) ? config.get( 'products.simple.price' ) : '9.99';
 
-let orderId;
-
 const runMerchantOrdersCustomerPaymentPage = () => {
+	let orderId;
+	let productId;
+
 	describe('WooCommerce Merchant Flow: Orders > Customer Payment Page', () => {
 		beforeAll(async () => {
-			await createSimpleProduct();
-			
+			productId = await createSimpleProduct();
+			orderId = await createOrder( { productId } );
 			await merchant.login();
-			orderId = await createSimpleOrder();
-			await addProductToOrder( orderId, simpleProductName );
-
-			// We first need to click "Update" otherwise the link doesn't show
-			await Promise.all([
-				expect(page).toClick( 'button.save_order' ),
-				page.waitForNavigation( { waitUntil: 'networkidle0' } ),
-			]);
-
 		});
 
 		it('should show the customer payment page link on a pending payment order', async () => {

tests/e2e/core-tests/specs/merchant/wp-admin-order-refund.test.js

@@ -1,28 +1,21 @@
-/* eslint-disable jest/no-export, jest/no-disabled-tests, */
-
 /**
  * Internal dependencies
  */
 const {
 	merchant,
 	createSimpleProduct,
-	createSimpleOrder,
 	verifyCheckboxIsSet,
 	verifyValueOfInputField,
 	uiUnblocked,
-	addProductToOrder,
 	evalAndClick,
+	createOrder,
 } = require( '@woocommerce/e2e-utils' );
 
 const { waitForSelector } = require( '@woocommerce/e2e-environment' );
 
 const config = require( 'config' );
-const simpleProductName = config.get( 'products.simple.name' );
 const simpleProductPrice = config.has('products.simple.price') ? config.get('products.simple.price') : '9.99';
 
-let orderId;
-let currencySymbol;
-
 /**
  * Evaluate and click a button selector then wait for a result selector.
  * This is a work around for what appears to be intermittent delays in handling confirm dialogs.
@@ -44,20 +37,24 @@ const clickAndWaitForSelector = async ( buttonSelector, resultSelector ) => {
 
 const runRefundOrderTest = () => {
 	describe('WooCommerce Orders > Refund an order', () => {
+		let productId;
+		let orderId;
+		let currencySymbol;
+
 		beforeAll(async () => {
-			await createSimpleProduct();
+			productId = await createSimpleProduct();
+			orderId = await createOrder( {
+				productId,
+				status: 'completed'
+			} );
 
 			await merchant.login();
-			orderId = await createSimpleOrder();
-			await addProductToOrder(orderId, simpleProductName);
+			await merchant.goToOrder( orderId );
 
 			// Get the currency symbol for the store's selected currency
 			await page.waitForSelector('.woocommerce-Price-currencySymbol');
 			let currencyElement = await page.$('.woocommerce-Price-currencySymbol');
 			currencySymbol = await page.evaluate(el => el.textContent, currencyElement);
-
-			// Update order status to `Completed` so we can issue a refund
-			await merchant.updateOrderStatus(orderId, 'Completed');
 		});
 
 		it('can issue a refund by quantity', async () => {
@@ -93,7 +90,6 @@ const runRefundOrderTest = () => {
 				// Verify system note was added
 				expect(page).toMatchElement('.system-note', { text: 'Order status changed from Completed to Refunded.' }),
 			]);
-			page.waitForNavigation( { waitUntil: 'networkidle0' } );
 		});
 
 		it('can delete an issued refund', async () => {

tests/e2e/core-tests/specs/merchant/wp-admin-order-searching.test.js

@@ -1,17 +1,12 @@
-/* eslint-disable jest/no-export, jest/no-disabled-tests, jest/expect-expect */
-
 /**
  * Internal dependencies
  */
 const {
 	merchant,
-	clearAndFillInput,
 	searchForOrder,
 	createSimpleProduct,
-	addProductToOrder,
-	clickUpdateOrder,
 	factories,
-	selectOptionInSelect2,
+	createOrder,
 } = require( '@woocommerce/e2e-utils' );
 
 const searchString = 'John Doe';
@@ -45,7 +40,7 @@ const customerShipping = {
 /**
  * Set the billing fields for the customer account for this test suite.
  *
- * @returns {Promise<void>}
+ * @returns {Promise<number>}
  */
 const updateCustomerBilling = async () => {
 	const client = factories.api.withDefaultPermalinks;
@@ -65,39 +60,33 @@ const updateCustomerBilling = async () => {
 		shipping: customerShipping,
 	};
 	await client.put( customerEndpoint + customerId, customerData );
+	return customerId;
 };
 
 const runOrderSearchingTest = () => {
 	describe('WooCommerce Orders > Search orders', () => {
+		let productId;
 		let orderId;
+		let customerId;
+
 		beforeAll( async () => {
-			await createSimpleProduct('Wanted Product');
-			await updateCustomerBilling();
+			productId = await createSimpleProduct('Wanted Product');
+			customerId = await updateCustomerBilling();
+			orderId = await createOrder({
+				customerId,
+				productId,
+				customerBilling,
+				customerShipping,
+			});
 
-			// Create new order for testing
+			// Login and open All Orders view
 			await merchant.login();
-			await merchant.openNewOrder();
-			await page.waitForSelector('#order_status');
-			await page.click('#customer_user');
-			await page.click('span.select2-search > input.select2-search__field');
-			await page.type('span.select2-search > input.select2-search__field', 'Jane Smith');
-			await page.waitFor(2000); // to avoid flakyness
-			await page.keyboard.press('Enter');
-
-			// Get the post id
-			const variablePostId = await page.$('#post_ID');
-			orderId = (await(await variablePostId.getProperty('value')).jsonValue());
-
-			// Save new order and add desired product to order
-			await clickUpdateOrder('Order updated.', true);
-			await addProductToOrder(orderId, 'Wanted Product');
-
-			// Open All Orders view
 			await merchant.openAllOrdersView();
 		});
 
 		it('can search for order by order id', async () => {
-			await searchForOrder(orderId, orderId, searchString);
+			// Convert the order ID to string so we can search on it
+			await searchForOrder(orderId.toString(), orderId, searchString);
 		});
 
 		it('can search for order by billing first name', async () => {

tests/e2e/utils/CHANGELOG.md

@@ -17,6 +17,7 @@
 - Added `deleteAllOrders()` that goes through and deletes all orders
 - Added `deleteAllShippingClasses()` which permanently deletes all shipping classes using the API
 - Added `statuses` optional parameter to `deleteAllRepositoryObjects()` to delete on specific statuses
+- Added `createOrder()` component util that creates an order using the API with the passed in details
 - Updated `addShippingZoneAndMethod` to use the API instead of UI to create shipping zones
 
 # 0.1.5

tests/e2e/utils/README.md

@@ -195,6 +195,7 @@ This package provides support for enabling retries in tests:
 | `clickUpdateOrder` | `noticeText`, `waitForSave` | Helper method to click the Update button on the order details page |
 | `deleteAllShippingZones` | | Delete all the existing shipping zones |
 | `waitForSelectorWithoutThrow` | `selector`, `timeoutInSeconds` | conditionally wait for a selector without throwing an error. Default timeout is 5 seconds |
+| `createOrder` | `orderOptions` | Creates an order using the API with the passed in details |
 
 ### Test Utilities
 

tests/e2e/utils/src/components.js

@@ -16,7 +16,7 @@ import {
 	waitForSelectorWithoutThrow,
 } from './page-utils';
 import factories from './factories';
-import { Coupon } from '@woocommerce/api';
+import { Coupon, Order } from '@woocommerce/api';
 
 const client = factories.api.withDefaultPermalinks;
 const config = require( 'config' );
@@ -322,6 +322,30 @@ const createGroupedProduct = async (groupedProduct = defaultGroupedProduct) => {
 	return id;
 };
 
+/**
+ * Use the API to create an order with the provided details.
+ *
+ * @param {object} orderOptions
+ * @returns {Promise<number>} ID of the created order.
+ */
+const createOrder = async ( orderOptions = {} ) => {
+	const newOrder = {
+		...( orderOptions.status ) && { status: orderOptions.status },
+		...( orderOptions.customerId ) && { customer_id: orderOptions.customerId },
+		...( orderOptions.customerBilling ) && { billing: orderOptions.customerBilling },
+		...( orderOptions.customerShipping ) && { shipping: orderOptions.customerShipping },
+		...( orderOptions.productId ) && { line_items: [
+				{ product_id: orderOptions.productId },
+			]
+		},
+	};
+
+	const repository = Order.restRepository( client );
+	const order = await repository.create( newOrder );
+
+	return order.id;
+}
+
 /**
  * Create a basic order with the provided order status.
  *
@@ -522,4 +546,5 @@ export {
 	clickUpdateOrder,
 	deleteAllEmailLogs,
 	deleteAllShippingZones,
+	createOrder,
 };