Merge pull request #28437 from woocommerce/add/e2e-merchant-orders-filter-orders

Added tests for Merchant / Orders / Filter Orders flow

tests/e2e/core-tests/CHANGELOG.md

@@ -1,5 +1,8 @@
 # Unreleased
 
+## Added
+- Merchant Order Status Filter tests
+
 ## Fixed
 
 - Flaky Create Product, Coupon, and Order tests

tests/e2e/core-tests/README.md

@@ -52,6 +52,7 @@ The functions to access the core tests are:
 - `runUpdateGeneralSettingsTest` - Merchant can update general settings
 - `runProductSettingsTest` - Merchant can update product settings
 - `runTaxSettingsTest` - Merchant can update tax settings
+- `runOrderStatusFilterTest` - Merchant can filter orders by order status
 
 ### Shopper
 

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

@@ -2,19 +2,26 @@
 /*
  * Internal dependencies
  */
+
+// Setup and onboarding tests
 const runActivationTest = require( './activate-and-setup/activate.test' );
 const { runOnboardingFlowTest, runTaskListTest } = require( './activate-and-setup/onboarding-tasklist.test' );
 const runInitialStoreSettingsTest = require( './activate-and-setup/setup.test' );
+
+// Shopper tests
 const runCartPageTest = require( './shopper/front-end-cart.test' );
 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' );
+
+// Merchant tests
 const runCreateCouponTest = require( './merchant/wp-admin-coupon-new.test' );
 const runCreateOrderTest = require( './merchant/wp-admin-order-new.test' );
 const { runAddSimpleProductTest, runAddVariableProductTest } = require( './merchant/wp-admin-product-new.test' );
 const runUpdateGeneralSettingsTest = require( './merchant/wp-admin-settings-general.test' );
 const runProductSettingsTest = require( './merchant/wp-admin-settings-product.test' );
 const runTaxSettingsTest = require( './merchant/wp-admin-settings-tax.test' );
