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

E2E tests: try to fix flaky global styles revisions tests #50454

Merged
merged 1 commit into from
May 9, 2023
Merged

E2E tests: try to fix flaky global styles revisions tests #50454

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 0 additions & 1 deletion packages/edit-site/src/components/global-styles/screen-revisions/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,6 @@ function ScreenRevisions() {
<Button
variant="primary"
className="edit-site-global-styles-screen-revisions__button"
aria-label={ __( 'Load revision' ) }
disabled={
! globalStylesRevision?.id ||
globalStylesRevision?.id === 'unsaved'
Expand Down
2 changes: 1 addition & 1 deletion test/e2e/specs/site-editor/style-book.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ test.describe( 'Style Book', () => {
).toBeVisible();
} );

test( 'should disable toolbar butons when open', async ( { page } ) => {
test( 'should disable toolbar buttons when open', async ( { page } ) => {
Copy link
Member Author

Choose a reason for hiding this comment

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

I couldn't help myself

await expect(
page.locator( 'role=button[name="Toggle block inserter"i]' )
).not.toBeVisible();
Expand Down
125 changes: 66 additions & 59 deletions test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,104 +42,86 @@ test.describe( 'Global styles revisions', () => {
} ) => {
const currentRevisions =
await userGlobalStylesRevisions.getGlobalStylesRevisions();
await userGlobalStylesRevisions.openStylesPanel();

// Change a style and save it.
await page.getByRole( 'button', { name: 'Colors styles' } ).click();

// Navigates to Styles -> Typography -> Text and click on a size.
await page
.getByRole( 'region', { name: 'Editor top bar' } )
.getByRole( 'button', { name: 'Styles' } )
.getByRole( 'button', { name: 'Color Background styles' } )
.click();
await page
.getByRole( 'button', { name: 'Color: Black' } )
.click( { force: true } );

await editor.saveSiteEditorEntities();

/*
* There are not enough revisions to show the revisions UI yet, so let's create some.
* The condition exists until we have way (and the requirement) to delete global styles revisions.
* Change a style and save it again.
* We need more than 2 revisions to show the UI.
*/
if ( currentRevisions.length < 1 ) {
// Change a style and save it.
await page
.getByRole( 'button', { name: 'Typography styles' } )
.click();
await page
.getByRole( 'button', { name: 'Typography Text styles' } )
.click();
await page
.getByRole( 'radiogroup', { name: 'Font size' } )
.getByRole( 'radio', { name: 'Large', exact: true } )
.click();
await editor.saveSiteEditorEntities();

// Change a style and save it again just for good luck.
// We need more than 2 revisions to show the UI.
await page
.getByRole( 'radiogroup', { name: 'Font size' } )
.getByRole( 'radio', { name: 'Medium', exact: true } )
.click();

await editor.saveSiteEditorEntities();

// Now there should be enough revisions to show the revisions UI.
await page
.getByRole( 'button', { name: 'Styles actions' } )
.click();
await page.getByRole( 'menuitem', { name: 'Revisions' } ).click();

const revisionButtons = page.getByRole( 'button', {
name: /^Changes saved by /,
} );

await expect( revisionButtons ).toHaveCount(
currentRevisions.length + 2
);
}
await page
.getByRole( 'button', { name: 'Color Background styles' } )
.click();
await page
.getByRole( 'button', { name: 'Color: Cyan bluish gray' } )
.click( { force: true } );

await editor.saveSiteEditorEntities();

// Now there should be enough revisions to show the revisions UI.
await userGlobalStylesRevisions.openRevisions();

const updatedCurrentRevisions =
await userGlobalStylesRevisions.getGlobalStylesRevisions();
// There are some revisions. Let's check that the UI looks how we expect it to.
await page.getByRole( 'button', { name: 'Styles actions' } ).click();
await page.getByRole( 'menuitem', { name: 'Revisions' } ).click();
const revisionButtons = page.getByRole( 'button', {
name: /^Changes saved by /,
} );

await expect( revisionButtons ).toHaveCount(
updatedCurrentRevisions.length
currentRevisions.length + 2
);
} );

test( 'should warn of unsaved changes before loading reset revision', async ( {
page,
editor,
userGlobalStylesRevisions,
} ) => {
// Navigates to Styles -> Typography -> Text and click on a size.
await page
.getByRole( 'region', { name: 'Editor top bar' } )
.getByRole( 'button', { name: 'Styles' } )
.click();

await userGlobalStylesRevisions.openStylesPanel();
await page.getByRole( 'button', { name: 'Colors styles' } ).click();
await page
.getByRole( 'button', { name: 'Color Background styles' } )
.click();
await page.getByRole( 'button', { name: 'Color: Black' } ).click();
await page.getByRole( 'button', { name: 'Styles actions' } ).click();
await page.getByRole( 'menuitem', { name: 'Revisions' } ).click();
await page
.getByRole( 'button', { name: 'Color: Luminous vivid amber' } )
.click( { force: true } );

await userGlobalStylesRevisions.openRevisions();

const unSavedButton = page.getByRole( 'button', {
name: /^Unsaved changes/,
} );

await expect( unSavedButton ).toBeVisible();

// await expect( image ).toHaveCSS( 'height', '3px' );
await page
.getByRole( 'button', { name: /^Changes saved by / } )
.last()
.click();

await page.getByRole( 'button', { name: 'Load revision' } ).click();
await page.getByRole( 'button', { name: 'Apply' } ).click();

const confirm = page.getByRole( 'dialog' );
await expect( confirm ).toBeVisible();
await expect( confirm ).toHaveText(
/^Loading this revision will discard all unsaved changes/
);

// This is to make sure there are no lingering unsaved changes.
await page
.getByRole( 'dialog' )
.getByRole( 'button', { name: 'Cancel' } )
.click();
await editor.saveSiteEditorEntities();
} );
} );

Expand All @@ -148,6 +130,16 @@ class UserGlobalStylesRevisions {
this.page = page;
this.requestUtils = requestUtils;
}

async disableWelcomeGuide() {
// Turn off the welcome guide.
await this.page.evaluate( () => {
window.wp.data
.dispatch( 'core/preferences' )
.set( 'core/edit-site', 'welcomeGuideStyles', false );
} );
}

async getGlobalStylesRevisions() {
const stylesPostId =
await this.requestUtils.getCurrentThemeGlobalStylesPostId();
Expand All @@ -158,4 +150,19 @@ class UserGlobalStylesRevisions {
}
return [];
}

async openRevisions() {
await this.page
.getByRole( 'button', { name: 'Styles actions' } )
.click();
await this.page.getByRole( 'menuitem', { name: 'Revisions' } ).click();
}

async openStylesPanel() {
await this.disableWelcomeGuide();
await this.page
.getByRole( 'region', { name: 'Editor top bar' } )
.getByRole( 'button', { name: 'Styles' } )
.click();
}
}