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

Update e2e tests to reflect that drafts are now part of post status #90288

Merged
merged 5 commits into from
May 6, 2024
Merged

Update e2e tests to reflect that drafts are now part of post status #90288

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c9f3630
Update tests as drafts are now part of post sttatus
olaseni May 3, 2024
43f81b9
Ensure that tests work with UI situation before 18.2.0
olaseni May 3, 2024
d24513f
Add missing `await`
olaseni May 4, 2024
d63c6a6
Merge branch 'trunk' into fix/update-e2e-where-drafts-are-now-part-of…
olaseni May 4, 2024
aa6f538
Merge branch 'trunk' into fix/update-e2e-where-drafts-are-now-part-of…
olaseni May 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
11 changes: 10 additions & 1 deletion packages/calypso-e2e/src/lib/components/editor-toolbar-component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ const selectors = {

// Preview
previewButton: `${ panel } :text("View"):visible, [aria-label="View"]:visible`,

// Post status
postStatusButton: `button.editor-post-status-trigger`,

desktopPreviewMenuItem: ( target: EditorPreviewOptions ) =>
`button[role="menuitem"] span:text("${ target }")`,
previewPane: `.edit-post-visual-editor`,
Expand Down Expand Up @@ -265,7 +269,7 @@ export class EditorToolbarComponent {
*
* This is applicable for the following scenarios:
* - publish of a new article (Publish)
* - update an existing article (Update)
* - update/save an existing article (Update)
* - schedule a post (Schedule)
*/
async clickPublish(): Promise< void > {
Expand All @@ -282,6 +286,11 @@ export class EditorToolbarComponent {
const editorParent = await this.editor.parent();

await Promise.race( [
( async () => {
// Works with Gutenberg >=v18.2.0
await editorParent.locator( selectors.postStatusButton ).click();
await editorParent.getByRole( 'radio', { name: 'Draft' } ).click();
} )(),
( async () => {
// Works with Gutenberg >=v15.8.0
await this.openSettings( 'Settings' );
Expand Down
11 changes: 7 additions & 4 deletions packages/calypso-e2e/src/lib/pages/editor-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -706,10 +706,10 @@ export class EditorPage {
actionsArray.push( this.editorToolbarComponent.clickPublish() );

// Determine whether the post/page is yet to be published or the post/page
// is merely being updated.
// is merely being saved/updated.
// If not yet published, a second click on the EditorPublishPanelComponent
// is added to the array of actions.
if ( publishButtonText.toLowerCase() !== 'update' ) {
if ( ! [ 'save', 'update' ].includes( publishButtonText.toLowerCase() ) ) {
actionsArray.push( this.editorPublishPanelComponent.publish() );
}

Expand Down Expand Up @@ -769,10 +769,13 @@ export class EditorPage {
*/
async unpublish(): Promise< void > {
const editorParent = await this.editor.parent();

await this.editorToolbarComponent.switchToDraft();
// @TODO: eventually refactor this out to a ConfirmationDialogComponent.
await editorParent.getByRole( 'button' ).getByText( 'OK' ).click();
// Saves the draft
await Promise.race( [
this.editorToolbarComponent.clickPublish(),
editorParent.getByRole( 'button' ).getByText( 'OK' ).click(),
Comment on lines +776 to +777
Copy link
Contributor

Choose a reason for hiding this comment

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

Why do we need both these calls? They seem to accomplish the same thing 🤔

The test also seems to complete successfully (on Simple and on Atomic) with only one of these lines.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Actually the edge versions on simple and AT are the same and you won't notice a difference there. There are both running 18.2.0.

For versions before i.e. 18.1.2, which is what ordinary sites ( non-edge sites ) are using.

You can test this with:

yarn jest specs/editor/editor__post-advanced-flow.ts

... without the GUTENBERG_EDGE=1 or TEST_ON_ATOMIC=true. Apologies for not leaving this in the description.

The UI for that version is different. That OK button is only present there.

Screenshot 2024-05-06 at 10 48 09

Without using Promise.race() with those two lines, you'll get this error:


  ● Editor: Advanced Post Flow › Revert post to draft › Switch to draft

    locator.click: Timeout 10000ms exceeded.
    =========================== logs ===========================
    waiting for frameLocator('iframe[src*="calypsoify"]').locator('body.block-editor-page').locator('.interface-navigable-region[class*="header"] button.editor-post-publish-button__button[aria-disabled="false"]')
    ============================================================

      276 | 		const editorParent = await this.editor.parent();
      277 | 		const publishButtonLocator = editorParent.locator( selectors.publishButton( 'enabled' ) );
    > 278 | 		await publishButtonLocator.click();
          | 		                           ^
      279 | 	}
      280 |
      281 | 	/**

      at EditorToolbarComponent.click [as clickPublish] (../../packages/calypso-e2e/src/lib/components/editor-toolbar-component.ts:278:30)
      at EditorPage.unpublish (../../packages/calypso-e2e/src/lib/pages/editor-page.ts:775:3)
      at Object.<anonymous> (specs/editor/editor__post-advanced-flow.ts:155:4)

Copy link
Contributor

Choose a reason for hiding this comment

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

Gotcha! I think I simply forgot to build after making my changes to the tests, or they wouldn't have passed 🤦‍♂️

] );
// @TODO: eventually refactor this out to a EditorToastNotificationComponent.
await editorParent.getByRole( 'button', { name: 'Dismiss this notice' } ).waitFor();
}
Expand Down