Merge pull request #43 from 10up/fix/36

Fix openDocumentSettingsPanel and tests

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)
-    .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');
+    }
+  });
 };

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

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

src/functions/uc-first.ts

@@ -0,0 +1,2 @@
+export const ucFirst = (string: string) =>
+  string.toLowerCase().charAt(0).toUpperCase() + string.toLowerCase().slice(1);

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,14 @@ 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();
+    cy.closeWelcomeGuide();
 
     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 +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();
-    cy.get('button[aria-label="Close dialog"]').click();
+    cy.closeWelcomeGuide();
 
-    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 +68,9 @@ 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();
+    cy.closeWelcomeGuide();
 
-    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 +80,71 @@ 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();
+    cy.closeWelcomeGuide();
+
     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();
+    cy.closeWelcomeGuide();
 
-    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();
+    cy.closeWelcomeGuide();
 
-    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');
+    });
   });
 });