Add some Block Editor Tracking E2E tests (#53733)

test/e2e/lib/components/site-editor-component.js

@@ -127,4 +127,33 @@ export default class SiteEditorComponent extends AsyncBaseContainer {
 			By.css( '.edit-site-header-toolbar__list-view-toggle' )
 		);
 	}
+
+	async removeBlock( blockID ) {
+		await this.runInCanvas( async () => {
+			const blockLocator = By.css( `.wp-block[id="${ blockID }"]` );
+			await driverHelper.waitUntilElementLocatedAndVisible(
+				this.driver,
+				blockLocator,
+				this.explicitWaitMS / 5
+			);
+			await this.driver.findElement( blockLocator ).click();
+		} );
+
+		await driverHelper.clickWhenClickable(
+			this.driver,
+			By.css( '.block-editor-block-settings-menu' )
+		);
+		await driverHelper.waitUntilElementLocatedAndVisible(
+			this.driver,
+			By.css( '.components-menu-group' ),
+			this.explicitWaitMS / 5
+		);
+		await this.driver.sleep( 1000 );
+		return await driverHelper.clickWhenClickable(
+			this.driver,
+			By.css(
+				'.components-menu-group:last-of-type button.components-menu-item__button:last-of-type'
+			)
+		);
+	}
 }

test/e2e/lib/gutenberg/tracking/general-tests.js

@@ -2,13 +2,15 @@
  * External dependencies
  */
 import assert from 'assert';
+import { By } from 'selenium-webdriver';
 
 /**
  * Internal dependencies
  */
 import GutenbergEditorComponent from '../gutenberg-editor-component';
 import SiteEditorComponent from '../../components/site-editor-component';
 import { getEventsStack, getTotalEventsFiredForBlock } from './utils';
+import * as driverHelper from '../../driver-helper';
 
 export function createGeneralTests( { it, editorType, postType } ) {
 	const isSiteEditor = editorType === 'site';
@@ -115,6 +117,47 @@ export function createGeneralTests( { it, editorType, postType } ) {
 		assert.strictEqual( toggleEvents[ 1 ][ 1 ].is_open, true );
 	} );
 
+	it( 'Tracks "wpcom_block_editor_undo_performed" event', async function () {
+		const editor = await EditorComponent.Expect( this.driver, gutenbergEditorType );
+
+		await editor.addBlock( 'Heading' );
+		await editor.addBlock( 'Columns' );
+		await editor.addBlock( 'Columns' );
+
+		await driverHelper.clickWhenClickable( this.driver, By.css( 'button[aria-label="Undo"]' ) );
+
+		const eventsStack = await getEventsStack( this.driver );
+		const undoFiredOnce =
+			eventsStack.filter( ( [ eventName ] ) => eventName === 'wpcom_block_editor_undo_performed' )
+				.length === 1;
+		assert.strictEqual(
+			undoFiredOnce,
+			true,
+			'"wpcom_block_editor_undo_performed" editor tracking event failed to fire only once'
+		);
+	} );
+
+	it( 'Tracks "wpcom_block_editor_redo_performed" event', async function () {
+		const editor = await EditorComponent.Expect( this.driver, gutenbergEditorType );
+
+		await editor.addBlock( 'Heading' );
+		await editor.addBlock( 'Columns' );
+		await editor.addBlock( 'Columns' );
+
+		await driverHelper.clickWhenClickable( this.driver, By.css( 'button[aria-label="Undo"]' ) );
+		await driverHelper.clickWhenClickable( this.driver, By.css( 'button[aria-label="Redo"]' ) );
+
+		const eventsStack = await getEventsStack( this.driver );
+		const redoFiredOnce =
+			eventsStack.filter( ( [ eventName ] ) => eventName === 'wpcom_block_editor_redo_performed' )
+				.length === 1;
+		assert.strictEqual(
+			redoFiredOnce,
+			true,
+			'"wpcom_block_editor_redo_performed" editor tracking event failed to fire only once'
+		);
+	} );
+
 	if ( editorType === 'post' ) {
 		it( 'Tracks "wpcom_block_editor_details_open" event', async function () {
 			const editor = await EditorComponent.Expect( this.driver, gutenbergEditorType );

test/e2e/lib/gutenberg/tracking/utils.js

@@ -12,10 +12,10 @@ export function getTotalEventsFiredForBlock( eventsStack, event, block ) {
 	return getEventsFiredForBlock( eventsStack, event, block ).length;
 }
 
-export async function clearEventsStack() {
+export async function clearEventsStack( driver ) {
 	// Reset e2e tests events stack after each step in order
 	// that we have a test specific stack to assert against.
-	await this.driver.executeScript( `window._e2eEventsStack = [];` );
+	await driver.executeScript( `window._e2eEventsStack = [];` );
 }
 
 export async function getEventsStack( driver ) {

test/e2e/specs/specs-wpcom/wp-calypso-gutenberg-page-editor-tracking-spec.js

@@ -42,6 +42,8 @@ describe( `[${ host }] Calypso Gutenberg Page Editor Tracking: (${ screenSize })
 
 		createGeneralTests( { it, editorType: 'post', postType: 'page' } );
 
-		afterEach( clearEventsStack );
+		afterEach( async function () {
+			await clearEventsStack( this.driver );
+		} );
 	} );
 } );

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

@@ -42,6 +42,8 @@ describe( `[${ host }] Calypso Gutenberg Post Editor Tracking: (${ screenSize })
 			postType: 'post',
 		} );
 
-		afterEach( clearEventsStack );
+		afterEach( async function () {
+			await clearEventsStack( this.driver );
+		} );
 	} );
 } );

