From 21e747c99ea081b88fbebfd48a48476f328bfb2f Mon Sep 17 00:00:00 2001 From: Max Lyuchin Date: Wed, 30 Mar 2022 17:58:31 +0300 Subject: [PATCH 1/5] Case insensitive search for the panel by name --- src/commands/open-document-settings-panel.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/commands/open-document-settings-panel.ts b/src/commands/open-document-settings-panel.ts index d3ce90d..e79fa51 100644 --- a/src/commands/open-document-settings-panel.ts +++ b/src/commands/open-document-settings-panel.ts @@ -21,7 +21,7 @@ export const openDocumentSettingsPanel = (name: string, tab = 'Post'): void => { cy.openDocumentSettingsSidebar(tab); cy.get('.components-panel__body .components-panel__body-title button') - .contains(name) + .contains(name, { matchCase: false }) .then($button => { // Find the panel container const $panel = $button.parents('.components-panel__body'); From d3a3c33702eb97497f8702a2a8c5ff73f7b8ae31 Mon Sep 17 00:00:00 2001 From: Max Lyuchin Date: Wed, 30 Mar 2022 17:59:18 +0300 Subject: [PATCH 2/5] Consitionally use 'Document' as tab name to support old WordPress --- src/commands/open-document-settings-sidebar.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/commands/open-document-settings-sidebar.ts b/src/commands/open-document-settings-sidebar.ts index 0b3252a..9471191 100644 --- a/src/commands/open-document-settings-sidebar.ts +++ b/src/commands/open-document-settings-sidebar.ts @@ -26,5 +26,12 @@ export const openDocumentSettingsSidebar = (tab = 'Post'): void => { }); // Click the tab - cy.get('.edit-post-sidebar__panel-tab').contains(tab).click(); + cy.get('body').then($body => { + let tabSelector = `.edit-post-sidebar__panel-tab[data-label="${tab}"]`; + if ($body.find(tabSelector).length === 0) { + // Tab name for WordPress 5.2 is "Document" regardless of the post type + tabSelector = '.edit-post-sidebar__panel-tab[data-label="Document"]'; + } + cy.get(tabSelector).click(); + }); }; From c36ce2abcb427dee9b8db4d1cee80d901e922063 Mon Sep 17 00:00:00 2001 From: Max Lyuchin Date: Wed, 30 Mar 2022 17:59:41 +0300 Subject: [PATCH 3/5] Tests update for WordPress minimum --- .../open-document-settings.test.js | 125 +++++++++++++----- 1 file changed, 92 insertions(+), 33 deletions(-) diff --git a/tests/cypress/integration/open-document-settings.test.js b/tests/cypress/integration/open-document-settings.test.js index a0111fd..b998c66 100644 --- a/tests/cypress/integration/open-document-settings.test.js +++ b/tests/cypress/integration/open-document-settings.test.js @@ -13,6 +13,17 @@ describe('Commands: openDocumentSettings*', () => { cy.get('#submit').click(); } }); + + // Ignore WP 5.2 Synchronous XHR error. + Cypress.on('uncaught:exception', (err, runnable) => { + if ( + err.message.includes( + "Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'http://localhost:8889/wp-admin/admin-ajax.php': Synchronous XHR in page dismissal" + ) + ) { + return false; + } + }); }); beforeEach(() => { @@ -21,14 +32,20 @@ describe('Commands: openDocumentSettings*', () => { it("Should be able to open (don't close) Status Panel on a new post", () => { cy.visit(`/wp-admin/post-new.php`); - cy.get('button[aria-label="Close dialog"]').click(); + const welcomeGuideCloseButton = + 'button[aria-label="Close dialog"], button[aria-label="Disable tips"]'; + cy.get('body').then($body => { + if ($body.find(welcomeGuideCloseButton).length > 0) { + cy.get(welcomeGuideCloseButton).click(); + } + }); const name = 'Status & visibility'; cy.openDocumentSettingsPanel(name); // Assertion: Stick to the top checkbox should be visible cy.get('.components-panel__body .components-panel__body-title button') - .contains(name) + .contains(name, { matchCase: false }) .then($button => { const $panel = $button.parents('.components-panel__body'); cy.wrap($panel).should('contain', 'Stick to the top of the blog'); @@ -38,11 +55,15 @@ describe('Commands: openDocumentSettings*', () => { it('Should be able to open Tags panel on the existing post', () => { cy.visit(`/wp-admin/edit.php?post_type=post`); cy.get('#the-list .row-title').first().click(); - cy.get('button[aria-label="Close dialog"]').click(); + const welcomeGuideCloseButton = + 'button[aria-label="Close dialog"], button[aria-label="Disable tips"]'; + cy.get('body').then($body => { + if ($body.find(welcomeGuideCloseButton).length > 0) { + cy.get(welcomeGuideCloseButton).click(); + } + }); - cy.get('.is-root-container.block-editor-block-list__layout > *') - .first() - .click(); + cy.get('.block-editor-block-list__layout > .wp-block').first().click(); const name = 'Tags'; cy.openDocumentSettingsPanel(name); @@ -59,11 +80,15 @@ describe('Commands: openDocumentSettings*', () => { it('Should be able to open Discussion panel on the existing page', () => { cy.visit(`/wp-admin/edit.php?post_type=page`); cy.get('#the-list .row-title').first().click(); - cy.get('button[aria-label="Close dialog"]').click(); + const welcomeGuideCloseButton = + 'button[aria-label="Close dialog"], button[aria-label="Disable tips"]'; + cy.get('body').then($body => { + if ($body.find(welcomeGuideCloseButton).length > 0) { + cy.get(welcomeGuideCloseButton).click(); + } + }); - cy.get('.is-root-container.block-editor-block-list__layout > *') - .first() - .click(); + cy.get('.block-editor-block-list__layout > .wp-block').first().click(); const name = 'Discussion'; cy.openDocumentSettingsPanel(name, 'Page'); @@ -73,55 +98,89 @@ describe('Commands: openDocumentSettings*', () => { .contains(name) .then($button => { const $panel = $button.parents('.components-panel__body'); - cy.wrap($panel).should('contain', 'Allow comments'); + cy.wrap($panel) + .contains('Allow comments', { matchCase: false }) + .should('exist'); }); }); + it('Should be able to Open Post Settings Sidebar on a new Post', () => { cy.visit(`/wp-admin/post-new.php`); - cy.get('button[aria-label="Close dialog"]').click(); + const welcomeGuideCloseButton = + 'button[aria-label="Close dialog"], button[aria-label="Disable tips"]'; + cy.get('body').then($body => { + if ($body.find(welcomeGuideCloseButton).length > 0) { + cy.get(welcomeGuideCloseButton).click(); + } + }); + cy.openDocumentSettingsSidebar(); - // Assertions: - cy.get('.edit-post-sidebar__panel-tab') - .contains('Post') - .should('have.class', 'is-active'); - cy.get('.components-panel .components-panel__body').should('be.visible'); + cy.get('body').then($body => { + let postTabSelector = '.edit-post-sidebar__panel-tab[data-label="Post"]'; + if ( + $body.find('.edit-post-sidebar__panel-tab[data-label="Post"]') + .length === 0 + ) { + // Post tab name for WordPress 5.2 + postTabSelector = + '.edit-post-sidebar__panel-tab[data-label="Document"]'; + } + cy.get(postTabSelector).should('have.class', 'is-active'); + cy.get('.components-panel .components-panel__body').should('be.visible'); + }); }); it('Should be able to Open Block tab of the first block on existing post', () => { cy.visit(`/wp-admin/edit.php?post_type=post`); cy.get('#the-list .row-title').first().click(); - cy.get('button[aria-label="Close dialog"]').click(); + const welcomeGuideCloseButton = + 'button[aria-label="Close dialog"], button[aria-label="Disable tips"]'; + cy.get('body').then($body => { + if ($body.find(welcomeGuideCloseButton).length > 0) { + cy.get(welcomeGuideCloseButton).click(); + } + }); - cy.get('.is-root-container.block-editor-block-list__layout > *') - .first() - .click(); + cy.get('.block-editor-block-list__layout > .wp-block').first().click(); cy.openDocumentSettingsSidebar('Block'); // Assertions: cy.get('.edit-post-sidebar__panel-tab') .contains('Block') .should('have.class', 'is-active'); - cy.get('.components-panel .block-editor-block-inspector').should( - 'be.visible' - ); + cy.get( + '.components-panel .block-editor-block-inspector, .components-panel .edit-post-settings-sidebar__panel-block' + ).should('be.visible'); }); it('Should be able to open Page Settings sidebar on an existing page', () => { cy.visit(`/wp-admin/edit.php?post_type=page`); cy.get('#the-list .row-title').first().click(); - cy.get('button[aria-label="Close dialog"]').click(); + const welcomeGuideCloseButton = + 'button[aria-label="Close dialog"], button[aria-label="Disable tips"]'; + cy.get('body').then($body => { + if ($body.find(welcomeGuideCloseButton).length > 0) { + cy.get(welcomeGuideCloseButton).click(); + } + }); - cy.get('.is-root-container.block-editor-block-list__layout > *') - .first() - .click(); + cy.get('.block-editor-block-list__layout > .wp-block').first().click(); cy.openDocumentSettingsSidebar('Page'); - // Assertions: - cy.get('.edit-post-sidebar__panel-tab') - .contains('Page') - .should('have.class', 'is-active'); - cy.get('.components-panel .components-panel__body').should('be.visible'); + cy.get('body').then($body => { + let postTabSelector = '.edit-post-sidebar__panel-tab[data-label="Page"]'; + if ( + $body.find('.edit-post-sidebar__panel-tab[data-label="Page"]') + .length === 0 + ) { + // Post tab name for WordPress 5.2 + postTabSelector = + '.edit-post-sidebar__panel-tab[data-label="Document"]'; + } + cy.get(postTabSelector).should('have.class', 'is-active'); + cy.get('.components-panel .components-panel__body').should('be.visible'); + }); }); }); From 2133a856d6c4d917703aa7d91945667f09fecca1 Mon Sep 17 00:00:00 2001 From: Max Lyuchin Date: Thu, 31 Mar 2022 13:47:34 +0300 Subject: [PATCH 4/5] Fix case sensitive issues between WordPress 5.3 and current --- src/commands/open-document-settings-panel.ts | 35 ++++++++++++-------- src/functions/capitalize.ts | 4 +++ src/functions/uc-first.ts | 2 ++ 3 files changed, 28 insertions(+), 13 deletions(-) create mode 100644 src/functions/capitalize.ts create mode 100644 src/functions/uc-first.ts diff --git a/src/commands/open-document-settings-panel.ts b/src/commands/open-document-settings-panel.ts index e79fa51..81356b8 100644 --- a/src/commands/open-document-settings-panel.ts +++ b/src/commands/open-document-settings-panel.ts @@ -1,3 +1,6 @@ +import { capitalize } from '../functions/capitalize'; +import { ucFirst } from '../functions/uc-first'; + /** * Open Document Settings Panel * @@ -20,18 +23,24 @@ export const openDocumentSettingsPanel = (name: string, tab = 'Post'): void => { // Open Settings tab cy.openDocumentSettingsSidebar(tab); - cy.get('.components-panel__body .components-panel__body-title button') - .contains(name, { matchCase: false }) - .then($button => { - // Find the panel container - const $panel = $button.parents('.components-panel__body'); + // WordPress prior to 5.4 is using upper-case-words for panel names + // WordPress 5.3 and below: "Status & Visibility" + // WordPress 5.4 and after: "Status & visibility" + const ucFirstName = ucFirst(name); + const ucWordsName = capitalize(name); + + const panelButtonSelector = `.components-panel__body .components-panel__body-title button:contains("${ucWordsName}"),.components-panel__body .components-panel__body-title button:contains("${ucFirstName}")`; + + cy.get(panelButtonSelector).then($button => { + // Find the panel container + const $panel = $button.parents('.components-panel__body'); - // Only click the button if the panel is collapsed - if (!$panel.hasClass('is-opened')) { - cy.wrap($button).click(); - cy.wrap($button) - .parents('.components-panel__body') - .should('have.class', 'is-opened'); - } - }); + // Only click the button if the panel is collapsed + if (!$panel.hasClass('is-opened')) { + cy.wrap($button) + .click() + .parents('.components-panel__body') + .should('have.class', 'is-opened'); + } + }); }; diff --git a/src/functions/capitalize.ts b/src/functions/capitalize.ts new file mode 100644 index 0000000..703fe5e --- /dev/null +++ b/src/functions/capitalize.ts @@ -0,0 +1,4 @@ +export const capitalize = (str: string, lower = true) => + (lower ? str.toLowerCase() : str).replace(/(?:^|\s|["'([{])+\S/g, match => + match.toUpperCase() + ); diff --git a/src/functions/uc-first.ts b/src/functions/uc-first.ts new file mode 100644 index 0000000..d4c717b --- /dev/null +++ b/src/functions/uc-first.ts @@ -0,0 +1,2 @@ +export const ucFirst = (string: string) => + string.toLowerCase().charAt(0).toUpperCase() + string.toLowerCase().slice(1); From 80e412517397bf4cb08fdd19bb58d909ee5b3731 Mon Sep 17 00:00:00 2001 From: Max Lyuchin Date: Thu, 31 Mar 2022 13:48:03 +0300 Subject: [PATCH 5/5] Fixed tests for Document Settings panels --- .../open-document-settings.test.js | 50 +++---------------- 1 file changed, 7 insertions(+), 43 deletions(-) diff --git a/tests/cypress/integration/open-document-settings.test.js b/tests/cypress/integration/open-document-settings.test.js index b998c66..e3f9220 100644 --- a/tests/cypress/integration/open-document-settings.test.js +++ b/tests/cypress/integration/open-document-settings.test.js @@ -32,13 +32,7 @@ describe('Commands: openDocumentSettings*', () => { it("Should be able to open (don't close) Status Panel on a new post", () => { cy.visit(`/wp-admin/post-new.php`); - const welcomeGuideCloseButton = - 'button[aria-label="Close dialog"], button[aria-label="Disable tips"]'; - cy.get('body').then($body => { - if ($body.find(welcomeGuideCloseButton).length > 0) { - cy.get(welcomeGuideCloseButton).click(); - } - }); + cy.closeWelcomeGuide(); const name = 'Status & visibility'; cy.openDocumentSettingsPanel(name); @@ -55,15 +49,9 @@ describe('Commands: openDocumentSettings*', () => { it('Should be able to open Tags panel on the existing post', () => { cy.visit(`/wp-admin/edit.php?post_type=post`); cy.get('#the-list .row-title').first().click(); - const welcomeGuideCloseButton = - 'button[aria-label="Close dialog"], button[aria-label="Disable tips"]'; - cy.get('body').then($body => { - if ($body.find(welcomeGuideCloseButton).length > 0) { - cy.get(welcomeGuideCloseButton).click(); - } - }); + cy.closeWelcomeGuide(); - cy.get('.block-editor-block-list__layout > .wp-block').first().click(); + // cy.get('.block-editor-block-list__layout > .wp-block').first().click(); const name = 'Tags'; cy.openDocumentSettingsPanel(name); @@ -80,13 +68,7 @@ describe('Commands: openDocumentSettings*', () => { it('Should be able to open Discussion panel on the existing page', () => { cy.visit(`/wp-admin/edit.php?post_type=page`); cy.get('#the-list .row-title').first().click(); - const welcomeGuideCloseButton = - 'button[aria-label="Close dialog"], button[aria-label="Disable tips"]'; - cy.get('body').then($body => { - if ($body.find(welcomeGuideCloseButton).length > 0) { - cy.get(welcomeGuideCloseButton).click(); - } - }); + cy.closeWelcomeGuide(); cy.get('.block-editor-block-list__layout > .wp-block').first().click(); @@ -106,13 +88,7 @@ describe('Commands: openDocumentSettings*', () => { it('Should be able to Open Post Settings Sidebar on a new Post', () => { cy.visit(`/wp-admin/post-new.php`); - const welcomeGuideCloseButton = - 'button[aria-label="Close dialog"], button[aria-label="Disable tips"]'; - cy.get('body').then($body => { - if ($body.find(welcomeGuideCloseButton).length > 0) { - cy.get(welcomeGuideCloseButton).click(); - } - }); + cy.closeWelcomeGuide(); cy.openDocumentSettingsSidebar(); @@ -134,13 +110,7 @@ describe('Commands: openDocumentSettings*', () => { it('Should be able to Open Block tab of the first block on existing post', () => { cy.visit(`/wp-admin/edit.php?post_type=post`); cy.get('#the-list .row-title').first().click(); - const welcomeGuideCloseButton = - 'button[aria-label="Close dialog"], button[aria-label="Disable tips"]'; - cy.get('body').then($body => { - if ($body.find(welcomeGuideCloseButton).length > 0) { - cy.get(welcomeGuideCloseButton).click(); - } - }); + cy.closeWelcomeGuide(); cy.get('.block-editor-block-list__layout > .wp-block').first().click(); cy.openDocumentSettingsSidebar('Block'); @@ -157,13 +127,7 @@ describe('Commands: openDocumentSettings*', () => { it('Should be able to open Page Settings sidebar on an existing page', () => { cy.visit(`/wp-admin/edit.php?post_type=page`); cy.get('#the-list .row-title').first().click(); - const welcomeGuideCloseButton = - 'button[aria-label="Close dialog"], button[aria-label="Disable tips"]'; - cy.get('body').then($body => { - if ($body.find(welcomeGuideCloseButton).length > 0) { - cy.get(welcomeGuideCloseButton).click(); - } - }); + cy.closeWelcomeGuide(); cy.get('.block-editor-block-list__layout > .wp-block').first().click();