+const runOrderStatusFiltersTest = require( './merchant/wp-admin-order-status-filters.test' );
 
 const runSetupOnboardingTests = () => {
 	runActivationTest();
@@ -38,6 +45,7 @@ const runMerchantTests = () => {
 	runUpdateGeneralSettingsTest();
 	runProductSettingsTest();
 	runTaxSettingsTest();
+	runOrderStatusFiltersTest();
 }
 
 module.exports = {
@@ -58,5 +66,6 @@ module.exports = {
 	runUpdateGeneralSettingsTest,
 	runProductSettingsTest,
 	runTaxSettingsTest,
+	runOrderStatusFiltersTest,
 	runMerchantTests,
 };

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

@@ -0,0 +1,182 @@
+/* eslint-disable jest/no-export, jest/no-disabled-tests */
+/**
+ * Internal dependencies
+ */
+const {
+	StoreOwnerFlow,
+	createSimpleOrder,
+	clickFilter,
+	moveAllItemsToTrash,
+} = require( '@woocommerce/e2e-utils' );
+
+const statusColumnTextSelector = 'mark.order-status > span';
+
+// Define order statuses to filter against
+const orderStatus = {
+	pending: {
+		name: 'wc-pending',
+		description: { text: 'Pending payment' },
+	},
+	processing: {
+		name: 'wc-processing',
+		description: { text: 'Processing' },
+	},
+	onHold: {
+		name: 'wc-on-hold',
+		description: { text: 'On hold' },
+	},
+	completed: {
+		name: 'wc-completed',
+		description: { text: 'Completed' },
+	},
+	cancelled: {
+		name: 'wc-cancelled',
+		description: { text: 'Cancelled' },
+	},
+	refunded: {
+		name: 'wc-refunded',
+		description: { text: 'Refunded' },
+	},
+	failed: {
+		name: 'wc-failed',
+		description: { text: 'Failed' },
+	}
+};
+
+const runOrderStatusFiltersTest = () => {
+	describe('WooCommerce Orders > Filter Orders by Status', () => {
+		beforeAll(async () => {
+			// First, let's login
+			await StoreOwnerFlow.login();
+
+			// Next, let's create some orders we can filter against
+			await createSimpleOrder(orderStatus.pending.description.text);
+			await createSimpleOrder(orderStatus.processing.description.text);
+			await createSimpleOrder(orderStatus.onHold.description.text);
+			await createSimpleOrder(orderStatus.completed.description.text);
+			await createSimpleOrder(orderStatus.cancelled.description.text);
+			await createSimpleOrder(orderStatus.refunded.description.text);
+			await createSimpleOrder(orderStatus.failed.description.text);
+		}, 40000);
+
+		afterAll( async () => {
+			// Make sure we're on the all orders view and cleanup the orders we created
+			await StoreOwnerFlow.openAllOrdersView();
+			await moveAllItemsToTrash();
+		});
+
+		it('should filter by Pending payment', async () => {
+			await StoreOwnerFlow.openAllOrdersView();
+			await clickFilter('.' + orderStatus.pending.name);
+			await expect(page).toMatchElement(statusColumnTextSelector, orderStatus.pending.description);
+
+			// Verify other statuses don't show
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.processing.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.completed.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.cancelled.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.refunded.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.onHold.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.failed.description);
+		});
+
+		it('should filter by Processing', async () => {
+			await StoreOwnerFlow.openAllOrdersView();
+			await clickFilter('.' + orderStatus.processing.name);
+			await expect(page).toMatchElement(statusColumnTextSelector, orderStatus.processing.description);
+
+			// Verify other statuses don't show
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.pending.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.completed.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.cancelled.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.refunded.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.onHold.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.failed.description);
+		});
+
+		it('should filter by On hold', async () => {
+			await StoreOwnerFlow.openAllOrdersView();
+			await clickFilter('.' + orderStatus.onHold.name);
+			await expect(page).toMatchElement(statusColumnTextSelector, orderStatus.onHold.description);
+
+			// Verify other statuses don't show
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.pending.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.processing.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.completed.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.cancelled.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.refunded.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.failed.description);
+		});
+
+		it('should filter by Completed', async () => {
+			await StoreOwnerFlow.openAllOrdersView();
+			await clickFilter('.' + orderStatus.completed.name);
+			await expect(page).toMatchElement(statusColumnTextSelector, orderStatus.completed.description);
+
+			// Verify other statuses don't show
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.pending.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.processing.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.cancelled.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.refunded.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.onHold.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.failed.description);
+		});
+
+		it('should filter by Cancelled', async () => {
+			await StoreOwnerFlow.openAllOrdersView();
+			await clickFilter('.' + orderStatus.cancelled.name);
+			await expect(page).toMatchElement(statusColumnTextSelector, orderStatus.cancelled.description);
+
+			// Verify other statuses don't show
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.pending.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.processing.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.completed.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.refunded.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.onHold.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.failed.description);
+		});
+
+		it('should filter by Refunded', async () => {
+			await StoreOwnerFlow.openAllOrdersView();
+			await clickFilter('.' + orderStatus.refunded.name);
+			await expect(page).toMatchElement(statusColumnTextSelector, orderStatus.refunded.description);
+
+			// Verify other statuses don't show
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.pending.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.processing.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.completed.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.cancelled.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.onHold.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.failed.description);
+		});
+
+		it('should filter by Failed', async () => {
+			await StoreOwnerFlow.openAllOrdersView();
+			await clickFilter('.' + orderStatus.failed.name);
+			await expect(page).toMatchElement(statusColumnTextSelector, orderStatus.failed.description);
+
+			// Verify other statuses don't show
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.pending.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.processing.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.completed.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.cancelled.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.refunded.description);
+			await expect(page).not.toMatchElement(statusColumnTextSelector, orderStatus.onHold.description);
+		});
+
+		it('should filter by All', async () => {
+			await StoreOwnerFlow.openAllOrdersView();
+			// Make sure all the order statuses that were created show in this list
+			await clickFilter('.all');
+			await expect(page).toMatchElement(statusColumnTextSelector, orderStatus.pending.description);
+			await expect(page).toMatchElement(statusColumnTextSelector, orderStatus.processing.description);
+			await expect(page).toMatchElement(statusColumnTextSelector, orderStatus.completed.description);
+			await expect(page).toMatchElement(statusColumnTextSelector, orderStatus.cancelled.description);
+			await expect(page).toMatchElement(statusColumnTextSelector, orderStatus.refunded.description);
+			await expect(page).toMatchElement(statusColumnTextSelector, orderStatus.onHold.description);
+			await expect(page).toMatchElement(statusColumnTextSelector, orderStatus.failed.description);
+		});
+
+	});
+};
+
+module.exports = runOrderStatusFiltersTest;

