From 47ef5462be2ca9759d38c57fb03b6a21f9674167 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 6 Jul 2023 13:42:00 +0400 Subject: [PATCH 1/3] Migrate site editor multi-entity save flow tests --- .../site-editor/multi-entity-saving.spec.js | 81 +++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 test/e2e/specs/site-editor/multi-entity-saving.spec.js diff --git a/test/e2e/specs/site-editor/multi-entity-saving.spec.js b/test/e2e/specs/site-editor/multi-entity-saving.spec.js new file mode 100644 index 00000000000000..2455910d940f18 --- /dev/null +++ b/test/e2e/specs/site-editor/multi-entity-saving.spec.js @@ -0,0 +1,81 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'Site Editor - Multi-entity save flow', () => { + test.beforeAll( async ( { requestUtils } ) => { + await requestUtils.activateTheme( 'emptytheme' ); + } ); + + test.afterAll( async ( { requestUtils } ) => { + await requestUtils.activateTheme( 'twentytwentyone' ); + } ); + + test.beforeEach( async ( { admin, editor } ) => { + await admin.visitSiteEditor( { + postId: 'emptytheme//index', + postType: 'wp_template', + } ); + await editor.canvas.click( 'body' ); + } ); + + test( 'save flow should work as expected', async ( { editor, page } ) => { + await editor.insertBlock( { + name: 'core/paragraph', + attributes: { + content: 'Testing', + }, + } ); + + await expect( + page + .getByRole( 'region', { name: 'Editor top bar' } ) + .getByRole( 'button', { name: 'Save' } ) + ).toBeEnabled(); + await expect( + page + .getByRole( 'region', { name: 'Save panel' } ) + .getByRole( 'button', { name: 'Open save panel' } ) + ).toBeVisible(); + + await editor.saveSiteEditorEntities(); + await expect( + page + .getByRole( 'region', { name: 'Editor top bar' } ) + .getByRole( 'button', { name: 'Saved' } ) + ).toBeDisabled(); + } ); + + test( 'save flow should allow re-saving after changing the same block attribute', async ( { + editor, + page, + } ) => { + await editor.openDocumentSettingsSidebar(); + await editor.insertBlock( { + name: 'core/paragraph', + attributes: { + content: 'Testing', + }, + } ); + + const fontSizePicker = page + .getByRole( 'region', { name: 'Editor Settings' } ) + .getByRole( 'group', { name: 'Font size' } ); + + // Change font size. + await fontSizePicker.getByRole( 'radio', { name: 'Small' } ).click(); + + await editor.saveSiteEditorEntities(); + + // Change font size again. + await fontSizePicker.getByRole( 'radio', { name: 'Medium' } ).click(); + + // The save button has been re-enabled. + await expect( + page + .getByRole( 'region', { name: 'Editor top bar' } ) + .getByRole( 'button', { name: 'Save' } ) + ).toBeEnabled(); + } ); +} ); From 7bfc196db2cbc8271c52cdff92fa7de3d990d773 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 6 Jul 2023 15:43:06 +0400 Subject: [PATCH 2/3] Remove old tests --- .../site-editor/multi-entity-saving.test.js | 102 ------------------ 1 file changed, 102 deletions(-) diff --git a/packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js b/packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js index d54f9c78dd8b89..c2bd3cb6d75076 100644 --- a/packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js +++ b/packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js @@ -12,8 +12,6 @@ import { activateTheme, clickButton, createReusableBlock, - visitSiteEditor, - enterEditMode, deleteAllTemplates, canvas, } from '@wordpress/e2e-test-utils'; @@ -239,104 +237,4 @@ describe( 'Multi-entity save flow', () => { expect( checkboxInputs ).toHaveLength( 1 ); } ); } ); - - describe( 'Site Editor', () => { - // Selectors - Site editor specific. - const saveSiteSelector = '.edit-site-save-button__button'; - const activeSaveSiteSelector = `${ saveSiteSelector }[aria-disabled=false]`; - const disabledSaveSiteSelector = `${ saveSiteSelector }[aria-disabled=true]`; - const saveA11ySelector = '.edit-site-editor__toggle-save-panel-button'; - - const saveAllChanges = async () => { - // Clicking button should open panel with boxes checked. - await page.click( activeSaveSiteSelector ); - await page.waitForSelector( savePanelSelector ); - await assertAllBoxesChecked(); - - // Save a11y button should not be present with save panel open. - await assertExistence( saveA11ySelector, false ); - - // Saving should result in items being saved. - await page.click( entitiesSaveSelector ); - }; - - it( 'Save flow should work as expected', async () => { - // Navigate to site editor. - await visitSiteEditor( { - postId: 'emptytheme//index', - postType: 'wp_template', - } ); - - await enterEditMode(); - - // Select the header template part via list view. - await page.click( '.edit-site-header-edit-mode__list-view-toggle' ); - const headerTemplatePartListViewButton = await page.waitForXPath( - '//a[contains(@class, "block-editor-list-view-block-select-button")][contains(., "header")]' - ); - headerTemplatePartListViewButton.click(); - await page.click( 'button[aria-label="Close"]' ); - - // Insert something to dirty the editor. - await insertBlock( 'Paragraph' ); - - const enabledButton = await page.waitForSelector( - activeSaveSiteSelector - ); - - // Should be enabled after edits. - expect( enabledButton ).not.toBeNull(); - - // Save a11y button should be present. - await assertExistence( saveA11ySelector, true ); - - // Save all changes. - await saveAllChanges(); - - const disabledButton = await page.waitForSelector( - disabledSaveSiteSelector - ); - expect( disabledButton ).not.toBeNull(); - } ); - - it( 'Save flow should allow re-saving after changing the same block attribute', async () => { - // Navigate to site editor. - await visitSiteEditor( { - postId: 'emptytheme//index', - postType: 'wp_template', - } ); - - await enterEditMode(); - - // Insert a paragraph at the bottom. - await insertBlock( 'Paragraph' ); - - // Open the block settings. - await page.click( 'button[aria-label="Settings"]' ); - - // Wait for the font size picker controls. - await page.waitForSelector( - '.components-font-size-picker__controls' - ); - - // Change the font size. - await page.click( - '.components-font-size-picker__controls button[aria-label="Small"]' - ); - - // Save all changes. - await saveAllChanges(); - - // Change the font size. - await page.click( - '.components-font-size-picker__controls button[aria-label="Medium"]' - ); - - // Assert that the save button has been re-enabled. - const saveButton = await page.waitForSelector( - activeSaveSiteSelector - ); - expect( saveButton ).not.toBeNull(); - } ); - } ); } ); From 7c5755c8796ecd279426ad0d491d41cf3cf10341 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 6 Jul 2023 18:50:16 +0400 Subject: [PATCH 3/3] Add cleanup --- test/e2e/specs/site-editor/multi-entity-saving.spec.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/test/e2e/specs/site-editor/multi-entity-saving.spec.js b/test/e2e/specs/site-editor/multi-entity-saving.spec.js index 2455910d940f18..b4d2f1dbda0d03 100644 --- a/test/e2e/specs/site-editor/multi-entity-saving.spec.js +++ b/test/e2e/specs/site-editor/multi-entity-saving.spec.js @@ -5,11 +5,17 @@ const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); test.describe( 'Site Editor - Multi-entity save flow', () => { test.beforeAll( async ( { requestUtils } ) => { - await requestUtils.activateTheme( 'emptytheme' ); + await Promise.all( [ + requestUtils.activateTheme( 'emptytheme' ), + requestUtils.deleteAllTemplates( 'wp_template' ), + ] ); } ); test.afterAll( async ( { requestUtils } ) => { - await requestUtils.activateTheme( 'twentytwentyone' ); + await Promise.all( [ + requestUtils.activateTheme( 'twentytwentyone' ), + requestUtils.deleteAllTemplates( 'wp_template' ), + ] ); } ); test.beforeEach( async ( { admin, editor } ) => {