diff --git a/client/components/checklist/task.js b/client/components/checklist/task.js index ec69fe9a40763..04eb0cd114b53 100644 --- a/client/components/checklist/task.js +++ b/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 } diff --git a/client/my-sites/checklist/wpcom-checklist/component.jsx b/client/my-sites/checklist/wpcom-checklist/component.jsx index 1e4385b5be131..1bced660382c2 100644 --- a/client/my-sites/checklist/wpcom-checklist/component.jsx +++ b/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" /> ); }; diff --git a/test/e2e/lib/gutenberg/gutenberg-editor-component.js b/test/e2e/lib/gutenberg/gutenberg-editor-component.js index 8674c70fef2f2..4b66a12abb9f5 100644 --- a/test/e2e/lib/gutenberg/gutenberg-editor-component.js +++ b/test/e2e/lib/gutenberg/gutenberg-editor-component.js @@ -130,6 +130,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' ); diff --git a/test/e2e/lib/pages/checklist-page.js b/test/e2e/lib/pages/checklist-page.js index e88f2edc33a81..7707b9c678d31 100644 --- a/test/e2e/lib/pages/checklist-page.js +++ b/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 ); + } } diff --git a/test/e2e/specs/wp-signup-spec.js b/test/e2e/specs/wp-signup-spec.js index c491ef0924e8d..951d345dd2cad 100644 --- a/test/e2e/specs/wp-signup-spec.js +++ b/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 ); } );