test/e2e/specs/specs-wpcom/wp-calypso-gutenberg-site-editor-tracking-spec.js

@@ -1,8 +1,9 @@
 /**
  * External dependencies
  */
-import config from 'config';
 import assert from 'assert';
+import config from 'config';
+import { By } from 'selenium-webdriver';
 
 /**
  * Internal dependencies
@@ -18,7 +19,6 @@ import * as driverHelper from '../../lib/driver-helper.js';
 import * as dataHelper from '../../lib/data-helper.js';
 import { clearEventsStack, getEventsStack } from '../../lib/gutenberg/tracking/utils.js';
 import { createGeneralTests } from '../../lib/gutenberg/tracking/general-tests.js';
-import { By } from 'selenium-webdriver';
 
 const mochaTimeOut = config.get( 'mochaTimeoutMS' );
 const screenSize = driverManager.currentScreenSize();
@@ -163,6 +163,95 @@ describe( `[${ host }] Calypso Gutenberg Site Editor Tracking: (${ screenSize })
 			} );
 		} );
 
-		afterEach( clearEventsStack );
+		it( "Shouldn't track replaceInnerBlocks when template parts load", async function () {
+			const editor = await SiteEditorComponent.Expect( this.driver );
+
+			await editor.addBlock( 'Template Part' );
+			await clearEventsStack( this.driver );
+
+			await editor.runInCanvas( async () => {
+				await driverHelper.clickWhenClickable(
+					this.driver,
+					By.css( '.wp-block-template-part.is-selected button.is-primary' )
+				);
+			} );
+			await driverHelper.clickWhenClickable(
+				this.driver,
+				By.css( '.wp-block-template-part__selection-preview-item' )
+			);
+			await editor.waitForTemplatePartsToLoad();
+
+			const eventsStack = await getEventsStack( this.driver );
+			const blockInsertedEventFired = eventsStack.some(
+				( [ eventName ] ) => eventName === 'wpcom_block_inserted'
+			);
+			assert.strictEqual(
+				blockInsertedEventFired,
+				false,
+				'"wpcom_block_inserted" editor tracking event fired when template parts load, this should not happen'
+			);
+		} );
+
+		it( "Shouldn't track replaceInnerBlocks after undoing or redoing a template part edit", async function () {
+			const editor = await SiteEditorComponent.Expect( this.driver );
+
+			// Insert a template part block and clear the events stack
+			// so the insert event won't intefere with our asserts.
+			const blockId = await editor.addBlock( 'Template Part' );
+			await clearEventsStack( this.driver );
+
+			// Add a template part block and select an existing template part.
+			// Make sure the template part is loaded before moving on.
+			await editor.runInCanvas( async () => {
+				await driverHelper.clickWhenClickable(
+					this.driver,
+					By.css( '.wp-block-template-part.is-selected button.is-primary' )
+				);
+			} );
+			await driverHelper.clickWhenClickable(
+				this.driver,
+				By.css( '.wp-block-template-part__selection-preview-item' )
+			);
+			await editor.waitForTemplatePartsToLoad();
+
+			// Let's find out the ID of the first child block of the template part
+			// and remove the block.
+			let childBlockId;
+			await editor.runInCanvas( async () => {
+				const element = await this.driver.findElement( By.css( `#${ blockId } > .wp-block` ) );
+				childBlockId = await element.getAttribute( 'id' );
+			} );
+			await editor.removeBlock( childBlockId );
+
+			// Undo
+			await clearEventsStack( this.driver );
+			await driverHelper.clickWhenClickable( this.driver, By.css( 'button[aria-label="Undo"]' ) );
+			let eventsStack = await getEventsStack( this.driver );
+			let blockInsertedEventFired = eventsStack.some(
+				( [ eventName ] ) => eventName === 'wpcom_block_inserted'
+			);
+			assert.strictEqual(
+				blockInsertedEventFired,
+				false,
+				'"wpcom_block_inserted" editor tracking event fired when template part edits were undid , this should not happen'
+			);
+
+			// Redo
+			await clearEventsStack( this.driver );
+			await driverHelper.clickWhenClickable( this.driver, By.css( 'button[aria-label="Redo"]' ) );
+			eventsStack = await getEventsStack( this.driver );
+			blockInsertedEventFired = eventsStack.some(
+				( [ eventName ] ) => eventName === 'wpcom_block_inserted'
+			);
+			assert.strictEqual(
+				blockInsertedEventFired,
+				false,
+				'"wpcom_block_inserted" editor tracking event fired when template part edits were redid , this should not happen'
+			);
+		} );
+
+		afterEach( async function () {
+			await clearEventsStack( this.driver );
+		} );
 	} );
 } );