Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Migrate site editor multi-entity save flow tests #52372

Merged
merged 3 commits into from
Jul 6, 2023
Merged

Migrate site editor multi-entity save flow tests #52372

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
47ef546
Migrate site editor multi-entity save flow tests
Mamaduka Jul 6, 2023
7bfc196
Remove old tests
Mamaduka Jul 6, 2023
7c5755c
Add cleanup
Mamaduka Jul 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 0 additions & 102 deletions packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@ import {
activateTheme,
clickButton,
createReusableBlock,
visitSiteEditor,
enterEditMode,
deleteAllTemplates,
canvas,
} from '@wordpress/e2e-test-utils';
Expand Down Expand Up @@ -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"]' );
Comment on lines -272 to -278
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This step wasn't relevant to the tests, so I omitted it from migration.


// 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();
} );
} );
} );
87 changes: 87 additions & 0 deletions test/e2e/specs/site-editor/multi-entity-saving.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
/**
* WordPress dependencies
*/
const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );

test.describe( 'Site Editor - Multi-entity save flow', () => {
test.beforeAll( async ( { requestUtils } ) => {
await Promise.all( [
requestUtils.activateTheme( 'emptytheme' ),
requestUtils.deleteAllTemplates( 'wp_template' ),
] );
} );

test.afterAll( async ( { requestUtils } ) => {
await Promise.all( [
requestUtils.activateTheme( 'twentytwentyone' ),
requestUtils.deleteAllTemplates( 'wp_template' ),
] );
} );

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();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we delete template parts before/after the tests to avoid the changes to persist between tests?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A good idea. Added the template cleanup to the tests since we only change the templates now.

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();
} );
} );