diff --git a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js index cf49b95962b89..fb489cf247fcf 100644 --- a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js +++ b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js @@ -73,7 +73,6 @@ describe( 'Multi-entity save flow', () => { const multiSaveSelector = '.editor-post-publish-button__button.has-changes-dot'; const savePostSelector = '.editor-post-publish-button__button'; - const disabledSavePostSelector = `${ savePostSelector }[aria-disabled=true]`; const enabledSavePostSelector = `${ savePostSelector }[aria-disabled=false]`; const publishA11ySelector = '.edit-post-layout__toggle-publish-panel-button'; @@ -93,129 +92,98 @@ describe( 'Multi-entity save flow', () => { expect( multiSaveButton ).toBeNull(); }; - describe( 'Pre-Publish state', () => { - it( 'Should not trigger multi-entity save button with only post edited', async () => { - await createNewPost(); - // Edit the page some. - await page.click( '.editor-post-title' ); - await page.keyboard.type( 'Test Post...' ); - await page.keyboard.press( 'Enter' ); - - await assertMultiSaveDisabled(); - } ); - - it( 'Should only have publish panel a11y button active with only post edited', async () => { - await assertExistance( publishA11ySelector, true ); - await assertExistance( saveA11ySelector, false ); - await assertExistance( publishPanelSelector, false ); - await assertExistance( savePanelSelector, false ); - } ); - - it( 'Should trigger multi-entity save button once template part edited', async () => { - // Create new template part. - await insertBlock( 'Template Part' ); - const [ createNewButton ] = await page.$x( - createNewButtonSelector - ); - await createNewButton.click(); - await page.waitForSelector( activatedTemplatePartSelector ); - await page.keyboard.press( 'Tab' ); - await page.keyboard.type( 'test-template-part' ); - - // Make some changes in new Template Part. - await page.click( '.block-editor-button-block-appender' ); - await page.click( '.editor-block-list-item-paragraph' ); - await page.keyboard.type( 'some words...' ); - - await assertMultiSaveEnabled(); - - // TODO: Remove when toolbar supports text fields - expect( console ).toHaveWarnedWith( - 'Using custom components as toolbar controls is deprecated. Please use ToolbarItem or ToolbarButton components instead. See: https://developer.wordpress.org/block-editor/components/toolbar-button/#inside-blockcontrols' - ); - } ); - - it( 'Should only have save panel a11y button active after child entities edited', async () => { - await assertExistance( publishA11ySelector, false ); - await assertExistance( saveA11ySelector, true ); - await assertExistance( publishPanelSelector, false ); - await assertExistance( savePanelSelector, false ); - } ); - - it( 'Clicking should open panel with boxes checked by default', async () => { - await page.click( savePostSelector ); - await page.waitForSelector( savePanelSelector ); - await assertAllBoxesChecked(); - } ); - - it( 'Should not show other panels (or their a11y buttons) while save panel opened', async () => { - await assertExistance( publishA11ySelector, false ); - await assertExistance( saveA11ySelector, false ); - await assertExistance( publishPanelSelector, false ); - } ); - - it( 'Publish panel should open after saving, no other panels (or their a11y buttons) should be present', async () => { - // Save entities and wait for publish panel. - await page.click( entitiesSaveSelector ); - await page.waitForSelector( publishPanelSelector ); - - await assertExistance( publishA11ySelector, false ); - await assertExistance( saveA11ySelector, false ); - await assertExistance( savePanelSelector, false ); - - // Close publish panel. - await page.click( closePanelButtonSelector ); - } ); - - it( 'Saving should result in items being saved', async () => { - // Verify post is saved. - const draftSaved = await page.waitForSelector( - draftSavedSelector - ); - expect( draftSaved ).not.toBeNull(); - - // Verify template part is saved. - await assertMultiSaveDisabled(); - } ); - } ); + it( 'Save flow should work as expected.', async () => { + expect.assertions( 27 ); + await createNewPost(); + // Edit the page some. + await page.click( '.editor-post-title' ); + await page.keyboard.type( 'Test Post...' ); + await page.keyboard.press( 'Enter' ); + + // Should not trigger multi-entity save button with only post edited + await assertMultiSaveDisabled(); + + // Should only have publish panel a11y button active with only post edited. + await assertExistance( publishA11ySelector, true ); + await assertExistance( saveA11ySelector, false ); + await assertExistance( publishPanelSelector, false ); + await assertExistance( savePanelSelector, false ); + + // Add a template part and edit it. + await insertBlock( 'Template Part' ); + const [ createNewButton ] = await page.$x( + createNewButtonSelector + ); + await createNewButton.click(); + await page.waitForSelector( activatedTemplatePartSelector ); + await page.keyboard.press( 'Tab' ); + await page.keyboard.type( 'test-template-part' ); + await page.click( '.block-editor-button-block-appender' ); + await page.click( '.editor-block-list-item-paragraph' ); + await page.keyboard.type( 'some words...' ); + + // Should trigger multi-entity save button once template part edited. + await assertMultiSaveEnabled(); + // TODO: Remove when toolbar supports text fields + expect( console ).toHaveWarnedWith( + 'Using custom components as toolbar controls is deprecated. Please use ToolbarItem or ToolbarButton components instead. See: https://developer.wordpress.org/block-editor/components/toolbar-button/#inside-blockcontrols' + ); + + // Should only have save panel a11y button active after child entities edited. + await assertExistance( publishA11ySelector, false ); + await assertExistance( saveA11ySelector, true ); + await assertExistance( publishPanelSelector, false ); + await assertExistance( savePanelSelector, false ); + + // Opening panel has boxes checked by default. + await page.click( savePostSelector ); + await page.waitForSelector( savePanelSelector ); + await assertAllBoxesChecked(); + + // Should not show other panels (or their a11y buttons) while save panel opened. + await assertExistance( publishA11ySelector, false ); + await assertExistance( saveA11ySelector, false ); + await assertExistance( publishPanelSelector, false ); + + // Publish panel should open after saving. + await page.click( entitiesSaveSelector ); + await page.waitForSelector( publishPanelSelector ); - describe( 'Published state', () => { - it( 'Update button disabled after publish', async () => { - await publishPost(); - const disabledSaveButton = await page.$( - disabledSavePostSelector - ); - expect( disabledSaveButton ).not.toBeNull(); - } ); - - it( 'should not have save a11y button when no changes', async () => { - await assertExistance( saveA11ySelector, false ); - } ); - - it( 'Update button enabled after editing post', async () => { - await page.click( '.editor-post-title' ); - await page.keyboard.type( '...more title!' ); - - // Verify update button is enabled. - const enabledSaveButton = await page.$( - enabledSavePostSelector - ); - expect( enabledSaveButton ).not.toBeNull(); - - // Verify is not for multi-entity saving. - await assertMultiSaveDisabled(); - } ); - - it( 'Multi-save button triggered after editing template part.', async () => { - await page.click( templatePartSelector ); - await page.keyboard.type( '...some more words...' ); - await page.keyboard.press( 'Enter' ); - await assertMultiSaveEnabled(); - } ); - - it( 'save a11y button enables after editing template part', async () => { - await assertExistance( saveA11ySelector, true ); - } ); + // No other panels (or their a11y buttons) should be present with publish panel open. + await assertExistance( publishA11ySelector, false ); + await assertExistance( saveA11ySelector, false ); + await assertExistance( savePanelSelector, false ); + + // Close publish panel. + await page.click( closePanelButtonSelector ); + + // Verify saving is disabled. + const draftSaved = await page.waitForSelector( draftSavedSelector ); + expect( draftSaved ).not.toBeNull(); + await assertMultiSaveDisabled(); + await assertExistance( saveA11ySelector, false ); + + await publishPost(); + + // Update the post. + await page.click( '.editor-post-title' ); + await page.keyboard.type( '...more title!' ); + + // Verify update button is enabled. + const enabledSaveButton = await page.$( enabledSavePostSelector ); + expect( enabledSaveButton ).not.toBeNull(); + // Verify multi-entity saving not enabled. + await assertMultiSaveDisabled(); + await assertExistance( saveA11ySelector, false ); + + // Update template part. + await page.click( templatePartSelector ); + await page.keyboard.type( '...some more words...' ); + await page.keyboard.press( 'Enter' ); + + // Multi-entity saving should be enabled. + await assertMultiSaveEnabled(); + await assertExistance( saveA11ySelector, true ); } ); } ); @@ -226,7 +194,8 @@ describe( 'Multi-entity save flow', () => { const disabledSaveSiteSelector = `${ saveSiteSelector }[aria-disabled=true]`; const saveA11ySelector = '.edit-site-editor__toggle-save-panel-button'; - it( 'Should be enabled after edits', async () => { + it( 'Save flow should work as expected', async () => { + expect.assertions( 5 ); // Navigate to site editor. const query = addQueryArgs( '', { page: 'gutenberg-edit-site', @@ -251,24 +220,21 @@ describe( 'Multi-entity save flow', () => { activeSaveSiteSelector ); + // Should be enabled after edits. expect( enabledButton ).not.toBeNull(); - } ); - it( 'save a11y button should be present', async () => { + // Save a11y button should be present. await assertExistance( saveA11ySelector, true ); - } ); - it( 'Clicking button should open panel with boxes checked', async () => { + // Clicking button should open panel with boxes checked. await page.click( activeSaveSiteSelector ); await page.waitForSelector( savePanelSelector ); await assertAllBoxesChecked(); - } ); - it( 'save a11y button should not be present with save panel open', async () => { + // Save a11y button should not be present with save panel open. await assertExistance( saveA11ySelector, false ); - } ); - it( 'Saving should result in items being saved', async () => { + // Saving should result in items being saved. await page.click( entitiesSaveSelector ); const disabledButton = await page.waitForSelector( disabledSaveSiteSelector