CYS - E2E tests: Add color picker E2E tests (#45926)

* CYS - E2E tests: Add color picker E2E tests

* remove not necessary changes

* fix E2E tests

* re-add beforeEach

* fix E2E tests

* improve test assertation

* add comment

* Add changefile(s) from automation for the following project(s): woocommerce

* fix E2E tests

* don't print error

* fix E2E tests

---------

Co-authored-by: github-actions <github-actions@github.com>

plugins/woocommerce/changelog/45926-add-e2e-color-picker

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+Comment: CYS - E2E tests: Add color picker E2E tests
+

plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler-hub.spec.js

@@ -1,6 +1,5 @@
 const { test, expect, request } = require( '@playwright/test' );
 const { BASE_URL } = process.env;
-const { features } = require( '../../utils' );
 const { activateTheme } = require( '../../utils/themes' );
 const { setOption } = require( '../../utils/options' );
 
@@ -29,23 +28,18 @@ test.describe( 'Store owner can view Assembler Hub for store customization', ()
 	test.use( { storageState: process.env.ADMINSTATE } );
 
 	test.beforeAll( async ( { baseURL } ) => {
-		// In some environments the tour blocks clicking other elements.
-		await setOption(
-			request,
-			baseURL,
-			'woocommerce_customize_store_onboarding_tour_hidden',
-			'yes'
-		);
-
-		await features.setFeatureFlag(
-			request,
-			baseURL,
-			'customize-store',
-			true
-		);
-
-		// Need a block enabled theme to test
-		await activateTheme( 'twentytwentythree' );
+		try {
+			// In some environments the tour blocks clicking other elements.
+			await setOption(
+				request,
+				baseURL,
+				'woocommerce_customize_store_onboarding_tour_hidden',
+				'yes'
+			);
+			await activateTheme( 'twentytwentythree' );
+		} catch ( error ) {
+			console.log( 'Store completed option not updated' );
+		}
 	} );
 
 	test.beforeEach( async ( { baseURL } ) => {
@@ -57,13 +51,11 @@ test.describe( 'Store owner can view Assembler Hub for store customization', ()
 				'no'
 			);
 		} catch ( error ) {
-			console.log( 'Store completed option not updated', error );
+			console.log( 'Store completed option not updated' );
 		}
 	} );
 
 	test.afterAll( async ( { baseURL } ) => {
-		await features.resetFeatureFlags( request, baseURL );
-
 		// Reset theme back to twentynineteen
 		await activateTheme( 'twentynineteen' );
 

plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/assembler.page.js

@@ -33,4 +33,14 @@ export class AssemblerPage {
 		}
 		return this.page;
 	}
+
+	/**
+	 * Get the editor frame locator.
+	 *
+	 * @return {Promise<import('playwright').FrameLocator>} The editor frame locator.
+	 */
+	async getEditor() {
+		const assembler = await this.getAssembler();
+		return assembler.frameLocator( '[name="editor-canvas"]' );
+	}
 }

plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/color-picker.spec.js

@@ -0,0 +1,200 @@
+const { test: base, expect, request } = require( '@playwright/test' );
+const { AssemblerPage } = require( './assembler.page' );
+const { activateTheme } = require( '../../../utils/themes' );
+const { setOption } = require( '../../../utils/options' );
+
+const test = base.extend( {
+	pageObject: async ( { page }, use ) => {
+		const pageObject = new AssemblerPage( { page } );
+		await use( pageObject );
+	},
+} );
+
+test.describe( 'Assembler -> Color Pickers', () => {
+	test.use( { storageState: process.env.ADMINSTATE } );
+
+	test.beforeAll( async ( { baseURL } ) => {
+		try {
+			// In some environments the tour blocks clicking other elements.
+			await setOption(
+				request,
+				baseURL,
+				'woocommerce_customize_store_onboarding_tour_hidden',
+				'yes'
+			);
+		} catch ( error ) {
+			console.log( 'Store completed option not updated' );
+		}
+	} );
+
+	test.afterAll( async ( { baseURL } ) => {
+		try {
+			// In some environments the tour blocks clicking other elements.
+			await setOption(
+				request,
+				baseURL,
+				'woocommerce_customize_store_onboarding_tour_hidden',
+				'no'
+			);
+			await setOption(
+				request,
+				baseURL,
+				'woocommerce_admin_customize_store_completed',
+				'no'
+			);
+
+			await activateTheme( 'twentynineteen' );
+		} catch ( error ) {
+			console.log( 'Store completed option not updated' );
+		}
+	} );
+
+	test.beforeEach( async ( { baseURL, pageObject } ) => {
+		await pageObject.setupSite( baseURL );
+		await pageObject.waitForLoadingScreenFinish();
+		const assembler = await pageObject.getAssembler();
+		await assembler.getByText( 'Choose your color palette' ).click();
+	} );
+
+	test( 'Color pickers should be displayed', async ( { pageObject } ) => {
+		const assembler = await pageObject.getAssembler();
+
+		const colorPickers = assembler.locator(
+			'.woocommerce-customize-store_global-styles-variations_item'
+		);
+		await expect( colorPickers ).toHaveCount( 18 );
+	} );
+
+	test( 'Picking a color should trigger an update of colors on the site preview', async ( {
+		pageObject,
+	}, testInfo ) => {
+		const assembler = await pageObject.getAssembler();
+		const editor = await pageObject.getEditor();
+		testInfo.snapshotSuffix = '';
+
+		await assembler
+			.locator(
+				'.woocommerce-customize-store_global-styles-variations_item'
+			)
+			.waitFor( {
+				strict: false,
+			} );
+
+		const colorPickers = await assembler
+			.locator(
+				'.woocommerce-customize-store_global-styles-variations_item'
+			)
+			.all();
+
+		let index = 0;
+		for ( const colorPicker of colorPickers ) {
+			await colorPicker.waitFor();
+			await colorPicker.click();
+			// The snapshot is created in headless mode. Please make sure the browser is in headless mode to ensure the snapshot is correct.
+			await expect(
+				( await editor.locator( 'style' ).allInnerTexts() ).join( ',' )
+			).toMatchSnapshot( {
+				name: 'color-palette-' + index,
+			} );
+
+			index++;
+		}
+	} );
+
+	test( 'Color picker should be focused when a color is picked', async ( {
+		pageObject,
+	} ) => {
+		const assembler = await pageObject.getAssembler();
+		const colorPicker = assembler
+			.locator(
+				'.woocommerce-customize-store_global-styles-variations_item'
+			)
+			.first();
+
+		await colorPicker.click();
+		await expect( colorPicker ).toHaveClass( /is-active/ );
+	} );
+
+	test( 'Picking a color should activate the save button', async ( {
+		pageObject,
+	} ) => {
+		const assembler = await pageObject.getAssembler();
+		const colorPicker = assembler
+			.locator(
+				'.woocommerce-customize-store_global-styles-variations_item'
+			)
+			.nth( 2 );
+
+		await colorPicker.click();
+
+		const saveButton = assembler.getByText( 'Save' );
+
+		await expect( saveButton ).toBeEnabled();
+	} );
+
+	test( 'The Done button should be visible after clicking save', async ( {
+		pageObject,
+		page,
+	} ) => {
+		const assembler = await pageObject.getAssembler();
+		const colorPicker = assembler
+			.locator(
+				'.woocommerce-customize-store_global-styles-variations_item'
+			)
+			.nth( 2 );
+
+		await colorPicker.click();
+
+		const saveButton = assembler.getByText( 'Save' );
+
+		const waitResponse = page.waitForResponse(
+			( response ) =>
+				response.url().includes( 'wp-json/wp/v2/global-styles' ) &&
+				response.status() === 200
+		);
+
+		await saveButton.click();
+
+		await waitResponse;
+
+		await expect( assembler.getByText( 'Done' ) ).toBeEnabled();
+	} );
+
+	test( 'Selected color palette should be applied on the frontend', async ( {
+		pageObject,
+		page,
+		baseURL,
+	}, testInfo ) => {
+		testInfo.snapshotSuffix = '';
+		const assembler = await pageObject.getAssembler();
+		const colorPicker = assembler
+			.locator(
+				'.woocommerce-customize-store_global-styles-variations_item'
+			)
+			.last();
+
+		await colorPicker.click();
+
+		const saveButton = assembler.getByText( 'Save' );
+
+		const waitResponse = page.waitForResponse(
+			( response ) =>
+				response.url().includes( 'wp-json/wp/v2/global-styles' ) &&
+				response.status() === 200
+		);
+
+		await saveButton.click();
+
+		await waitResponse;
+
+		await page.goto( baseURL );
+		const style = await page
+			.locator( '#global-styles-inline-css' )
+			.innerHTML();
+
+		// The snapshot is created in headless mode. Please make sure the browser is in headless mode to ensure the snapshot is correct.
+		expect( style ).toMatchSnapshot( {
+			name: 'color-palette-frontend',
+		} );
+	} );
+} );

plugins/woocommerce/tests/e2e-pw/tests/customize-store/intro.spec.js

@@ -1,8 +1,8 @@
-const { test, expect, request } = require('@playwright/test');
+const { test, expect, request } = require( '@playwright/test' );
 const { BASE_URL } = process.env;
-const { features } = require('../../utils');
-const { activateTheme } = require('../../utils/themes');
-const { setOption } = require('../../utils/options');
+const { features } = require( '../../utils' );
+const { activateTheme } = require( '../../utils/themes' );
+const { setOption } = require( '../../utils/options' );
 
 const CUSTOMIZE_STORE_URL =
 	'/wp-admin/admin.php?page=wc-admin&path=%2Fcustomize-store';
@@ -32,7 +32,7 @@ test.describe( 'Store owner can view the Intro page', () => {
 				'no'
 			);
 		} catch ( error ) {
-			console.log( 'Store completed option not updated', error );
+			console.log( 'Store completed option not updated' );
 		}
 	} );
 
@@ -87,7 +87,7 @@ test.describe( 'Store owner can view the Intro page', () => {
 				'yes'
 			);
 		} catch ( error ) {
-			console.log( 'Store completed option not updated', error );
+			console.log( 'Store completed option not updated' );
 		}
 		await page.goto( CUSTOMIZE_STORE_URL );
 

plugins/woocommerce/tests/e2e-pw/tests/customize-store/transitional.spec.js

@@ -39,7 +39,7 @@ test.describe( 'Store owner can view the Transitional page', () => {
 				'no'
 			);
 		} catch ( error ) {
-			console.log( 'Store completed option not updated', error );
+			console.log( 'Store completed option not updated' );
 		}
 	} );