Merge pull request #6 from tschortsch/feat/wp58

feat(): WordPress 5.8 compatibility

.github/workflows/lint-test-deploy.yml

@@ -11,7 +11,7 @@ jobs:
     strategy:
       matrix:
         node: [ '12', '14', '16' ]
-        cypress: [ '5.6.0', '6.9.1', '7.4.0' ]
+        cypress: [ '5.6.0', '6.9.1', '7.7.0', '8.0.0' ]
 
     steps:
       - uses: actions/checkout@v2

.wp-env.json

@@ -1,3 +1,3 @@
 {
-  "core": "WordPress/WordPress#5.7"
+  "core": "WordPress/WordPress#5.8"
 }

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.3.0
+
+* [Feature] Introduce new `wpVersion` config option to set the WordPress version where the tests are being run. Possible values are `5.7` or `5.8` (Default `5.8`).
+* [Dependencies] Bump dependency versions
+
 ## 0.2.0
 
 * [Internal] Migrate codebase to TypeScript

README.md

@@ -36,14 +36,16 @@ There are several options to configure the commands. These options can be define
   "env": {
     "cypress-wp-test-utils": {
       "username": "myuser",
-      "password": "supersecurepassword"
+      "password": "supersecurepassword",
+      "wpVersion": 5.7
     }
   }
 }
 ```
 
-* `username`: Username which is used as the default username in the `loginUser` command.
-* `password`: Password which is used as the default password in the `loginUser` command.
+* `username` (`string`): Username which is used as the default username in the `loginUser` command. (Default: `admin`)
+* `password` (`string`): Password which is used as the default password in the `loginUser` command. (Default: `password`)
+* `wpVersion` (`5.7 | 5.8`): Version of your WordPress instance. (Default: `5.8`)
 
 ## List of available commands
 
@@ -258,11 +260,11 @@ Visits a given admin page.
 
 ## Compatibility
 
-* WordPress 5.7.x
+* WordPress 5.7, 5.8
 * Node >=12
 * Cypress >=5.x
 
-Right now those commands are only compatible with WordPress 5.7.
+Right now those commands are only compatible with WordPress 5.7 and 5.8.
 The goal is to support further WordPress versions but since there are always a lot of changes in the editor between WordPress versions it's difficult to support all of them.
 
 ## cypress-xpath included

cypress/integration/click-button.spec.js

@@ -9,8 +9,7 @@ context('clickButton Command', () => {
   it('should click on button by content', () => {
     cy.insertBlock('Heading');
     cy.selectBlockByName('core/heading');
-    cy.clickBlockToolbarButton('Options');
-    cy.clickButton('Copy', 'content');
+    cy.clickButton('Save draft', 'content');
     cy.getEditedPostContent().snapshot();
   });
 

cypress/integration/get-text-control-by-label.spec.js

@@ -9,6 +9,7 @@ context('getTextControlByLabel Command', () => {
   it('should return text control element by label', () => {
     cy.insertBlock('Buttons');
     cy.ensureSidebarOpened();
+    cy.openSidebarPanelWithTitle('Advanced');
     cy.getTextControlByLabel('Link rel').should('have.value', '');
   });
 });

cypress/integration/get-toggle-by-label.spec.js

@@ -7,10 +7,8 @@ context('getToggleByLabel Command', () => {
   });
 
   it('should return toggle element by label', () => {
-    cy.insertBlock('Buttons');
+    cy.insertBlock('Post Date');
     cy.ensureSidebarOpened();
-    cy.getToggleByLabel('Open in new tab')
-      .should('exist')
-      .and('not.be.checked');
+    cy.getToggleByLabel('Link to post').should('exist').and('not.be.checked');
   });
 });

cypress/integration/insert-block.spec.js

@@ -8,11 +8,26 @@ context('insertBlock Command', () => {
 
   it('should insert block', () => {
     cy.insertBlock('Paragraph');
-    cy.get('[data-type="core/paragraph"]').should('have.length', 1);
+    cy.get('.edit-post-visual-editor [data-type="core/paragraph"]').should(
+      'have.length',
+      1
+    );
   });
 
   it('should insert correct block when multiple blocks where found', () => {
     cy.insertBlock('Cloud', 'Tag Cloud');
-    cy.get('[data-type="core/tag-cloud"]').should('have.length', 1);
+    cy.get('.edit-post-visual-editor [data-type="core/tag-cloud"]').should(
+      'have.length',
+      1
+    );
+  });
+
+  it('should insert multiple blocks', () => {
+    cy.insertBlock('Heading');
+    cy.insertBlock('Heading');
+    cy.get('.edit-post-visual-editor [data-type="core/heading"]').should(
+      'have.length',
+      2
+    );
   });
 });

cypress/integration/login-user.spec.js

@@ -8,9 +8,11 @@ context('loginUser Command', () => {
   });
 
   it('should login user with different username and password', () => {
-    cy.loginUser('otheruser', 'otherpass');
+    const username = 'otheruser';
+    const password = 'otherpass';
+    cy.loginUser(username, password);
     cy.get('#login_error').contains(
-      'Unknown username. Check again or try your email address.'
+      `Error: The username ${username} is not registered on this site. If you are unsure of your username, try your email address instead.`
     );
   });
 });

cypress/integration/select-block-by-name.spec.js

@@ -12,13 +12,13 @@ context('selectBlockByName Command', () => {
 
     // Select first heading block
     cy.selectBlockByName('core/heading', 0);
-    cy.get('[data-type="core/heading"]')
+    cy.get('.edit-post-visual-editor [data-type="core/heading"]')
       .eq(0)
       .should('have.class', 'is-selected');
 
     // Select second heading block
     cy.selectBlockByName('core/heading', 1);
-    cy.get('[data-type="core/heading"]')
+    cy.get('.edit-post-visual-editor [data-type="core/heading"]')
       .eq(1)
       .should('have.class', 'is-selected');
   });

cypress/integration/set-text-control-value-by-label.spec.js

@@ -7,9 +7,10 @@ context('setTextControlValueByLabel Command', () => {
   });
 
   it('should set text control value by label', () => {
-    cy.insertBlock('Buttons');
+    cy.insertBlock('Paragraph');
     cy.ensureSidebarOpened();
-    cy.setTextControlValueByLabel('Link rel', 'my rel');
+    cy.openSidebarPanelWithTitle('Advanced');
+    cy.setTextControlValueByLabel('Additional CSS class(es)', 'my rel');
     cy.getEditedPostContent().snapshot();
   });
 });

dist/commands/open-global-block-inserter.js

@@ -1,8 +1,19 @@
+import config from '../shared/config';
+const GLOBAL_BLOCK_INSERTER_SELECTOR_57 = '.edit-post-header [aria-label="Add block"]';
+const GLOBAL_BLOCK_INSERTER_SELECTOR_58 = '.edit-post-header [aria-label="Toggle block inserter"]';
 /**
  * Opens the global block inserter.
  */
 export const openGlobalBlockInserter = () => {
-    cy.get('.edit-post-header [aria-label="Add block"]').click({
-        force: true,
+    const selector = config.wpVersion === 5.8
+        ? GLOBAL_BLOCK_INSERTER_SELECTOR_58
+        : GLOBAL_BLOCK_INSERTER_SELECTOR_57;
+    cy.window().then((window) => {
+        const isGlobalBlockInserterOpen = window.document.querySelector(selector);
+        if (!isGlobalBlockInserterOpen) {
+            cy.get(selector).click({
+                force: true,
+            });
+        }
     });
 };

dist/commands/search-for-block.js

@@ -5,5 +5,5 @@
  */
 export const searchForBlock = (searchTerm) => {
     cy.openGlobalBlockInserter();
-    cy.get('input.block-editor-inserter__search-input').type(searchTerm);
+    cy.get('input.block-editor-inserter__search-input').clear().type(searchTerm);
 };

dist/shared/config.js

@@ -1,6 +1,7 @@
 const DEFAULT_CONFIG = {
     username: 'admin',
     password: 'password',
+    wpVersion: 5.8,
 };
 export default {
     ...DEFAULT_CONFIG,