[e2e tests] Fix command pallete test failing with Gutenberg active

plugins/woocommerce/changelog/e2e-fix-command-pallete-with-gb-tests

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+E2E tests: fix command palette test with Gutengerg

plugins/woocommerce/tests/e2e-pw/tests/merchant/command-palette.spec.js

@@ -1,6 +1,5 @@
-const { test, expect } = require( '@playwright/test' );
-const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
-const { goToPostEditor } = require( '../../utils/editor' );
+const { test: baseTest, expect } = require( '../../fixtures' );
+const { disableWelcomeModal } = require( '../../utils/editor' );
 
 // need to figure out whether tests are being run on a mac
 const macOS = process.platform === 'darwin';
@@ -10,7 +9,7 @@ const clickOnCommandPaletteOption = async ( { page, optionName } ) => {
 	// Press `Ctrl` + `K` to open the command palette.
 	await page.keyboard.press( cmdKeyCombo );
 
-	await page.getByLabel( 'Command palette' ).fill( optionName );
+	await page.getByPlaceholder( 'Search for commands' ).fill( optionName );
 
 	// Click on the relevant option.
 	const option = page.getByRole( 'option', {
@@ -21,136 +20,111 @@ const clickOnCommandPaletteOption = async ( { page, optionName } ) => {
 	option.click();
 };
 
-test.describe( 'Use Command Palette commands', () => {
-	test.use( { storageState: process.env.ADMINSTATE } );
-
-	let productId;
-
-	test.beforeAll( async ( { baseURL } ) => {
-		const api = new wcApi( {
-			url: baseURL,
-			consumerKey: process.env.CONSUMER_KEY,
-			consumerSecret: process.env.CONSUMER_SECRET,
-			version: 'wc/v3',
+const test = baseTest.extend( {
+	storageState: process.env.ADMINSTATE,
+	product: async ( { api }, use ) => {
+		let product = {
+			id: 0,
+			name: `Product ${ Date.now() }`,
+			type: 'simple',
+		};
+
+		await api.post( 'products', product ).then( ( response ) => {
+			product = response.data;
 		} );
-		await api
-			.post( 'products', {
-				name: 'Product to search',
-				type: 'simple',
-				regular_price: '12.99',
-			} )
-			.then( ( response ) => {
-				productId = response.data.id;
-			} );
-	} );
-
-	test.afterAll( async ( { baseURL } ) => {
-		const api = new wcApi( {
-			url: baseURL,
-			consumerKey: process.env.CONSUMER_KEY,
-			consumerSecret: process.env.CONSUMER_SECRET,
-			version: 'wc/v3',
-		} );
-		await api.delete( `products/${ productId }`, {
-			force: true,
-		} );
-	} );
 
-	test( 'can use the "Add new product" command', async ( { page } ) => {
-		await goToPostEditor( { page } );
+		await use( product );
 
-		await clickOnCommandPaletteOption( {
-			page,
-			optionName: 'Add new product',
-		} );
+		// Cleanup
+		await api.delete( `products/${ product.id }`, { force: true } );
+	},
+	page: async ( { page }, use ) => {
+		await page.goto( 'wp-admin/post-new.php' );
+		await disableWelcomeModal( { page } );
+		await use( page );
+	},
+} );
 
-		// Verify that the page has loaded.
-		await expect(
-			page.getByRole( 'heading', { name: 'Add new product' } )
-		).toBeVisible();
+test( 'can use the "Add new product" command', async ( { page } ) => {
+	await clickOnCommandPaletteOption( {
+		page,
+		optionName: 'Add new product',
 	} );
 
-	test( 'can use the "Add new order" command', async ( { page } ) => {
-		await goToPostEditor( { page } );
-
-		await clickOnCommandPaletteOption( {
-			page,
-			optionName: 'Add new order',
-		} );
+	// Verify that the page has loaded.
+	await expect(
+		page.getByRole( 'heading', { name: 'Add new product' } )
+	).toBeVisible();
+} );
 
-		// Verify that the page has loaded.
-		await expect(
-			page.getByRole( 'heading', { name: 'Add new order' } )
-		).toBeVisible();
+test( 'can use the "Add new order" command', async ( { page } ) => {
+	await clickOnCommandPaletteOption( {
+		page,
+		optionName: 'Add new order',
 	} );
 
-	test( 'can use the "Products" command', async ( { page } ) => {
-		await goToPostEditor( { page } );
-
-		await clickOnCommandPaletteOption( {
-			page,
-			optionName: 'Products',
-		} );
+	// Verify that the page has loaded.
+	await expect(
+		page.getByRole( 'heading', { name: 'Add new order' } )
+	).toBeVisible();
+} );
 
-		// Verify that the page has loaded.
-		await expect(
-			page.locator( 'h1' ).filter( { hasText: 'Products' } ).first()
-		).toBeVisible();
+test( 'can use the "Products" command', async ( { page } ) => {
+	await clickOnCommandPaletteOption( {
+		page,
+		optionName: 'Products',
 	} );
 
-	test( 'can use the "Orders" command', async ( { page } ) => {
-		await goToPostEditor( { page } );
-
-		await clickOnCommandPaletteOption( {
-			page,
-			optionName: 'Orders',
-		} );
+	// Verify that the page has loaded.
+	await expect(
+		page.locator( 'h1' ).filter( { hasText: 'Products' } ).first()
+	).toBeVisible();
+} );
 
-		// Verify that the page has loaded.
-		await expect(
-			page.locator( 'h1' ).filter( { hasText: 'Orders' } ).first()
-		).toBeVisible();
+test( 'can use the "Orders" command', async ( { page } ) => {
+	await clickOnCommandPaletteOption( {
+		page,
+		optionName: 'Orders',
 	} );
 
-	test( 'can use the product search command', async ( { page } ) => {
-		await goToPostEditor( { page } );
-
-		await clickOnCommandPaletteOption( {
-			page,
-			optionName: 'Product to search',
-		} );
+	// Verify that the page has loaded.
+	await expect(
+		page.locator( 'h1' ).filter( { hasText: 'Orders' } ).first()
+	).toBeVisible();
+} );
 
-		// Verify that the page has loaded.
-		await expect( page.getByLabel( 'Product name' ) ).toHaveValue(
-			'Product to search'
-		);
+test( 'can use the product search command', async ( { page, product } ) => {
+	await clickOnCommandPaletteOption( {
+		page,
+		optionName: product.name,
 	} );
 
-	test( 'can use a settings command', async ( { page } ) => {
-		await goToPostEditor( { page } );
-
-		await clickOnCommandPaletteOption( {
-			page,
-			optionName: 'WooCommerce Settings: Products',
-		} );
+	// Verify that the page has loaded.
+	await expect( page.getByLabel( 'Product name' ) ).toHaveValue(
+		`${ product.name }`
+	);
+} );
 
-		// Verify that the page has loaded.
-		await expect( page.getByText( 'Shop pages' ) ).toBeVisible();
+test( 'can use a settings command', async ( { page } ) => {
+	await clickOnCommandPaletteOption( {
+		page,
+		optionName: 'WooCommerce Settings: Products',
 	} );
 
-	test( 'can use an analytics command', async ( { page } ) => {
-		await goToPostEditor( { page } );
-
-		await clickOnCommandPaletteOption( {
-			page,
-			optionName: 'WooCommerce Analytics: Products',
-		} );
+	// Verify that the page has loaded.
+	await expect( page.getByText( 'Shop pages' ) ).toBeVisible();
+} );
 
-		// Verify that the page has loaded.
-		await expect(
-			page.locator( 'h1' ).filter( { hasText: 'Products' } )
-		).toBeVisible();
-		const pageTitle = await page.title();
-		expect( pageTitle.includes( 'Products ‹ Analytics' ) ).toBeTruthy();
+test( 'can use an analytics command', async ( { page } ) => {
+	await clickOnCommandPaletteOption( {
+		page,
+		optionName: 'WooCommerce Analytics: Products',
 	} );
+
+	// Verify that the page has loaded.
+	await expect(
+		page.locator( 'h1' ).filter( { hasText: 'Products' } )
+	).toBeVisible();
+	const pageTitle = await page.title();
+	expect( pageTitle.includes( 'Products ‹ Analytics' ) ).toBeTruthy();
 } );

plugins/woocommerce/tests/e2e-pw/utils/editor.js

@@ -9,6 +9,18 @@ const closeWelcomeModal = async ( { page } ) => {
 	}
 };
 
+const disableWelcomeModal = async ( { page } ) => {
+	const isWelcomeGuideActive = await page.evaluate( () =>
+		wp.data.select( 'core/edit-post' ).isFeatureActive( 'welcomeGuide' )
+	);
+
+	if ( isWelcomeGuideActive ) {
+		await page.evaluate( () =>
+			wp.data.dispatch( 'core/edit-post' ).toggleFeature( 'welcomeGuide' )
+		);
+	}
+};
+
 const goToPageEditor = async ( { page } ) => {
 	await page.goto( 'wp-admin/post-new.php?post_type=page' );
 
@@ -25,4 +37,5 @@ module.exports = {
 	closeWelcomeModal,
 	goToPageEditor,
 	goToPostEditor,
+	disableWelcomeModal,
 };