Add Playwright tests for All Reviews, Reviews by Product and Reviews by Category blocks

tests/e2e-jest/specs/shopper/mini-cart.test.js

@@ -2,8 +2,8 @@
  * External dependencies
  */
 import { setDefaultOptions, getDefaultOptions } from 'expect-puppeteer';
-import { default as WooCommerceRestApi } from '@woocommerce/woocommerce-rest-api';
 import { SHOP_PAGE, SHOP_CART_PAGE } from '@woocommerce/e2e-utils';
+import WooCommerceRestApi from '@woocommerce/woocommerce-rest-api';
 
 /**
  * Internal dependencies

tests/e2e/bin/scripts/parallel/products.sh

@@ -6,10 +6,21 @@
 wp import wp-content/plugins/woocommerce/sample-data/sample_products.xml --authors=skip
 wp wc tool run regenerate_product_lookup_tables --user=1
 
+# This is a hacky work around to fix product categories not having their parent category correctly assigned.
+clothing_category_id=$(wp wc product_cat list --search="Clothing" --field=id --user=1)
+tshirts_category_id=$(wp wc product_cat list --search="Tshirts" --field=id --user=1)
+hoodies_category_id=$(wp wc product_cat list --search="Hoodies" --field=id --user=1)
+wp wc product_cat update $tshirts_category_id --parent=$clothing_category_id --user=1
+wp wc product_cat update $hoodies_category_id --parent=$clothing_category_id --user=1
+
 # This is a hacky work around to fix product gallery images not being imported
 # This sets up the product Hoodie to have product gallery images for e2e testing
 post_id=$(wp post list --post_type=product --field=ID --name="Hoodie" --format=ids)
 image1=$(wp post list --post_type=attachment --field=ID --name="hoodie-with-logo-2.jpg" --format=ids)
 image2=$(wp post list --post_type=attachment --field=ID --name="hoodie-green-1.jpg" --format=ids)
 image3=$(wp post list --post_type=attachment --field=ID --name="hoodie-2.jpg" --format=ids)
 wp post meta update $post_id _product_image_gallery "$image1,$image2,$image3"
+
+# Add some reviews to Hoodie.
+wp wc product_review create $post_id --name="John Doe" --email="[email protected]" --review="Nice album!" --rating=5 --user=1
+wp wc product_review create $post_id --name="John Doe" --email="[email protected]" --review="Not bad." --rating=4 --user=1

tests/e2e/tests/all-reviews/all-reviews.block_theme.spec.ts

@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import { expect, test } from '@woocommerce/e2e-playwright-utils';
+
+const blockData = {
+	name: 'woocommerce/all-reviews',
+	selectors: {
+		frontend: {
+			firstReview:
+				'.wc-block-review-list-item__item:first-child .wc-block-review-list-item__text p',
+		},
+	},
+};
+
+test.describe( `${ blockData.name } Block`, () => {
+	test( 'renders a review in the editor and the frontend', async ( {
+		admin,
+		editor,
+		page,
+		editorUtils,
+	} ) => {
+		await admin.createNewPost();
+		await editor.insertBlock( { name: blockData.name } );
+
+		await expect( page.getByText( 'Nice album!' ) ).toBeVisible();
+
+		await editorUtils.publishAndVisitPost();
+
+		await expect( page.getByText( 'Nice album!' ) ).toBeVisible();
+	} );
+
+	test( 'can change sort order in the frontend', async ( {
+		admin,
+		editor,
+		page,
+		frontendUtils,
+		editorUtils,
+	} ) => {
+		await admin.createNewPost();
+		await editor.insertBlock( { name: blockData.name } );
+		await editorUtils.publishAndVisitPost();
+
+		const block = await frontendUtils.getBlockByName( blockData.name );
+		let firstReview;
+		firstReview = block.locator( blockData.selectors.frontend.firstReview );
+		await expect( firstReview ).toHaveText( 'Not bad.' );
+
+		const select = page.getByLabel( 'Order by' );
+		select.selectOption( 'Highest rating' );
+
+		firstReview = block.locator( blockData.selectors.frontend.firstReview );
+		await expect( firstReview ).toHaveText( 'Nice album!' );
+	} );
+} );

tests/e2e/tests/customer-account/customer-account.block_theme.spec.ts

@@ -17,13 +17,6 @@ const blockData = {
 	},
 };
 
-const publishAndVisitPost = async ( { page, editor } ) => {
-	await editor.publishPost();
-	const url = new URL( page.url() );
-	const postId = url.searchParams.get( 'post' );
-	await page.goto( `/?p=${ postId }`, { waitUntil: 'commit' } );
-};
-
 const selectTextOnlyOption = async ( { page } ) => {
 	await page
 		.locator( blockData.selectors.editor.iconOptions )
@@ -54,13 +47,14 @@ test.describe( `${ blockData.name } Block`, () => {
 		editor,
 		page,
 		frontendUtils,
+		editorUtils,
 	} ) => {
 		await admin.createNewPost( { legacyCanvas: true } );
 		await editor.insertBlock( { name: blockData.name } );
 
 		await selectTextOnlyOption( { page } );
 
-		await publishAndVisitPost( { page, editor } );
+		await editorUtils.publishAndVisitPost();
 
 		const block = await frontendUtils.getBlockByName( blockData.name );
 
@@ -77,13 +71,14 @@ test.describe( `${ blockData.name } Block`, () => {
 		editor,
 		page,
 		frontendUtils,
+		editorUtils,
 	} ) => {
 		await admin.createNewPost( { legacyCanvas: true } );
 		await editor.insertBlock( { name: blockData.name } );
 
 		await selectIconOnlyOption( { page } );
 
-		await publishAndVisitPost( { page, editor } );
+		await editorUtils.publishAndVisitPost();
 
 		const block = await frontendUtils.getBlockByName( blockData.name );
 
@@ -100,13 +95,14 @@ test.describe( `${ blockData.name } Block`, () => {
 		editor,
 		page,
 		frontendUtils,
+		editorUtils,
 	} ) => {
 		await admin.createNewPost( { legacyCanvas: true } );
 		await editor.insertBlock( { name: blockData.name } );
 
 		await selectIconAndTextOption( { page } );
 
-		await publishAndVisitPost( { page, editor } );
+		await editorUtils.publishAndVisitPost();
 
 		const block = await frontendUtils.getBlockByName( blockData.name );
 

tests/e2e/tests/product-collection/compatibility-layer.block_theme.side_effects.spec.ts

@@ -19,7 +19,7 @@ type Scenario = {
 	amount: number;
 };
 
-const singleOccurranceScenarios: Scenario[] = [
+const singleOccurrenceScenarios: Scenario[] = [
 	{
 		title: 'Before Main Content',
 		dataTestId: 'woocommerce_before_main_content',
@@ -46,7 +46,7 @@ const singleOccurranceScenarios: Scenario[] = [
 	},
 ];
 
-const multipleOccurranceScenarios: Scenario[] = [
+const multipleOccurrenceScenarios: Scenario[] = [
 	{
 		title: 'Before Shop Loop Item Title',
 		dataTestId: 'woocommerce_before_shop_loop_item_title',
@@ -79,7 +79,7 @@ const multipleOccurranceScenarios: Scenario[] = [
 	},
 ];
 
-const compatiblityPluginFileName = 'compatibility-plugin.php';
+const compatibilityPluginFileName = 'compatibility-plugin.php';
 const test = base.extend< { pageObject: ProductCollectionPage } >( {
 	pageObject: async (
 		{ page, admin, editor, templateApiUtils, editorUtils },
@@ -100,7 +100,7 @@ const test = base.extend< { pageObject: ProductCollectionPage } >( {
 test.describe( 'Compatibility Layer with Product Collection block', () => {
 	test.beforeAll( async () => {
 		await installPluginFromPHPFile(
-			`${ __dirname }/${ compatiblityPluginFileName }`
+			`${ __dirname }/${ compatibilityPluginFileName }`
 		);
 	} );
 
@@ -114,7 +114,7 @@ test.describe( 'Compatibility Layer with Product Collection block', () => {
 				await pageObject.goToProductCatalogFrontend();
 			} );
 
-			for ( const scenario of singleOccurranceScenarios ) {
+			for ( const scenario of singleOccurrenceScenarios ) {
 				test( `${ scenario.title } is attached to the page`, async ( {
 					pageObject,
 				} ) => {
@@ -127,7 +127,7 @@ test.describe( 'Compatibility Layer with Product Collection block', () => {
 				} );
 			}
 
-			for ( const scenario of multipleOccurranceScenarios ) {
+			for ( const scenario of multipleOccurrenceScenarios ) {
 				test( `${ scenario.title } is attached to the page`, async ( {
 					pageObject,
 				} ) => {
@@ -146,7 +146,7 @@ test.describe( 'Compatibility Layer with Product Collection block', () => {
 
 	test.afterAll( async ( { requestUtils } ) => {
 		await uninstallPluginFromPHPFile(
-			`${ __dirname }/${ compatiblityPluginFileName }`
+			`${ __dirname }/${ compatibilityPluginFileName }`
 		);
 		await requestUtils.deleteAllTemplates( 'wp_template' );
 	} );