E2E: Try improving product list loading state detection and fix Site Editor URL

assets/js/base/components/product-list/product-list.tsx

@@ -238,7 +238,11 @@ const ProductList = ( {
 			) }
 			{ ! hasProducts && ! hasFilters && <NoProducts /> }
 			{ hasProducts && (
-				<ul className={ `${ parentClassName }__products` }>
+				<ul
+					className={ classnames( `${ parentClassName }__products`, {
+						'is-loading-products': productsLoading,
+					} ) }
+				>
 					{ listProducts.map( ( product = {}, i: number ) => (
 						<ProductListItem
 							key={ product.id || i }

tests/e2e/specs/backend/mini-cart.test.js

@@ -72,10 +72,7 @@ describe( `${ block.name } Block`, () => {
 		useTheme( 'emptytheme' );
 
 		beforeEach( async () => {
-			// TODO: Update to always use site-editor.php once WordPress 6.0 is released and fix is verified.
-			await goToSiteEditor(
-				process.env.GUTENBERG_EDITOR_CONTEXT || 'core'
-			);
+			await goToSiteEditor();
 			await waitForCanvas();
 		} );
 

tests/e2e/specs/shopper/filter-products-by-price.test.ts

@@ -71,6 +71,7 @@ describe( `${ block.name } Block`, () => {
 
 			await insertBlock( block.name );
 			await insertBlock( 'All Products' );
+			await insertBlock( 'Active Product Filters' );
 			await publishPost();
 
 			const link = await page.evaluate( () =>
@@ -90,12 +91,18 @@ describe( `${ block.name } Block`, () => {
 			const isRefreshed = jest.fn( () => void 0 );
 			page.on( 'load', isRefreshed );
 			await setMaxPrice();
+			await expect( page ).toMatchElement(
+				'.wc-block-active-filters__title',
+				{
+					text: 'Active filters',
+				}
+			);
 			await waitForAllProductsBlockLoaded();
 
-			await page.waitForSelector( selectors.frontend.productsList );
 			const products = await page.$$( selectors.frontend.productsList );
 
 			expect( isRefreshed ).not.toBeCalled();
+
 			expect( products ).toHaveLength( 1 );
 
 			await expect( page ).toMatch( block.foundProduct );

tests/e2e/utils.js

@@ -64,7 +64,7 @@ const SELECTORS = {
 		savePrompt: '.entities-saved-states__text-prompt',
 	},
 	allProductsBlock: {
-		productsList: '.wc-block-grid__products > li > div:not(.is-loading)',
+		productsList: '.wc-block-grid__products:not(.is-loading-products)',
 	},
 };
 
@@ -157,46 +157,29 @@ export const isBlockInsertedInWidgetsArea = async ( blockName ) => {
 /**
  * Visits site editor dependening on used WordPress version and how Gutenberg is installed.
  *
- * 1. `themes.php?page=gutenberg-edit-site` this is a legacy editor access used for WP <=5.8.
- * 2. `site-editor.php` is the new way of accessing the editor in WP >=5.9+.
- *
- * @param {'core' | 'gutenberg'}               [editorContext='core']          Whether to go to the Gutenberg URL or the Core one.
  * @param {Object}                             params                          Query parameters to add to the URL.
  * @param {string}                             [params.postId]                 ID of the template if we want to access template editor.
  * @param {'wp_template' | 'wp_template_part'} [params.postType='wp_template'] Type of template.
  */
-export async function goToSiteEditor( editorContext = 'core', params ) {
-	// There is a bug in Gutenberg/WPCore now that makes it impossible to rely on site-editor.php on setups
-	// with locally installed Gutenberg. Details in https://github.com/WordPress/gutenberg/issues/39639.
-	// TODO: Update to always use site-editor.php once WordPress 6.0 is released and fix is verified.
-	// 		 Remove usage of goToSiteEditor and GUTENBERG_EDITOR_CONTEXT from from here and from workflows.
-	let editorPath;
-	const queryParams = { ...params };
-
-	if ( editorContext === 'gutenberg' ) {
-		editorPath = 'themes.php';
-		queryParams.page = 'gutenberg-edit-site';
-	} else {
-		editorPath = 'site-editor.php';
-	}
-
-	return await visitAdminPage( editorPath, addQueryArgs( '', queryParams ) );
+export async function goToSiteEditor( params = {} ) {
+	return await visitAdminPage(
+		'site-editor.php',
+		addQueryArgs( '', params )
+	);
 }
 
 /**
  * Visits the Site Editor template edit view.
  *
  * @param {Object}                             params
- * @param {string}                             params.postId                   ID of the template if we want to access template editor.
- * @param {'core' | 'gutenberg'}               [params.editorContext='core']   Whether to go to the Gutenberg URL or the Core one.
+ * @param {string}                             [params.postId]                 ID of the template if we want to access template editor.
  * @param {'wp_template' | 'wp_template_part'} [params.postType='wp_template'] Type of template.
  */
 export async function goToTemplateEditor( {
 	postId,
 	postType = 'wp_template',
-	editorContext = GUTENBERG_EDITOR_CONTEXT,
 } = {} ) {
-	await goToSiteEditor( editorContext, {
+	await goToSiteEditor( {
 		postType,
 		postId,
 	} );
@@ -209,16 +192,14 @@ export async function goToTemplateEditor( {
  * Visits the Site Editor templates list view.
  *
  * @param {Object}                             params
- * @param {'core' | 'gutenberg'}               [params.editorContext='core']   Whether to go to the Gutenberg URL or the Core one.
  * @param {'wp_template' | 'wp_template_part'} [params.postType='wp_template'] Type of template.
  * @param {'list' | 'actions'}                 [params.waitFor='false']        Wait for list or for actions to be present - tempalte actions can take a moment to load, we can wait for them to be present if needed.
  */
 export async function goToTemplatesList( {
 	postType = 'wp_template',
-	editorContext = GUTENBERG_EDITOR_CONTEXT,
 	waitFor = 'list',
 } = {} ) {
-	await goToSiteEditor( editorContext, { postType } );
+	await goToSiteEditor( { postType } );
 
 	if ( waitFor === 'actions' ) {
 		await page.waitForSelector(
@@ -456,5 +437,4 @@ export const openBlockEditorSettings = async ( { isFSEEditor = false } ) => {
  */
 export const waitForAllProductsBlockLoaded = async () => {
 	await page.waitForSelector( SELECTORS.allProductsBlock.productsList );
-	await page.waitForTimeout( 5000 );
 };