Merge branch 'trunk' into e2e/e2e-merchant-settings-shipping-zones

tests/e2e/core-tests/CHANGELOG.md

@@ -20,6 +20,7 @@
 - Merchant Product Search tests
 - Shopper Single Product tests
 - Shopper Checkout Apply Coupon
+- Shopper Shop Browse Search Sort
 - Merchant Orders Customer Checkout Page
 - Shopper Cart Apply Coupon
 - Merchant Settings Shipping Zones

tests/e2e/core-tests/README.md

@@ -69,7 +69,8 @@ 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
+  - `runProductBrowseSearchSortTest` - Shopper can browse, search & sort products
+  - `runVariableProductUpdateTest` - Shopper can view and update variations on a variable product
 
 ## Contributing a new test
 

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

@@ -9,6 +9,7 @@ const { runOnboardingFlowTest, runTaskListTest } = require( './activate-and-setu
 const runInitialStoreSettingsTest = require( './activate-and-setup/setup.test' );
 
 // Shopper tests
+const runProductBrowseSearchSortTest = require( './shopper/front-end-product-browse-search-sort.test' );
 const runCartApplyCouponsTest = require( './shopper/front-end-cart-coupons.test');
 const runCartPageTest = require( './shopper/front-end-cart.test' );
 const runCheckoutApplyCouponsTest = require( './shopper/front-end-checkout-coupons.test');
@@ -47,6 +48,7 @@ const runSetupOnboardingTests = () => {
 };
 
 const runShopperTests = () => {
+	runProductBrowseSearchSortTest();
 	runCartApplyCouponsTest();
 	runCartPageTest();
 	runCheckoutApplyCouponsTest();
@@ -114,5 +116,6 @@ module.exports = {
 	runMerchantOrdersCustomerPaymentPage,
 	runMerchantTests,
 	runAddNewShippingZoneTest,
+	runProductBrowseSearchSortTest,
 	runApiTests,
 };

tests/e2e/core-tests/specs/shopper/front-end-product-browse-search-sort.test.js

@@ -0,0 +1,87 @@
+/* eslint-disable jest/no-export, jest/no-disabled-tests */
+/**
+ * Internal dependencies
+ */
+const {
+	shopper,
+	merchant,
+	createSimpleProductWithCategory,
+	uiUnblocked,
+} = require( '@woocommerce/e2e-utils' );
+
+/**
+ * External dependencies
+ */
+const {
+	it,
+	describe,
+	beforeAll,
+} = require( '@jest/globals' );
+
+const config = require( 'config' );
+const simpleProductName = config.get( 'products.simple.name' );
+const singleProductPrice = config.has('products.simple.price') ? config.get('products.simple.price') : '9.99';
+const singleProductPrice2 = config.has('products.simple.price') ? config.get('products.simple.price') : '19.99';
+const singleProductPrice3 = config.has('products.simple.price') ? config.get('products.simple.price') : '29.99';
+const clothing = 'Clothing';
+const audio = 'Audio';
+const hardware = 'Hardware';
+const productTitle = 'li.first > a > h2.woocommerce-loop-product__title';
+
+const runProductBrowseSearchSortTest = () => {
+	describe('Search, browse by categories and sort items in the shop', () => {
+		beforeAll(async () => {
+			await merchant.login();
+			// Create 1st product with Clothing category 
+			await createSimpleProductWithCategory(simpleProductName + ' 1', singleProductPrice, clothing);
+			// Create 2nd product with Audio category 
+			await createSimpleProductWithCategory(simpleProductName + ' 2', singleProductPrice2, audio);
+			// Create 3rd product with Hardware category 
+			await createSimpleProductWithCategory(simpleProductName + ' 3', singleProductPrice3, hardware);
+			await merchant.logout();
+		});
+
+		it('should let user search the store', async () => {
+			await shopper.goToShop();
+			await shopper.searchForProduct(simpleProductName + ' 1');
+		});
+
+		it('should let user browse products by categories', async () => {
+			// Browse through Clothing category link
+			await Promise.all([
+				page.waitForNavigation({waitUntil: 'networkidle0'}),
+				page.click('span.posted_in > a', {text: clothing}),
+			]);
+			await uiUnblocked();
+
+			// Verify Clothing category page
+			await page.waitForSelector(productTitle);
+			await expect(page).toMatchElement(productTitle, {text: simpleProductName + ' 1'});
+			await expect(page).toClick(productTitle, {text: simpleProductName + ' 1'});
+			await uiUnblocked();
+			await page.waitForSelector('h1.entry-title');
+			await expect(page).toMatchElement('h1.entry-title', simpleProductName + ' 1');
+		});
+
+		it('should let user sort the products in the shop', async () => {
+			await shopper.goToShop();
+
+			// Sort by price high to low
+			await page.select('.orderby', 'price-desc');
+			// Verify the first product in sort order
+			await expect(page).toMatchElement(productTitle, {text: simpleProductName + ' 3'});
+
+			// Sort by price low to high
+			await page.select('.orderby', 'price');
+			// Verify the first product in sort order
+			await expect(page).toMatchElement(productTitle, {text: simpleProductName + ' 1'});
+
+			// Sort by date of creation, latest to oldest
+			await page.select('.orderby', 'date');
+			// Verify the first product in sort order
+			await expect(page).toMatchElement(productTitle, {text: simpleProductName + ' 3'});
+		});
+	});
+};
+
+module.exports = runProductBrowseSearchSortTest;

tests/e2e/specs/front-end/test-product-browse-search-sort.js

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

tests/e2e/utils/CHANGELOG.md

@@ -18,6 +18,7 @@
 - `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
 - `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
 - `removeCoupon()` util helper method that removes a single coupon within cart or checkout
 

tests/e2e/utils/README.md

@@ -77,6 +77,7 @@ describe( 'Cart page', () => {
 | `productIsInCheckout` | `productTitle, quantity, total, cartSubtotal` | Verify product is in cart on checkout page |
 | `removeFromCart` | `productTitle` | Remove a product from the cart on the cart page |
 | `setCartQuantity` | `productTitle, quantityValue` | Change the quantity of a product on the cart page |
+| `searchForProduct` | Searching for a product name and landing on its detail page |
 
 ### Page Utilities
 

tests/e2e/utils/src/components.js

@@ -184,6 +184,44 @@ const createSimpleProduct = async () => {
 	return product.id;
 } ;
 
+/**
+ * Create simple product with categories
+ *
+ * @param productName Product's name which can be changed when writing a test
+ * @param productPrice Product's price which can be changed when writing a test
+ * @param categoryName Product's category which can be changed when writing a test
+ */
+const createSimpleProductWithCategory = async ( productName, productPrice, categoryName ) => {
+	// Go to "add product" page
+	await merchant.openNewProduct();
+
+	// Add title and regular price
+	await expect(page).toFill('#title', productName);
+	await expect(page).toClick('#_virtual');
+	await clickTab('General');
+	await expect(page).toFill('#_regular_price', productPrice);
+
+	// Try to select the existing category if present already, otherwise add a new and select it
+	try {
+		const [checkbox] = await page.$x('//label[contains(text(), "'+categoryName+'")]');
+		await checkbox.click();
+	} catch (error) {
+		await expect(page).toClick('#product_cat-add-toggle');
+		await expect(page).toFill('#newproduct_cat', categoryName);
+		await expect(page).toClick('#product_cat-add-submit');
+	}
+
+	// Publish the product
+	await expect(page).toClick('#publish');
+	await uiUnblocked();
+	await page.waitForSelector('.updated.notice', {text:'Product published.'});
+
+	// Get the product ID
+	const variablePostId = await page.$('#post_ID');
+	let variablePostIdValue = (await(await variablePostId.getProperty('value')).jsonValue());
+	return variablePostIdValue;
+};
+
 /**
  * Create variable product.
  */
@@ -481,4 +519,5 @@ export {
 	addProductToOrder,
 	createCoupon,
 	addShippingZoneAndMethod,
+	createSimpleProductWithCategory,
 };

tests/e2e/utils/src/flows/shopper.js

@@ -137,6 +137,17 @@ const shopper = {
 		await quantityInput.type( quantityValue.toString() );
 	},
 
+	searchForProduct: async ( prouductName ) => {
+		await expect(page).toFill('.search-field', prouductName);
+		await expect(page).toClick('.search-submit');
+		await page.waitForSelector('h2.entry-title');
+		await expect(page).toMatchElement('h2.entry-title', {text: prouductName});
+		await expect(page).toClick('h2.entry-title', {text: prouductName});
+		await page.waitForSelector('h1.entry-title');
+		await expect(page.title()).resolves.toMatch(prouductName);
+		await expect(page).toMatchElement('h1.entry-title', prouductName);
+	},
+
 	/*
 	 * My Accounts flows.
 	 */