Add wpcom to onboarding

e2e/blueprints.test.ts

@@ -16,8 +16,7 @@ test.describe( 'Blueprints', () => {
 
 		// Complete onboarding before tests
 		const onboarding = new Onboarding( session.mainWindow );
-		await expect( onboarding.heading ).toBeVisible();
-		await onboarding.continueButton.click();
+		await onboarding.completeOnboarding();
 
 		const whatsNewModal = new WhatsNewModal( session.mainWindow );
 		if ( await whatsNewModal.locator.isVisible( { timeout: 5000 } ) ) {

e2e/import-export.test.ts

@@ -19,8 +19,7 @@ test.describe( 'Import / Export', () => {
 
 		// Complete onboarding before tests
 		const onboarding = new Onboarding( session.mainWindow );
-		await expect( onboarding.heading ).toBeVisible();
-		await onboarding.continueButton.click();
+		await onboarding.completeOnboarding();
 
 		const whatsNewModal = new WhatsNewModal( session.mainWindow );
 		if ( await whatsNewModal.locator.isVisible( { timeout: 5000 } ) ) {

e2e/import.test.ts

@@ -31,8 +31,7 @@ test.describe( 'Import', () => {
 
 		// Complete onboarding before tests
 		const onboarding = new Onboarding( session.mainWindow );
-		await expect( onboarding.heading ).toBeVisible();
-		await onboarding.continueButton.click();
+		await onboarding.completeOnboarding();
 
 		const whatsNewModal = new WhatsNewModal( session.mainWindow );
 		if ( await whatsNewModal.locator.isVisible( { timeout: 5000 } ) ) {

e2e/localization.test.ts

@@ -45,8 +45,7 @@ test.describe( 'Localization', () => {
 
 		// Complete onboarding before tests
 		const onboarding = new Onboarding( session.mainWindow );
-		await expect( onboarding.heading ).toBeVisible();
-		await onboarding.continueButton.click();
+		await onboarding.completeOnboarding();
 
 		const whatsNewModal = new WhatsNewModal( session.mainWindow );
 		if ( await whatsNewModal.locator.isVisible( { timeout: 5000 } ) ) {
@@ -96,7 +95,7 @@ test.describe( 'Localization', () => {
 		try {
 			const visible = await onboarding.heading.isVisible( { timeout: 2000 } );
 			if ( visible ) {
-				await onboarding.continueButton.click();
+				await onboarding.completeOnboarding();
 			}
 		} catch ( error ) {
 			// Onboarding not visible, continue with test

e2e/overview-customize-links.test.ts

@@ -75,9 +75,7 @@ test.describe( 'Overview customize links', () => {
 			await session.launch();
 
 			const onboarding = new Onboarding( session.mainWindow );
-			await expect( onboarding.heading ).toBeVisible();
-			await onboarding.siteNameInput.fill( siteName );
-			await onboarding.continueButton.click();
+			await onboarding.completeOnboarding( { customSiteName: siteName } );
 
 			const whatsNewModal = new WhatsNewModal( session.mainWindow );
 			if ( await whatsNewModal.locator.isVisible( { timeout: 5000 } ) ) {

e2e/page-objects/add-site-modal.ts

@@ -50,8 +50,8 @@ export default class AddSiteModal {
 		return this.page.getByTestId( 'stepper-action-button' );
 	}
 
-	async selectLocalPathForTesting() {
-		await this.siteForm.clickLocalPathButtonAndSelectFromEnv();
+	async selectLocalPathForTesting( partialExpectedPath: string ) {
+		await this.siteForm.clickLocalPathButtonAndSelectFromEnv( partialExpectedPath );
 	}
 
 	async selectBlueprintFile( filePath: string ) {

e2e/page-objects/onboarding.ts

@@ -1,5 +1,7 @@
 import { type Page } from '@playwright/test';
-import SiteForm from './site-form';
+import { expect } from '@playwright/test';
+import AddSiteModal from './add-site-modal';
+import MainSidebar from './main-sidebar';
 
 export default class Onboarding {
 	constructor( private page: Page ) {}
@@ -8,27 +10,63 @@ export default class Onboarding {
 		return this.page.getByTestId( 'onboarding' );
 	}
 
-	private get siteForm() {
-		return new SiteForm( this.page );
-	}
-
 	get heading() {
-		return this.locator.getByRole( 'heading', { name: 'Add your first site' } );
+		return this.locator.getByRole( 'heading', {
+			name: /Connect to your WordPress.com account|Add your first site/,
+		} );
 	}
 
-	get siteNameInput() {
-		return this.siteForm.siteNameInput;
-	}
+	async completeOnboarding( options?: { customSiteName?: string; customFolderName?: string } ) {
+		const { customSiteName, customFolderName } = options ?? {};
 
-	get localPathInput() {
-		return this.siteForm.localPathInput;
-	}
+		await expect( this.heading ).toBeVisible();
 
-	get continueButton() {
-		return this.locator.getByRole( 'button', { name: /Continue|Add site/ } );
-	}
+		if (
+			await this.locator
+				.getByRole( 'heading', { name: 'Connect to your WordPress.com account' } )
+				.isVisible()
+		) {
+			await this.locator.getByRole( 'button', { name: 'Skip →' } ).click();
+			const sidebar = new MainSidebar( this.page );
+			const modal = await sidebar.openAddSiteModal();
+			await modal.createSiteButton.click();
+
+			if ( customSiteName ) {
+				await modal.siteNameInput.fill( customSiteName );
+			}
+			await expect( modal.siteNameInput ).toHaveValue( /\S+/, { timeout: 5000 } );
+			const siteName = await modal.siteNameInput.inputValue();
+
+			if ( customFolderName ) {
+				await modal.selectLocalPathForTesting( customFolderName );
+			}
+			const localPath = await modal.localPathInput.inputValue();
+
+			await modal.continueButton.click();
+
+			return {
+				siteName,
+				localPath,
+			};
+		} else {
+			const modal = new AddSiteModal( this.page );
+			if ( customSiteName ) {
+				await modal.siteNameInput.fill( customSiteName );
+			}
+			await expect( modal.siteNameInput ).toHaveValue( /\S+/, { timeout: 5000 } );
+			const siteName = await modal.siteNameInput.inputValue();
+
+			if ( customFolderName ) {
+				await modal.selectLocalPathForTesting( customFolderName );
+			}
+			const localPath = await modal.localPathInput.inputValue();
+
+			await this.page.getByRole( 'button', { name: 'Continue' } ).click();
 
-	async selectLocalPathForTesting( partialExpectedPath: string ) {
-		await this.siteForm.clickLocalPathButtonAndSelectFromEnv( partialExpectedPath );
+			return {
+				siteName,
+				localPath,
+			};
+		}
 	}
 }

e2e/site-navigation.test.ts

@@ -43,8 +43,7 @@ test.describe( 'Site Navigation', () => {
 
 		// Complete onboarding before tests
 		const onboarding = new Onboarding( session.mainWindow );
-		await expect( onboarding.heading ).toBeVisible();
-		await onboarding.continueButton.click();
+		await onboarding.completeOnboarding();
 
 		const whatsNewModal = new WhatsNewModal( session.mainWindow );
 		if ( await whatsNewModal.locator.isVisible( { timeout: 5000 } ) ) {

e2e/sites.test.ts

@@ -30,20 +30,10 @@ test.describe( 'Servers', () => {
 		await session.launch( env );
 
 		const onboarding = new Onboarding( session.mainWindow );
-
-		if ( customSiteName ) {
-			await onboarding.siteNameInput.fill( customSiteName );
-		}
-		await expect( onboarding.siteNameInput ).toHaveValue( /\S+/, { timeout: 5000 } );
-		const siteName = await onboarding.siteNameInput.inputValue();
-
-		if ( customFolderName ) {
-			await onboarding.selectLocalPathForTesting( customFolderName );
-		}
-		const localPath = await onboarding.localPathInput.inputValue();
-
-		await expect( onboarding.heading ).toBeVisible();
-		await onboarding.continueButton.click();
+		const { siteName, localPath } = await onboarding.completeOnboarding( {
+			customSiteName,
+			customFolderName,
+		} );
 
 		await closeWhatsNew();
 

metrics/tests/site-editor.test.ts

@@ -30,14 +30,13 @@ test.describe( 'Site Editor Load Metrics', () => {
 	test( 'measure site editor load time', async () => {
 		let wpAdminUrl = '';
 		await session.launch();
-
-		// Setup WordPress site
+
 		const onboarding = new Onboarding( session.mainWindow );
-		await expect( onboarding.heading ).toBeVisible();
+		expect( onboarding.heading ).toBeVisible();
+
 		// Wait for store initialization to complete (provider constants loading)
 		await new Promise( ( resolve ) => setTimeout( resolve, 500 ) );
-		await onboarding.siteNameInput.fill( siteName );
-		await onboarding.continueButton.click();
+		await onboarding.completeOnboarding( { customSiteName: siteName } );
 
 		// Handle the What's New modal if it appears
 		const whatsNewModal = new WhatsNewModal( session.mainWindow );

metrics/tests/site-startup.test.ts

@@ -40,7 +40,7 @@ test.describe( 'Startup Metrics', () => {
 			const onboarding = new Onboarding( session.mainWindow );
 			await expect( onboarding.heading ).toBeVisible();
 			const startTime = Date.now();
-			await onboarding.continueButton.click();
+			await onboarding.completeOnboarding();
 
 			// Handle the What's New modal if it appears
 			const whatsNewModal = new WhatsNewModal( session.mainWindow );

src/components/app.tsx

@@ -5,16 +5,16 @@ import {
 import { useEffect } from 'react';
 import MacTitlebar from 'src/components/mac-titlebar';
 import MainSidebar from 'src/components/main-sidebar';
-import Onboarding from 'src/components/onboarding';
 import { SiteContentTabs } from 'src/components/site-content-tabs';
 import TopBar from 'src/components/top-bar';
 import WindowsTitlebar from 'src/components/windows-titlebar';
 import { useLocalizationSupport } from 'src/hooks/use-localization-support';
-import { useOnboarding } from 'src/hooks/use-onboarding';
 import { useSidebarVisibility } from 'src/hooks/use-sidebar-visibility';
 import { isWindows } from 'src/lib/app-globals';
 import { cx } from 'src/lib/cx';
 import { getIpcApi } from 'src/lib/get-ipc-api';
+import { Onboarding } from 'src/modules/onboarding';
+import { useOnboarding } from 'src/modules/onboarding/hooks/use-onboarding';
 import { UserSettings } from 'src/modules/user-settings';
 import { WhatsNewModal, useWhatsNew } from 'src/modules/whats-new';
 import 'src/index.css';