Skip to content

Commit

Permalink
Removing label from Apply button given that the text suffices (#50454)
Browse files Browse the repository at this point in the history 
Ensuring we save any unsaved changes after then unsaved changes tests to avoid lingering unsaved changes.
Updated a typo in a non-related e2e file
  • Loading branch information
@ramonjd
ramonjd authored May 9, 2023
1 parent de94c50 commit b1c1ac7
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 61 deletions.
1 change: 0 additions & 1 deletion packages/edit-site/src/components/global-styles/screen-revisions/index.js
View file
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
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 } ) => {
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
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();
}
}

1 comment on commit b1c1ac7

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in b1c1ac7.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4922543963
📝 Reported issues:

Please sign in to comment.