Skip to content

Commit

Permalink
Consolidate sequential multi-entity-saving tests. (#26373)
Browse files Browse the repository at this point in the history 
* consolidate sequential tests

* add expect.assertions
  • Loading branch information
@Addison-Stavlo
Addison-Stavlo authored Oct 22, 2020
1 parent cb3bcf2 commit 99d02c5
Showing 1 changed file with 98 additions and 132 deletions.
230 changes: 98 additions & 132 deletions packages/e2e-tests/specs/experiments/multi-entity-saving.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 );
} );
} );

Expand All @@ -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',
Expand All @@ -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
Expand Down

0 comments on commit 99d02c5

Please sign in to comment.