E2E: Check Jetpack blocks on Gutenberg (#38767)

- Adds an extra step to the basic publish post e2e that verifies the Jetpack blocks are registered.
- Includes the basic publish post e2e in the IE11 canary suite (we had a few IE11 regressions recently, so we aim to have more automated checks that prevent those regressions).

test/e2e/lib/driver-helper.js

@@ -233,8 +233,8 @@ export async function isElementPresent( driver, selector ) {
 	return !! elements.length;
 }
 
-export function elementIsNotPresent( driver, cssSelector ) {
-	return this.isElementPresent( driver, by.css( cssSelector ) ).then( function( isPresent ) {
+export function elementIsNotPresent( driver, selector ) {
+	return this.isElementPresent( driver, selector ).then( function( isPresent ) {
 		return ! isPresent;
 	} );
 }
@@ -333,8 +333,9 @@ export function waitTillNotPresent( driver, selector, waitOverride ) {
 
 /**
  * Check whether an image is actually visible - that is rendered to the screen - not just having a reference in the DOM
- * @param {webdriver} driver - Browser context in which to search
- * @param {WebElement} webElement - Element to search for
+ *
+ * @param {object} driver - Browser context in which to search
+ * @param {object} webElement - Element to search for
  * @returns {Promise} - Resolved when the script is done executing
  */
 export function imageVisible( driver, webElement ) {

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

@@ -171,6 +171,40 @@ export default class GutenbergEditorComponent extends AsyncBaseContainer {
 		}
 	}
 
+	async openBlockInserterAndSearch( searchTerm ) {
+		await driverHelper.scrollIntoView(
+			this.driver,
+			By.css( '.block-editor-writing-flow' ),
+			'start'
+		);
+		const inserterToggleSelector = By.css( '.edit-post-header .block-editor-inserter__toggle' );
+		const inserterMenuSelector = By.css( '.block-editor-inserter__menu' );
+		const inserterSearchInputSelector = By.css( 'input.block-editor-inserter__search' );
+		if ( await driverHelper.elementIsNotPresent( this.driver, inserterMenuSelector ) ) {
+			await driverHelper.waitTillPresentAndDisplayed( this.driver, inserterToggleSelector );
+			await driverHelper.clickWhenClickable( this.driver, inserterToggleSelector );
+			await driverHelper.waitTillPresentAndDisplayed( this.driver, inserterMenuSelector );
+		}
+		await driverHelper.setWhenSettable( this.driver, inserterSearchInputSelector, searchTerm );
+	}
+
+	async isBlockCategoryPresent( name ) {
+		const categorySelector = '.block-editor-inserter__results .components-panel__body-title';
+		const categoryName = await this.driver.findElement( By.css( categorySelector ) ).getText();
+		return categoryName === name;
+	}
+
+	async closeBlockInserter() {
+		const inserterCloseSelector = By.css(
+			driverManager.currentScreenSize() === 'mobile'
+				? '.block-editor-inserter__popover .components-popover__close'
+				: '.edit-post-header .block-editor-inserter__toggle'
+		);
+		const inserterMenuSelector = By.css( '.block-editor-inserter__menu' );
+		await driverHelper.clickWhenClickable( this.driver, inserterCloseSelector );
+		await driverHelper.waitTillNotPresent( this.driver, inserterMenuSelector );
+	}
+
 	// return blockID - top level block id which is looks like `block-b91ce479-fb2d-45b7-ad92-22ae7a58cf04`. Should be used for further interaction with added block.
 	async addBlock( name ) {
 		name = name.charAt( 0 ).toUpperCase() + name.slice( 1 ); // Capitalize block name
@@ -201,9 +235,7 @@ export default class GutenbergEditorComponent extends AsyncBaseContainer {
 				blockClass = 'dynamic-separator';
 				break;
 		}
-		const inserterToggleSelector = By.css( '.edit-post-header .editor-inserter__toggle' );
-		const inserterMenuSelector = By.css( '.editor-inserter__menu' );
-		const inserterSearchInputSelector = By.css( 'input.editor-inserter__search' );
+
 		const inserterBlockItemSelector = By.css(
 			`li.editor-block-types-list__list-item button.editor-block-list-item-${ prefix }${ blockClass
 				.replace( /\s+/g, '-' )
@@ -213,11 +245,7 @@ export default class GutenbergEditorComponent extends AsyncBaseContainer {
 			`.block-editor-block-list__block.is-selected[aria-label*='Block: ${ name }']`
 		);
 
-		await driverHelper.scrollIntoView( this.driver, By.css( '.editor-writing-flow' ), 'start' );
-		await driverHelper.waitTillPresentAndDisplayed( this.driver, inserterToggleSelector );
-		await driverHelper.clickWhenClickable( this.driver, inserterToggleSelector );
-		await driverHelper.waitTillPresentAndDisplayed( this.driver, inserterMenuSelector );
-		await driverHelper.setWhenSettable( this.driver, inserterSearchInputSelector, name );
+		await this.openBlockInserterAndSearch( name );
 		// Using a JS click here since the Webdriver click wasn't working
 		const button = await this.driver.findElement( inserterBlockItemSelector );
 		await this.driver

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

@@ -88,7 +88,10 @@ export default class EditorPage extends AsyncBaseContainer {
 		);
 		const fileNameInput = await driver.findElement( fileNameInputSelector );
 		await fileNameInput.sendKeys( file );
-		await driverHelper.elementIsNotPresent( driver, '.media-library__list-item.is-transient' );
+		await driverHelper.elementIsNotPresent(
+			driver,
+			by.css( '.media-library__list-item.is-transient' )
+		);
 		const errorShown = await this.isErrorDisplayed();
 		if ( errorShown ) {
 			throw new Error( 'There is an error shown on the editor page!' );

test/e2e/specs/wp-calypso-gutenberg-post-editor-spec.js

@@ -243,7 +243,7 @@ describe( `[${ host }] Calypso Gutenberg Editor: Posts (${ screenSize })`, funct
 		} );
 	} );
 
-	describe( 'Basic Public Post @canary @parallel', function() {
+	describe( 'Basic Public Post @canary @ie11canary @parallel', function() {
 		describe( 'Publish a New Post', function() {
 			const blogPostTitle = dataHelper.randomPhrase();
 			const blogPostQuote =
@@ -278,6 +278,21 @@ describe( `[${ host }] Calypso Gutenberg Editor: Posts (${ screenSize })`, funct
 				);
 			} );
 
+			step( 'Can see the Jetpack blocks', async function() {
+				// Jetpack blocks are broken in IE11. See https://github.com/Automattic/jetpack/issues/14273
+				if ( dataHelper.getTargetType() === 'IE11' ) {
+					return this.skip();
+				}
+				const gEditorComponent = await GutenbergEditorComponent.Expect( driver );
+				await gEditorComponent.openBlockInserterAndSearch( 'Jetpack' );
+				assert.strictEqual(
+					await gEditorComponent.isBlockCategoryPresent( 'Jetpack' ),
+					true,
+					'Jetpack blocks are not present'
+				);
+				await gEditorComponent.closeBlockInserter();
+			} );
+
 			step( 'Can publish and view content', async function() {
 				const gEditorComponent = await GutenbergEditorComponent.Expect( driver );
 				await gEditorComponent.publish( { visit: true } );