E2E: Check homepage can be edited on Gutenberg after sign up (#38765)

Adds an extra step to the sign up for a free/premium site tests that verifies there are no block errors when editing the homepages of the new created sites.

client/components/checklist/task.js

@@ -16,6 +16,7 @@ import Spinner from 'components/spinner';
 
 class Task extends PureComponent {
 	static propTypes = {
+		action: PropTypes.string,
 		buttonText: PropTypes.node,
 		collapsed: PropTypes.bool, // derived from ui state
 		completed: PropTypes.bool,
@@ -120,6 +121,7 @@ class Task extends PureComponent {
 
 	render() {
 		const {
+			action,
 			buttonText,
 			collapsed,
 			completed,
@@ -203,6 +205,7 @@ class Task extends PureComponent {
 											onClick={ onClick }
 											primary={ ! _collapsed }
 											target={ target }
+											data-e2e-action={ action }
 										>
 											{ taskActionButtonText }
 										</Button>

client/my-sites/checklist/wpcom-checklist/component.jsx

@@ -913,6 +913,7 @@ class WpcomChecklistComponent extends PureComponent {
 				nextInlineHelp={ this.nextInlineHelp }
 				showSkip={ false }
 				buttonText={ translate( 'Update homepage' ) }
+				action="update-homepage"
 			/>
 		);
 	};

test/e2e/lib/gutenberg/gutenberg-editor-component.js

@@ -146,6 +146,10 @@ export default class GutenbergEditorComponent extends AsyncBaseContainer {
 		return await driverHelper.isElementPresent( this.driver, By.css( '.editor-error-boundary' ) );
 	}
 
+	async hasInvalidBlocks() {
+		return await driverHelper.isElementPresent( this.driver, By.css( '.block-editor-warning' ) );
+	}
+
 	async removeNUXNotice() {
 		const nuxPopupSelector = By.css( '.nux-dot-tip' );
 		const nuxDisableSelector = By.css( '.nux-dot-tip__disable' );

test/e2e/lib/pages/checklist-page.js

@@ -15,6 +15,9 @@ export default class ChecklistPage extends AsyncBaseContainer {
 	constructor( driver, url ) {
 		super( driver, By.css( '.customer-home__layout .checklist' ), url );
 		this.headerSelector = By.css( '.customer-home__layout .customer-home__card-checklist-heading' );
+		this.updateHomeSelector = By.css(
+			'.customer-home__layout button[data-e2e-action="update-homepage"]'
+		);
 	}
 
 	async headerExists() {
@@ -31,4 +34,8 @@ export default class ChecklistPage extends AsyncBaseContainer {
 			'Could not locate message that email is verified.'
 		);
 	}
+
+	async updateHomepage() {
+		await driverHelper.clickWhenClickable( this.driver, this.updateHomeSelector );
+	}
 }

test/e2e/specs/wp-signup-spec.js

@@ -58,6 +58,7 @@ import SignUpStep from '../lib/flows/sign-up-step';
 import * as sharedSteps from '../lib/shared-steps/wp-signup-spec';
 import AccountSettingsPage from '../lib/pages/account/account-settings-page';
 import ChecklistPage from '../lib/pages/checklist-page';
+import GutenbergEditorComponent from '../lib/gutenberg/gutenberg-editor-component';
 
 const mochaTimeOut = config.get( 'mochaTimeoutMS' );
 const startBrowserTimeoutMS = config.get( 'startBrowserTimeoutMS' );
@@ -516,6 +517,26 @@ describe( `[${ host }] Sign Up  (${ screenSize }, ${ locale })`, function() {
 
 		sharedSteps.canSeeTheOnboardingChecklist();
 
+		step( 'Can update the homepage', async function() {
+			const checklistPage = await ChecklistPage.Expect( this.driver );
+			await checklistPage.updateHomepage();
+			const gEditorComponent = await GutenbergEditorComponent.Expect( driver );
+
+			const errorShown = await gEditorComponent.errorDisplayed();
+			assert.strictEqual(
+				errorShown,
+				false,
+				'There is a block editor error when editing the homepage'
+			);
+
+			const hasInvalidBlocks = await gEditorComponent.hasInvalidBlocks();
+			return assert.strictEqual(
+				hasInvalidBlocks,
+				false,
+				'There are invalid blocks when editing the homepage'
+			);
+		} );
+
 		step( 'Can delete the plan', async function() {
 			return await new DeletePlanFlow( driver ).deletePlan( 'premium' );
 		} );
@@ -1215,6 +1236,31 @@ describe( `[${ host }] Sign Up  (${ screenSize }, ${ locale })`, function() {
 
 		sharedSteps.canSeeTheOnboardingChecklist();
 
+		step( 'Can update the homepage', async function() {
+			const checklistPage = await ChecklistPage.Expect( this.driver );
+			await checklistPage.updateHomepage();
+			const gEditorComponent = await GutenbergEditorComponent.Expect( driver );
+
+			const errorShown = await gEditorComponent.errorDisplayed();
+			assert.strictEqual(
+				errorShown,
+				false,
+				'There is a block editor error when editing the homepage'
+			);
+
+			// Jetpack blocks are broken in IE11. See https://github.com/Automattic/jetpack/issues/14273
+			if ( dataHelper.getTargetType() === 'IE11' ) {
+				return this.skip();
+			}
+
+			const hasInvalidBlocks = await gEditorComponent.hasInvalidBlocks();
+			return assert.strictEqual(
+				hasInvalidBlocks,
+				false,
+				'There are invalid blocks when editing the homepage'
+			);
+		} );
+
 		after( 'Can delete our newly created account', async function() {
 			return await new DeleteAccountFlow( driver ).deleteAccount( blogName );
 		} );