From 65dddcfc31ca28d347f70ea8126cddb4590bb0f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A1vid=20Szab=C3=B3?= Date: Mon, 21 Jun 2021 12:15:07 +0200 Subject: [PATCH] Add some Block Editor Tracking E2E tests (#53733) --- .../lib/components/site-editor-component.js | 29 ++++++ .../lib/gutenberg/tracking/general-tests.js | 43 +++++++++ test/e2e/lib/gutenberg/tracking/utils.js | 4 +- ...pso-gutenberg-page-editor-tracking-spec.js | 4 +- ...pso-gutenberg-post-editor-tracking-spec.js | 4 +- ...pso-gutenberg-site-editor-tracking-spec.js | 95 ++++++++++++++++++- 6 files changed, 172 insertions(+), 7 deletions(-) diff --git a/test/e2e/lib/components/site-editor-component.js b/test/e2e/lib/components/site-editor-component.js index 445302260473d..822dc28e8b5c0 100644 --- a/test/e2e/lib/components/site-editor-component.js +++ b/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' + ) + ); + } } diff --git a/test/e2e/lib/gutenberg/tracking/general-tests.js b/test/e2e/lib/gutenberg/tracking/general-tests.js index e7e9f49def352..d74c2e7e19933 100644 --- a/test/e2e/lib/gutenberg/tracking/general-tests.js +++ b/test/e2e/lib/gutenberg/tracking/general-tests.js @@ -2,6 +2,7 @@ * External dependencies */ import assert from 'assert'; +import { By } from 'selenium-webdriver'; /** * Internal dependencies @@ -9,6 +10,7 @@ import assert from 'assert'; 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 ); diff --git a/test/e2e/lib/gutenberg/tracking/utils.js b/test/e2e/lib/gutenberg/tracking/utils.js index 317e7fdae14b1..05a8af16101be 100644 --- a/test/e2e/lib/gutenberg/tracking/utils.js +++ b/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 ) { diff --git a/test/e2e/specs/specs-wpcom/wp-calypso-gutenberg-page-editor-tracking-spec.js b/test/e2e/specs/specs-wpcom/wp-calypso-gutenberg-page-editor-tracking-spec.js index 84b59b7401b85..16733780d88e8 100644 --- a/test/e2e/specs/specs-wpcom/wp-calypso-gutenberg-page-editor-tracking-spec.js +++ b/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 ); + } ); } ); } ); diff --git a/test/e2e/specs/specs-wpcom/wp-calypso-gutenberg-post-editor-tracking-spec.js b/test/e2e/specs/specs-wpcom/wp-calypso-gutenberg-post-editor-tracking-spec.js index 733af194e6a6c..4cc0a5c895fcd 100644 --- a/test/e2e/specs/specs-wpcom/wp-calypso-gutenberg-post-editor-tracking-spec.js +++ b/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 ); + } ); } ); } ); diff --git a/test/e2e/specs/specs-wpcom/wp-calypso-gutenberg-site-editor-tracking-spec.js b/test/e2e/specs/specs-wpcom/wp-calypso-gutenberg-site-editor-tracking-spec.js index 7f1f278a847ff..526cdf54547c9 100644 --- a/test/e2e/specs/specs-wpcom/wp-calypso-gutenberg-site-editor-tracking-spec.js +++ b/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 ); + } ); } ); } );