Merge pull request #29173 from woocommerce/e2e/e2e-merchant-search-orders

Add new e2e test merchant order searching

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 Order Searching
 - 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
+  - `runOrderSearchingTest` - Merchant can search for order via different terms
   - `runAddNewShippingZoneTest` - Merchant can create shipping zones and let shopper test them
   - `runMerchantOrderEmailsTest` - Merchant can receive order emails and resend emails by Order Actions
 

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

@@ -35,6 +35,7 @@ const runProductEditDetailsTest = require( './merchant/wp-admin-product-edit-det
 const runProductSearchTest = require( './merchant/wp-admin-product-search.test' );
 const runMerchantOrdersCustomerPaymentPage = require( './merchant/wp-admin-order-customer-payment-page.test' );
 const runMerchantOrderEmailsTest = require( './merchant/wp-admin-order-emails.test' );
+const runOrderSearchingTest = require( './merchant/wp-admin-order-searching.test' );
 
 // REST API tests
 const runExternalProductAPITest = require( './api/external-product.test' );
@@ -62,6 +63,7 @@ const runShopperTests = () => {
 };
 
 const runMerchantTests = () => {
+	runOrderSearchingTest();
 	runAddNewShippingZoneTest();
 	runCreateCouponTest();
 	runCreateOrderTest();
@@ -121,6 +123,7 @@ module.exports = {
 	runMerchantOrdersCustomerPaymentPage,
 	runMerchantOrderEmailsTest,
 	runMerchantTests,
+	runOrderSearchingTest,
 	runAddNewShippingZoneTest,
 	runProductBrowseSearchSortTest,
 	runApiTests,

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

@@ -0,0 +1,138 @@
+/* eslint-disable jest/no-export, jest/no-disabled-tests, */
+
+/**
+ * Internal dependencies
+ */
+const {
+	merchant,
+	clearAndFillInput,
+	selectOptionInSelect2,
+	searchForOrder,
+	createSimpleProduct,
+	addProductToOrder,
+	clickUpdateOrder,
+} = require( '@woocommerce/e2e-utils' );
+
+const runOrderSearchingTest = () => {
+	describe('WooCommerce Orders > Search orders', () => {
+		let orderId;
+		beforeAll(async () => {
+			await merchant.login();
+			await createSimpleProduct('Wanted Product');
+
+			await Promise.all([
+				// Create new order for testing
+				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', 'Customer'),
+				await page.waitFor(2000), // to avoid flakyness
+				await page.keyboard.press('Enter'),
+			]);
+
+			await Promise.all([
+				// Change the shipping data
+				await page.waitFor(1000), // to avoid flakiness
+				await page.waitForSelector('#_shipping_first_name'),
+				await clearAndFillInput('#_shipping_first_name', 'Tim'),
+				await clearAndFillInput('#_shipping_last_name', 'Clark'),
+				await clearAndFillInput('#_shipping_address_1', 'Oxford Ave'),
+				await clearAndFillInput('#_shipping_address_2', 'Linwood Ave'),
+				await clearAndFillInput('#_shipping_city', 'Buffalo'),
+				await clearAndFillInput('#_shipping_postcode', '14201'),
+				await page.keyboard.press('Tab'),
+				await page.keyboard.press('Tab'),
+				await page.keyboard.press('Enter'),
+				await page.select('select[name="_shipping_state"]', 'NY'),
+			]);
+
+			// Get the post id
+			const variablePostId = await page.$('#post_ID');
+			orderId = (await(await variablePostId.getProperty('value')).jsonValue());
+
+			// Save new order
+			await clickUpdateOrder('Order updated.', true);
+			await addProductToOrder(orderId, 'Wanted Product');
+			await merchant.openAllOrdersView();
+		});
+
+		it('can search for order by order id', async () => {
+			await searchForOrder(orderId, orderId, 'John Doe');
+		});
+
+		it('can search for order by billing first name', async () => {
+			await searchForOrder('John', orderId, 'John Doe');
+		})
+
+		it('can search for order by billing last name', async () => {
+			await searchForOrder('Doe', orderId, 'John Doe');
+		})
+
+		it('can search for order by billing company name', async () => {
+			await searchForOrder('Automattic', orderId, 'John Doe');
+		})
+
+		it('can search for order by billing first address', async () => {
+			await searchForOrder('addr 1', orderId, 'John Doe');
+		})
+
+		it('can search for order by billing second address', async () => {
+			await searchForOrder('addr 2', orderId, 'John Doe');
+		})
+
+		it('can search for order by billing city name', async () => {
+			await searchForOrder('San Francisco', orderId, 'John Doe');
+		})
+
+		it('can search for order by billing post code', async () => {
+			await searchForOrder('94107', orderId, 'John Doe');
+		})
+
+		it('can search for order by billing email', async () => {
+			await searchForOrder('john.doe@example.com', orderId, 'John Doe');
+		})
+
+		it('can search for order by billing phone', async () => {
+			await searchForOrder('123456789', orderId, 'John Doe');
+		})
+
+		it('can search for order by billing state', async () => {
+			await searchForOrder('CA', orderId, 'John Doe');
+		})
+
+		it('can search for order by shipping first name', async () => {
+			await searchForOrder('Tim', orderId, 'John Doe');
+		})
+
+		it('can search for order by shipping last name', async () => {
+			await searchForOrder('Clark', orderId, 'John Doe');
+		})
+
+		it('can search for order by shipping first address', async () => {
+			await searchForOrder('Oxford Ave', orderId, 'John Doe');
+		})
+
+		it('can search for order by shipping second address', async () => {
+			await searchForOrder('Linwood Ave', orderId, 'John Doe');
+		})
+
+		it('can search for order by shipping city name', async () => {
+			await searchForOrder('Buffalo', orderId, 'John Doe');
+		})
+
+		it('can search for order by shipping postcode name', async () => {
+			await searchForOrder('14201', orderId, 'John Doe');
+		})
+
+		it('can search for order by shipping state name', async () => {
+			await searchForOrder('NY', orderId, 'John Doe');
+		})
+
+		it('can search for order by item name', async () => {
+			await searchForOrder('Wanted Product', orderId, 'John Doe');
+		})
+	});
+};
+
+module.exports = runOrderSearchingTest;

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

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

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
+- `searchForOrder( value, orderId, customerName )` util helper method that search order with different terms
 - `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

tests/e2e/utils/README.md

@@ -103,10 +103,11 @@ 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
-| `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
+| `selectOptionInSelect2` | `selector, value` | helper method that searchs for select2 type fields and select plus insert value inside |
+| `searchForOrder` | `value, orderId, customerName` | helper method that searchs for an order via many different terms |
+| `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

@@ -175,11 +175,14 @@ const completeOnboardingWizard = async () => {
 
 /**
  * Create simple product.
+ *
+ * @param productTitle - Defaults to Simple Product. Customizable title.
+ * @param productPrice - Defaults to $9.99. Customizable pricing.
  */
-const createSimpleProduct = async () => {
+const createSimpleProduct = async ( productTitle = simpleProductName, productPrice = simpleProductPrice ) => {
 	const product = await factories.products.simple.create( {
-		name: simpleProductName,
-		regularPrice: simpleProductPrice
+		name: productTitle,
+		regularPrice: productPrice
 	} );
 	return product.id;
 } ;
@@ -546,6 +549,6 @@ export {
 	createCoupon,
 	addShippingZoneAndMethod,
 	createSimpleProductWithCategory,
-  clickUpdateOrder,
+	clickUpdateOrder,
 	deleteAllEmailLogs,
 };

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

@@ -198,18 +198,35 @@ const evalAndClick = async ( selector ) => {
 };
 
 /**
- * Select a value from select2 input field.
+ * Select a value from select2 search input field.
  *
  * @param {string} value Value of what to be selected
- * @param {string} selector Selector of the select2
+ * @param {string} selector Selector of the select2 search field
  */
 const selectOptionInSelect2 = async ( value, selector = 'input.select2-search__field' ) => {
 	await page.waitForSelector(selector);
+	await page.click(selector);
 	await page.type(selector, value);
 	await page.waitFor(2000); // to avoid flakyness, must wait before pressing Enter
 	await page.keyboard.press('Enter');
 };
 
+/**
+ * Search by any term for an order
+ *
+ * @param {string} value Value to be entered into the search field
+ * @param {string} orderId Order ID
+ * @param {string} customerName Customer's full name attached to order ID.
+ */
+const searchForOrder = async (value, orderId, customerName) => {
+	await clearAndFillInput('#post-search-input', value);
+	await expect(page).toMatchElement('#post-search-input', value);
+	await expect(page).toClick('#search-submit');
+	await page.waitForSelector('#the-list');
+	await page.waitFor(1000);
+	await expect(page).toMatchElement('.order_number > a.order-view', {text: `#${orderId} ${customerName}`});
+};
+
 /**
  * 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.
@@ -273,7 +290,8 @@ export {
 	moveAllItemsToTrash,
 	evalAndClick,
 	selectOptionInSelect2,
-  applyCoupon,
+	searchForOrder,
+	applyCoupon,
 	removeCoupon,
 	selectOrderAction,
 };