[CYS - E2E tests] Add E2E tests for the loading screen (#45804)

* CYS: initial E2E tests loading page

* add more cases

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

---------

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

plugins/woocommerce/changelog/45804-45343-cys-core-e2e-tests-add-coverage-fot-the-loading-page

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+Comment: [CYS - E2E tests] Add E2E tests for the loading screen
+

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

@@ -0,0 +1,36 @@
+export class AssemblerPage {
+	page;
+	constructor( { page } ) {
+		this.page = page;
+	}
+
+	async setupSite( baseUrl ) {
+		const DESIGN_URL =
+			baseUrl +
+			'/wp-admin/admin.php?page=wc-admin&path=%2Fcustomize-store%2Fdesign';
+		await this.page.goto( DESIGN_URL );
+	}
+
+	async waitForLoadingScreenFinish() {
+		const frame = this.page.frameLocator(
+			'.cys-fullscreen-iframe[style="opacity: 1;"]'
+		);
+
+		await frame.getByRole( 'button', { name: 'Done' } ).waitFor();
+	}
+
+	/**
+	 * When the user passes for the loading screen, the assembler is loaded in an iframe.
+	 * Otherwise it is loaded in the page itself.
+	 *
+	 * @return {(Promise<import('playwright').Frame> | Promise<import('playwright').Page>)} The assembler page or the iframe where the assembler is loaded.
+	 */
+	async getAssembler() {
+		const selector = '.cys-fullscreen-iframe[style="opacity: 1;"]';
+
+		if ( await this.page.isVisible( selector ) ) {
+			return this.page.frameLocator( selector );
+		}
+		return this.page;
+	}
+}

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

@@ -0,0 +1,106 @@
+const { test: base, expect } = require( '@playwright/test' );
+const { AssemblerPage } = require( '../assembler/assembler.page' );
+const {
+	createRequestsToSetupStoreDictionary,
+	setupRequestInterceptor,
+} = require( './loading-screen.utils' );
+
+const test = base.extend( {
+	pageObject: async ( { page }, use ) => {
+		const pageObject = new AssemblerPage( { page } );
+		await use( pageObject );
+	},
+} );
+
+const steps = [
+	'Setting up the foundations',
+	'Turning on the lights',
+	'Opening the doors',
+];
+
+test.describe( 'Assembler - Loading Page', () => {
+	test.use( { storageState: process.env.ADMINSTATE } );
+
+	test( 'should display loading screen and steps on first run', async ( {
+		pageObject,
+		baseURL,
+		page,
+	} ) => {
+		await pageObject.setupSite( baseURL );
+
+		const requestToSetupStore = createRequestsToSetupStoreDictionary();
+
+		setupRequestInterceptor( page, requestToSetupStore );
+
+		for ( const step of steps ) {
+			await expect(
+				page.locator( '.woocommerce-onboarding-loader' )
+			).toBeVisible();
+			await expect( page.getByText( step ) ).toBeVisible();
+			await expect( page.getByAltText( step ) ).toBeVisible();
+		}
+
+		expect( Object.values( requestToSetupStore ) ).toEqual( [
+			true,
+			true,
+			true,
+		] );
+
+		await pageObject.waitForLoadingScreenFinish();
+	} );
+
+	test( 'should redirect to intro page in case of errors', async ( {
+		pageObject,
+		baseURL,
+		page,
+	} ) => {
+		await pageObject.setupSite( baseURL );
+
+		const requestToSetupStore = createRequestsToSetupStoreDictionary();
+
+		// Abort one of the requests to simulate an error.
+		await page.route(
+			requestToSetupStore[ Math.floor( Math.random() * 3 ) ],
+			( route ) => route.abort()
+		);
+
+		setupRequestInterceptor( page, requestToSetupStore );
+
+		await expect(
+			page
+				.locator( '#woocommerce-layout__primary' )
+				.getByText(
+					'Oops! We encountered a problem while setting up the foundations. Please try again or start with a theme.'
+				)
+		).toBeVisible();
+	} );
+
+	test( 'should hide loading screen and steps on subsequent runs', async ( {
+		pageObject,
+		baseURL,
+		page,
+	} ) => {
+		await pageObject.setupSite( baseURL );
+		await pageObject.waitForLoadingScreenFinish();
+
+		const assembler = await pageObject.getAssembler();
+		await assembler.getByRole( 'button', { name: 'Skip' } ).click();
+		await assembler.getByRole( 'button', { name: 'Done' } ).click();
+		await pageObject.setupSite( baseURL );
+
+		const requestToSetupStore = createRequestsToSetupStoreDictionary();
+
+		setupRequestInterceptor( page, requestToSetupStore );
+
+		for ( const step of steps ) {
+			await expect( page.getByText( step ) ).toBeHidden();
+			await expect( page.getByAltText( step ) ).toBeHidden();
+		}
+
+		expect( Object.values( requestToSetupStore ) ).toEqual( [
+			false,
+			false,
+			false,
+		] );
+	} );
+} );

plugins/woocommerce/tests/e2e-pw/tests/customize-store/loading-screen/loading-screen.utils.js

@@ -0,0 +1,23 @@
+const setupRequestInterceptor = ( page, requestToSetupStore ) => {
+	page.on( 'request', ( request ) => {
+		const url = request.url();
+		const requestAssembler = Object.keys( requestToSetupStore ).find(
+			( key ) => url.includes( key )
+		);
+
+		if ( requestToSetupStore[ requestAssembler ] !== undefined ) {
+			requestToSetupStore[ requestAssembler ] = true;
+		}
+	} );
+};
+
+const createRequestsToSetupStoreDictionary = () => ( {
+	'onboarding/themes/install?theme=twentytwentyfour': false,
+	'onboarding/products': false,
+	'themes/activate?theme=twentytwentyfour&theme_switch_via_cys_ai_loader': false,
+} );
+
+module.exports = {
+	setupRequestInterceptor,
+	createRequestsToSetupStoreDictionary,
+};