Pinterest Block: Add an e2e test. (#14096)

tests/e2e/bin/setup-e2e-travis.sh

@@ -138,6 +138,7 @@ PHP
 	wp --allow-root config set WP_DEBUG true --raw --type=constant
 	wp --allow-root config set WP_DEBUG_LOG true --raw --type=constant
 	wp --allow-root config set WP_DEBUG_DISPLAY false --raw --type=constant
+	wp --allow-root config set JETPACK_BETA_BLOCKS true --raw --type=constant
 
 	# NOTE: Force classic connection flow
 	# https://github.com/Automattic/jetpack/pull/13288

tests/e2e/lib/blocks/mailchimp.js

@@ -7,13 +7,17 @@ import ConnectionsPage from '../pages/wpcom/connections';
 
 export default class MailchimpBlock {
 	constructor( block, page ) {
-		this.blockName = MailchimpBlock.name();
+		this.blockTitle = MailchimpBlock.title();
 		this.block = block;
 		this.page = page;
 		this.blockSelector = '#block-' + block.clientId;
 	}
 
 	static name() {
+		return 'mailchimp';
+	}
+
+	static title() {
 		return 'Mailchimp';
 	}
 

tests/e2e/lib/blocks/pinterest.js

@@ -0,0 +1,49 @@
+/**
+ * Internal dependencies
+ */
+import { waitForSelector, waitAndClick, waitAndType } from '../page-helper';
+
+export default class PinterestBlock {
+	constructor( block, page ) {
+		this.blockTitle = PinterestBlock.title();
+		this.block = block;
+		this.page = page;
+		this.blockSelector = '#block-' + block.clientId;
+	}
+
+	static name() {
+		return 'pinterest';
+	}
+
+	static title() {
+		return 'Pinterest';
+	}
+
+	static embedUrl() {
+		return 'https://www.pinterest.com/pin/180003316347175596/';
+	}
+
+	async addEmbed() {
+		const inputSelector = this.getSelector( '.components-placeholder__input' );
+		const descriptionSelector = this.getSelector( "button[type='submit']" );
+
+		await waitAndClick( this.page, inputSelector );
+		await waitAndType( this.page, inputSelector, PinterestBlock.embedUrl() );
+
+		await waitAndClick( this.page, descriptionSelector );
+	}
+
+	getSelector( selector ) {
+		return `${ this.blockSelector } ${ selector }`;
+	}
+
+	/**
+	 * Checks whether block is rendered on frontend
+	 * @param {Page} page Puppeteer page instance
+	 */
+	static async isRendered( page ) {
+		const containerSelector = `.entry-content a[data-pin-do='embedPin'][href='${ PinterestBlock.embedUrl() }']`;
+
+		await waitForSelector( page, containerSelector );
+	}
+}

tests/e2e/lib/blocks/simple-payments.js

@@ -5,13 +5,17 @@ import { waitAndType, waitAndClick, waitForSelector } from '../page-helper';
 
 export default class SimplePaymentBlock {
 	constructor( block, page ) {
-		this.blockName = SimplePaymentBlock.name();
+		this.blockTitle = SimplePaymentBlock.title();
 		this.block = block;
 		this.page = page;
 		this.blockSelector = '#block-' + block.clientId;
 	}
 
 	static name() {
+		return 'simple-payments';
+	}
+
+	static title() {
 		return 'Simple Payments';
 	}
 

tests/e2e/lib/blocks/word-ads.js

@@ -9,13 +9,17 @@ import { clickBlockToolbarButton } from '@wordpress/e2e-test-utils';
 
 export default class WordAdsBlock {
 	constructor( block, page ) {
-		this.blockName = WordAdsBlock.name();
+		this.blockTitle = WordAdsBlock.title();
 		this.block = block;
 		this.page = page;
 		this.blockSelector = '#block-' + block.clientId;
 	}
 
 	static name() {
+		return 'wordads';
+	}
+
+	static title() {
 		return 'Ad';
 	}
 

tests/e2e/lib/page-helper.js

@@ -54,8 +54,8 @@ export async function waitForSelector( page, selector, options = {} ) {
  * @param {Object} options Custom options to modify function behavior.
  */
 export async function waitAndClick( page, selector, options = { visible: true } ) {
-	await waitForSelector( page, selector, options );
-	return await page.click( selector, options );
+	const element = await waitForSelector( page, selector, options );
+	return await element.click( options );
 }
 
 /**

tests/e2e/lib/pages/postFrontend.js

@@ -6,7 +6,7 @@ import { waitAndClick, waitForSelector } from '../page-helper';
 
 export default class PostFrontendPage extends Page {
 	constructor( page ) {
-		const expectedSelector = '#main article.post';
+		const expectedSelector = '.post';
 		super( page, { expectedSelector } );
 	}
 

tests/e2e/lib/pages/wp-admin/block-editor.js

@@ -16,9 +16,9 @@ export default class BlockEditorPage extends Page {
 		super( page, { expectedSelector, url } );
 	}
 
-	async insertBlock( blockName ) {
-		await searchForBlock( blockName );
-		const blockIconSelector = `.editor-inserter__menu button[aria-label*='${ blockName }']`;
+	async insertBlock( blockName, blockTitle ) {
+		await searchForBlock( blockTitle );
+		const blockIconSelector = `.editor-block-list-item-jetpack-${ blockName }`;
 		const jetpackPanelSelector = '.components-panel__body .jetpack-logo';
 		await scrollIntoView( this.page, jetpackPanelSelector );
 		await waitAndClick( this.page, blockIconSelector );

tests/e2e/lib/pages/wpcom/connections.js

@@ -45,7 +45,8 @@ export default class ConnectionsPage extends Page {
 	}
 
 	async connectMailchimp() {
-		const mailchimpConnectSelector = 'div.mailchimp .foldable-card__summary button:not([disabled])';
+		const mailchimpConnectSelector =
+			'div.mailchimp .foldable-card__summary-expanded button:not([disabled])';
 		const mcPopupPage = await clickAndWaitForNewPage( this.page, mailchimpConnectSelector );
 
 		// MC Login pop-up page. TODO: maybe extract to a new page

tests/e2e/specs/pro-blocks.test.js

@@ -8,6 +8,7 @@ import { connectThroughWPAdminIfNeeded } from '../lib/flows/jetpack-connect';
 import { resetWordpressInstall, getNgrokSiteUrl, activateModule } from '../lib/utils-helper';
 import SimplePaymentBlock from '../lib/blocks/simple-payments';
 import WordAdsBlock from '../lib/blocks/word-ads';
+import PinterestBlock from '../lib/blocks/pinterest';
 
 describe( 'Paid blocks', () => {
 	beforeAll( async () => {
@@ -27,7 +28,10 @@ describe( 'Paid blocks', () => {
 	describe( 'Mailchimp Block', () => {
 		it( 'Can publish a post with a Mailchimp Block', async () => {
 			const blockEditor = await BlockEditorPage.visit( page );
-			const blockInfo = await blockEditor.insertBlock( MailchimpBlock.name() );
+			const blockInfo = await blockEditor.insertBlock(
+				MailchimpBlock.name(),
+				MailchimpBlock.title()
+			);
 
 			const mcBlock = new MailchimpBlock( blockInfo, page );
 			await mcBlock.connect();
@@ -44,7 +48,10 @@ describe( 'Paid blocks', () => {
 	describe( 'Simple Payment', () => {
 		it( 'Can publish a post with a Simple Payments block', async () => {
 			const blockEditor = await BlockEditorPage.visit( page );
-			const blockInfo = await blockEditor.insertBlock( SimplePaymentBlock.name() );
+			const blockInfo = await blockEditor.insertBlock(
+				SimplePaymentBlock.name(),
+				SimplePaymentBlock.title()
+			);
 
 			const spBlock = new SimplePaymentBlock( blockInfo, page );
 			await spBlock.fillDetails();
@@ -61,7 +68,7 @@ describe( 'Paid blocks', () => {
 	describe( 'WordAds block', () => {
 		it( 'Can publish a post with a WordAds block', async () => {
 			const blockEditor = await BlockEditorPage.visit( page );
-			const blockInfo = await blockEditor.insertBlock( WordAdsBlock.name() );
+			const blockInfo = await blockEditor.insertBlock( WordAdsBlock.name(), WordAdsBlock.title() );
 
 			const adBlock = new WordAdsBlock( blockInfo, page );
 			await adBlock.switchFormat( 3 ); // switch to Wide Skyscraper ad format
@@ -74,4 +81,24 @@ describe( 'Paid blocks', () => {
 			await frontend.isRenderedBlockPresent( WordAdsBlock );
 		} );
 	} );
+
+	describe( 'Pinterest block', () => {
+		it( 'Can publish a post with a Pinterest block', async () => {
+			const blockEditor = await BlockEditorPage.visit( page );
+			const blockInfo = await blockEditor.insertBlock(
+				PinterestBlock.name(),
+				PinterestBlock.title()
+			);
+
+			const pinterestBlock = new PinterestBlock( blockInfo, page );
+			await pinterestBlock.addEmbed();
+
+			await blockEditor.focus();
+			await blockEditor.publishPost();
+			await blockEditor.viewPost();
+
+			const frontend = await PostFrontendPage.init( page );
+			await frontend.isRenderedBlockPresent( PinterestBlock );
+		} );
+	} );
 } );