tests/e2e/specs/wp-admin/test-order-status-filters.js

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

tests/e2e/utils/CHANGELOG.md

@@ -4,6 +4,11 @@
 
 - Missing `config` package dependency
 
+## Added
+
+- `clickFilter()` util helper method that clicks on a list page filter
+- `moveAllItemsToTrash()` util helper method that checks every item in a list page and moves them to the trash
+- `createSimpleOrder( status )` component which accepts an order status string and creates a basic order with that status
 
 # 0.1.1
 

tests/e2e/utils/README.md

@@ -91,6 +91,8 @@ describe( 'Cart page', () => {
 | `verifyCheckboxIsSet` | `selector` | Verify that a checkbox is checked |
 | `verifyCheckboxIsUnset` | `selector` | Verify that a checkbox is unchecked |
 | `verifyValueOfInputField` | `selector, value` | Verify an input contains the passed value |
+| `clickFilter` | `selector` | Click on a list page filter |
+| `moveAllItemsToTrash` |  | Moves all items in a list view to the Trash |
 |----------|------------|-------------|
 
 ### Test Utilities

tests/e2e/utils/src/components.js

@@ -220,7 +220,7 @@ const createVariableProduct = async () => {
 	// Go to "add product" page
 	await StoreOwnerFlow.openNewProduct();
 
-	// Make sure we're on the add order page
+	// Make sure we're on the add product page
 	await expect( page.title() ).resolves.toMatch( 'Add new product' );
 
 	// Set product data
@@ -344,9 +344,36 @@ const createVariableProduct = async () => {
 	return variablePostIdValue;
 };
 
+/**
+ * Create a basic order with the provided order status.
+ *
+ * @param orderStatus Status of the new order. Defaults to `Pending payment`.
+ */
+const createSimpleOrder = async ( orderStatus = 'Pending payment' ) => {
+	// Go to 'Add new order' page
+	await StoreOwnerFlow.openNewOrder();
+
+	// Make sure we're on the add order page
+	await expect( page.title() ).resolves.toMatch( 'Add new order' );
+
+	// Set order status
+	await expect( page ).toSelect( '#order_status', orderStatus );
+
+	// Wait for auto save
+	await page.waitFor( 2000 );
+
+	// Create the order
+	await expect( page ).toClick( 'button.save_order' );
+	await page.waitForSelector( '#message' );
+
+	// Verify
+	await expect( page ).toMatchElement( '#message', { text: 'Order updated.' } );
+};
+
 export {
 	completeOnboardingWizard,
 	createSimpleProduct,
 	createVariableProduct,
+	createSimpleOrder,
 	verifyAndPublish,
 };

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

@@ -155,6 +155,34 @@ const verifyValueOfInputField = async( selector, value ) => {
 	await expect( fieldValue ).toBe( value );
 };
 
+/**
+ * Clicks on a filter on a list page, such as WooCommerce > Orders or Posts > All Posts.
+ *
+ * @param {string} selector Selector of the filter link to be clicked.
+ */
+const clickFilter = async( selector ) => {
+	await page.waitForSelector( selector );
+	await page.focus( selector );
+	await Promise.all( [
+		page.click( `.subsubsub > ${selector} > a` ),
+		page.waitForNavigation( { waitUntil: 'networkidle0' } ),
+	] );
+};
+
+/**
+ * Moves all items in a list view to the trash.
+ *
+ * If there's more than 20 items, it moves all 20 items on the current page.
+ */
+const moveAllItemsToTrash = async() => {
+	await setCheckbox( '#cb-select-all-1' );
+	await expect( page ).toSelect( '#bulk-action-selector-top', 'Move to Trash' );
+	await Promise.all( [
+		page.click( '#doaction' ),
+		page.waitForNavigation( { waitUntil: 'networkidle0' } ),
+	] );
+};
+
 export {
 	clearAndFillInput,
 	clickTab,
@@ -167,4 +195,6 @@ export {
 	verifyCheckboxIsSet,
 	verifyCheckboxIsUnset,
 	verifyValueOfInputField,
+	clickFilter,
+	moveAllItemsToTrash,
 };