Automate the testing of popular blocks in current and edge versions o…

…f GB (#45048)

* Automate the testing of popular blocks in current and edge versions of GB

* Take screenshots

* Improve code a bit and group sshots in a directory named after the site

* Simplified the assertions by DRYing it in a single re-usable function

* Update config with the new test account credentials

Add a new account in the "testAccounts" object called "gutenbergUpgradeUser". This account has all the test sites used by the GB upgrade tests.

* Cleanup

* Take screenshot of editor blocks and preview for edge sites too

* Step description improvement

* Use the published page instead of the preview to check content rendered on the frontendn

* Fix code editor text area not being found in headless mode

* Reduce repetition and some other minor improvements

- Get rid of repeat block factory methods in the GutenbergEditorComponent class;
- Let the block class know about its name and title;
- Change the usage of name to more closely match the semantics of the block API (name and title);
- Added a step to check for errors in the editor in the edge site;
- Added a step to check if all expected blocks are in the editor in the edge site;

* Use static getters to define block name and title in the test block component classes

* Close the tools and options menu after using to avoid it getting on the way of sshots

* Added check for invalid blocks and grouped other common steps in a re-usable helper

* Comment-out the invalid block assertion temporarily

Because of  because of Automattic/jetpack#16514

* Move the file selector for the TiledGalleryBlockComponent to a field with a name that better describes it

* Simplify a bit more and be explicit about the editor checks

* Use static properties for block{Name,Title}

Co-authored-by: Jon Surrell <jon.surrell@automattic.com>

test/e2e/lib/gutenberg/blocks/blog-posts-block-component.js

@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import GutenbergBlockComponent from './gutenberg-block-component';
+
+class BlogPostsBlockComponent extends GutenbergBlockComponent {
+	static blockTitle = 'Blog Posts';
+	static blockName = 'a8c/blog-posts';
+}
+
+export { BlogPostsBlockComponent };

test/e2e/lib/gutenberg/blocks/contact-form-block-component.js

@@ -9,13 +9,15 @@ import { By } from 'selenium-webdriver';
 import * as driverHelper from '../../driver-helper';
 import GutenbergBlockComponent from './gutenberg-block-component';
 
-export class ContactFormBlockComponent extends GutenbergBlockComponent {
-	constructor( driver, blockID ) {
-		super( driver, blockID );
-	}
+class ContactFormBlockComponent extends GutenbergBlockComponent {
+	static blockTitle = 'Form';
+	static blockName = 'jetpack/contact-form';
 
 	async _postInit() {
-		return await driverHelper.clickWhenClickable( this.driver, By.css( '.components-button.block-editor-block-variation-picker__variation' ) );
+		return await driverHelper.clickWhenClickable(
+			this.driver,
+			By.css( '.components-button.block-editor-block-variation-picker__variation' )
+		);
 	}
 
 	async openEditSettings() {
@@ -50,3 +52,5 @@ export class ContactFormBlockComponent extends GutenbergBlockComponent {
 		);
 	}
 }
+
+export { ContactFormBlockComponent };

test/e2e/lib/gutenberg/blocks/contact-info-block-component.js

@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import GutenbergBlockComponent from './gutenberg-block-component';
+
+class ContactInfoBlockComponent extends GutenbergBlockComponent {
+	static blockTitle = 'Contact Info';
+	static blockName = 'jetpack/contact-info';
+}
+
+export { ContactInfoBlockComponent };

test/e2e/lib/gutenberg/blocks/dynamic-separator-block-component.js

@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import GutenbergBlockComponent from './gutenberg-block-component';
+
+class DynamicSeparatorBlockComponent extends GutenbergBlockComponent {
+	static blockTitle = 'Dynamic HR';
+	static blockName = 'coblocks/dynamic-separator';
+}
+
+export { DynamicSeparatorBlockComponent };

test/e2e/lib/gutenberg/blocks/embeds-block-component.js

@@ -11,10 +11,6 @@ import * as driverHelper from '../../driver-helper';
 import GutenbergBlockComponent from './gutenberg-block-component';
 
 export default class EmbedsBlockComponent extends GutenbergBlockComponent {
-	constructor( driver, blockID ) {
-		super( driver, blockID );
-	}
-
 	async embedUrl( url ) {
 		await driverHelper.setWhenSettable(
 			this.driver,

test/e2e/lib/gutenberg/blocks/gallery-masonry-block-component.js

@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import GutenbergBlockComponent from './gutenberg-block-component';
+
+class GalleryMasonryBlockComponent extends GutenbergBlockComponent {
+	static blockTitle = 'Masonry';
+	static blockName = 'coblocks/gallery-masonry';
+}
+
+export { GalleryMasonryBlockComponent };

test/e2e/lib/gutenberg/blocks/image-block-component.js

@@ -10,10 +10,6 @@ import * as driverHelper from '../../driver-helper';
 import GutenbergBlockComponent from './gutenberg-block-component';
 
 export class ImageBlockComponent extends GutenbergBlockComponent {
-	constructor( driver, blockID ) {
-		super( driver, blockID );
-	}
-
 	async uploadImage( fileDetails ) {
 		await driverHelper.waitTillPresentAndDisplayed(
 			this.driver,

test/e2e/lib/gutenberg/blocks/index.js

@@ -0,0 +1,18 @@
+// TODO some blocks are exported as default and some not... maybe change all of them to export as default?
+export { BlogPostsBlockComponent } from './blog-posts-block-component';
+export { ContactFormBlockComponent } from './contact-form-block-component';
+export { ContactInfoBlockComponent } from './contact-info-block-component';
+export { DynamicSeparatorBlockComponent } from './dynamic-separator-block-component';
+export { GalleryMasonryBlockComponent } from './gallery-masonry-block-component';
+export { ImageBlockComponent } from './image-block-component';
+export { LayoutGridBlockComponent } from './layout-grid-block-component';
+export { RatingStarBlockComponent } from './rating-star-block-component';
+export { ShortcodeBlockComponent } from './shortcode-block-component';
+export { SlideshowBlockComponent } from './slideshow-block-component';
+export { SubscriptionsBlockComponent } from './subscriptions-block-component';
+export { TiledGalleryBlockComponent } from './tiled-gallery-block-component';
+export { YoutubeBlockComponent } from './youtube-block-component';
+export { default as EmbedsBlockComponent } from './embeds-block-component';
+export { default as GutenbergBlockComponent } from './gutenberg-block-component';
+export { default as MarkdownBlockComponent } from './markdown-block-component';
+export { default as SimplePaymentBlockComponent } from './payment-block-component';

test/e2e/lib/gutenberg/blocks/layout-grid-block-component.js

@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import GutenbergBlockComponent from './gutenberg-block-component';
+
+class LayoutGridBlockComponent extends GutenbergBlockComponent {
+	static blockTitle = 'Layout Grid';
+	static blockName = 'jetpack/layout-grid';
+}
+
+export { LayoutGridBlockComponent };

test/e2e/lib/gutenberg/blocks/markdown-block-component.js

@@ -10,10 +10,6 @@ import * as driverHelper from '../../driver-helper';
 import GutenbergBlockComponent from './gutenberg-block-component';
 
 export default class MarkdownBlockComponent extends GutenbergBlockComponent {
-	constructor( driver, blockID ) {
-		super( driver, blockID );
-	}
-
 	async setContent( content ) {
 		const inputSelector = By.css( `${ this.blockID } textarea.wp-block-jetpack-markdown__editor` );
 

test/e2e/lib/gutenberg/blocks/payment-block-component.js

@@ -10,10 +10,6 @@ import * as driverHelper from '../../driver-helper';
 import GutenbergBlockComponent from './gutenberg-block-component';
 
 export default class SimplePaymentsBlockComponent extends GutenbergBlockComponent {
-	constructor( driver, blockID ) {
-		super( driver, blockID );
-	}
-
 	async insertPaymentButtonDetails( {
 		title = 'Button',
 		description = 'Description',

test/e2e/lib/gutenberg/blocks/rating-star-block-component.js

@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import GutenbergBlockComponent from './gutenberg-block-component';
+
+class RatingStarBlockComponent extends GutenbergBlockComponent {
+	static blockTitle = 'Star Rating';
+	static blockName = 'jetpack/rating-star';
+}
+
+export { RatingStarBlockComponent };

test/e2e/lib/gutenberg/blocks/shortcode-block-component.js

@@ -10,10 +10,6 @@ import * as driverHelper from '../../driver-helper';
 import GutenbergBlockComponent from './gutenberg-block-component';
 
 export class ShortcodeBlockComponent extends GutenbergBlockComponent {
-	constructor( driver, blockID ) {
-		super( driver, blockID );
-	}
-
 	async enterShortcode( shortcode ) {
 		const shortcodeSelector = By.css( 'textarea.editor-plain-text' );
 		await driverHelper.waitTillPresentAndDisplayed( this.driver, shortcodeSelector );

test/e2e/lib/gutenberg/blocks/slideshow-block-component.js

@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import GutenbergBlockComponent from './gutenberg-block-component';
+
+class SlideshowBlockComponent extends GutenbergBlockComponent {
+	static blockTitle = 'Slideshow';
+	static blockName = 'jetpack/slideshow';
+}
+
+export { SlideshowBlockComponent };

test/e2e/lib/gutenberg/blocks/subscriptions-block-component.js

@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import GutenbergBlockComponent from './gutenberg-block-component';
+
+class SubscriptionsBlockComponent extends GutenbergBlockComponent {
+	static blockTitle = 'Subscription Form';
+	static blockName = 'jetpack/subscriptions';
+}
+
+export { SubscriptionsBlockComponent };

test/e2e/lib/gutenberg/blocks/tiled-gallery-block-component.js

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { By } from 'selenium-webdriver';
+
+/**
+ * Internal dependencies
+ */
+import GutenbergBlockComponent from './gutenberg-block-component';
+
+class TiledGalleryBlockComponent extends GutenbergBlockComponent {
+	static blockTitle = 'Tiled Gallery';
+	static blockName = 'jetpack/tiled-gallery';
+
+	fileInputSelector = By.xpath(
+		`//*[@id="${ this.blockID.slice( 1 ) }"]/div/div/div[3]/div[2]/input`
+	);
+
+	async uploadImages( filesDetails ) {
+		const fileInput = this.driver.findElement( this.fileInputSelector );
+
+		const files = filesDetails.map( ( f ) => f.file ).join( '\n ' );
+
+		fileInput.sendKeys( files );
+	}
+}
+
+export { TiledGalleryBlockComponent };

test/e2e/lib/gutenberg/blocks/youtube-block-component.js

@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import GutenbergBlockComponent from './gutenberg-block-component';
+
+class YoutubeBlockComponent extends GutenbergBlockComponent {
+	static blockTitle = 'YouTube';
+	static blockName = 'core-embed/youtube';
+}
+
+export { YoutubeBlockComponent };