Migrate to Cypress 10 (#74)

* Upgrade NPM packages.

* Upgrade config file.

* Renamed test folder

* Removed plugins

* upgrade support file

* Update npm scripts.

* Test folder path update.

* downgrade typedoc package to keep doc site as it is.

* Stop video to check if it can make e2e tests fast.

* Fix test failing in 6.1

* Add dependencies back

* Fix tests.

Co-authored-by: Max Lyuchin <maxim.lyuchin@gmail.com>

.github/workflows/cypress.yml

@@ -65,8 +65,8 @@ jobs:
       fail-fast: false
       matrix:
         core:
-          - { name: 'WP latest', version: 'latest', number: '6.0' }
-          - { name: 'WP trunk', version: 'WordPress/WordPress#master', number: '6.1' }
+          - { name: 'WP latest', version: 'latest', number: '6.1' }
+          - { name: 'WP trunk', version: 'WordPress/WordPress#master', number: '6.2' }
           - { name: 'WP minimum', version: 'WordPress/WordPress#5.2', number: '5.2' }
     steps:
       - name: Checkout

_templates/cypress-command/new/test.ejs.t

@@ -1,5 +1,5 @@
 ---
-to: tests/cypress/integration/<%= h.changeCase.param(name) %>.test.js
+to: tests/cypress/e2e/<%= h.changeCase.param(name) %>.test.js
 ---
 describe('Command: <%= h.changeCase.camel(name) %>', () => {
   it('Should be able to <%= h.changeCase.title(name) %>', () => {

package.json

@@ -16,8 +16,8 @@
     "prepare": "husky install",
     "prettify": "prettier --write \"**/*.{ts,js}\"",
     "typecheck": "tsc --noEmit",
-    "cypress:open": "cypress open --config-file tests/cypress/config.json",
-    "cypress:run": "cypress run --config-file tests/cypress/config.json",
+    "cypress:open": "cypress open --config-file tests/cypress/cypress-config.js --e2e --browser chrome",
+    "cypress:run": "cypress run --config-file tests/cypress/cypress-config.js",
     "env": "wp-env",
     "env:start": "wp-env start",
     "env:stop": "wp-env stop",
@@ -50,11 +50,11 @@
     "@types/node": "^12.20.11",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@typescript-eslint/parser": "^4.22.0",
-    "@wordpress/env": "^4.2.2",
+    "@wordpress/env": "^5.5.0",
     "codecov": "^3.8.1",
-    "compare-versions": "^4.1.3",
-    "cypress": "^9.5.1",
-    "cypress-mochawesome-reporter": "^3.0.1",
+	"compare-versions": "^4.1.3",
+    "cypress": "^10.11.0",
+    "cypress-mochawesome-reporter": "^3.2.3",
     "eslint": "^7.25.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-cypress": "^2.12.1",
@@ -72,4 +72,4 @@
     "*.ts": "eslint --cache --cache-location .eslintcache --fix",
     "*.{ts,js}": "prettier --write"
   }
-}
+}

tests/cypress/cypress-config.js

@@ -0,0 +1,46 @@
+const { defineConfig } = require('cypress');
+const { readConfig } = require('@wordpress/env/lib/config');
+
+module.exports = defineConfig({
+  fixturesFolder: 'tests/cypress/fixtures',
+  screenshotsFolder: 'tests/cypress/screenshots',
+  videosFolder: 'tests/cypress/videos',
+  downloadsFolder: 'tests/cypress/downloads',
+  video: false,
+  e2e: {
+    setupNodeEvents(on, config) {
+      return setBaseUrl(on, config);
+    },
+    specPattern: 'tests/cypress/e2e/**/*.test.{js,jsx,ts,tsx}',
+    supportFile: 'tests/cypress/support/e2e.js',
+  },
+  reporter: 'mochawesome',
+  reporterOptions: {
+    reportFilename: 'mochawesome-[name]',
+    reportDir: 'tests/cypress/reports',
+    overwrite: false,
+    html: false,
+    json: true,
+  },
+});
+
+/**
+ * Set WP URL as baseUrl in Cypress config.
+ *
+ * @param {Function} on    function that used to register listeners on various events.
+ * @param {object} config  Cypress Config object.
+ * @returns config Updated Cypress Config object.
+ */
+const setBaseUrl = async (on, config) => {
+  const wpEnvConfig = await readConfig('wp-env');
+
+  if (wpEnvConfig) {
+    const port = wpEnvConfig.env.tests.port || null;
+
+    if (port) {
+      config.baseUrl = wpEnvConfig.env.tests.config.WP_SITEURL;
+    }
+  }
+
+  return config;
+};

tests/cypress/integration/check-block-pattern-exists.test.js → tests/cypress/e2e/check-block-pattern-exists.test.js

@@ -21,7 +21,6 @@ describe('Command: checkBlockPatternExists', () => {
       it(`Pattern "${testCase.title}" ${shouldIt} exist in category "${testCase.cat}"`, () => {
         // Wait for patterns to load on the post edit page.
 
-
         const args = {
           title: testCase.title,
         };

tests/cypress/integration/create-post.test.js → tests/cypress/e2e/create-post.test.js

@@ -83,7 +83,20 @@ describe('Command: createPost', () => {
       title: postTitle,
       content: postContent,
       beforeSave: () => {
-        cy.openDocumentSettingsPanel('Status & visibility');
+        // WP 6.1 renamed the panel name "Status & visibility" to "Summary".
+        cy.openDocumentSettingsSidebar('Post');
+        cy.get('body').then($body => {
+          let name = 'Status & visibility';
+          if (
+            $body.find(
+              '.components-panel__body .components-panel__body-title button:contains("Summary")'
+            ).length > 0
+          ) {
+            name = 'Summary';
+          }
+          cy.openDocumentSettingsPanel(name);
+        });
+
         cy.get('label')
           .contains('Stick to the top of the blog')
           .click()

tests/cypress/integration/open-document-settings.test.js → tests/cypress/e2e/open-document-settings.test.js

@@ -34,16 +34,27 @@ describe('Commands: openDocumentSettings*', () => {
     cy.visit(`/wp-admin/post-new.php`);
     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, { matchCase: false })
-      .then($button => {
-        const $panel = $button.parents('.components-panel__body');
-        cy.wrap($panel).should('contain', 'Stick to the top of the blog');
-      });
+    // WP 6.1 renamed the panel name "Status & visibility" to "Summary".
+    cy.openDocumentSettingsSidebar('Post');
+    cy.get('body').then($body => {
+      let name = 'Status & visibility';
+      if (
+        $body.find(
+          '.components-panel__body .components-panel__body-title button:contains("Summary")'
+        ).length > 0
+      ) {
+        name = 'Summary';
+      }
+      cy.openDocumentSettingsPanel(name);
+
+      // Assertion: Stick to the top checkbox should be visible
+      cy.get('.components-panel__body .components-panel__body-title button')
+        .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');
+        });
+    });
   });
 
   it('Should be able to open Tags panel on the existing post', () => {

tests/cypress/support/index.js → tests/cypress/support/e2e.js

@@ -1,5 +1,5 @@
 // ***********************************************************
-// This example support/index.js is processed and
+// This example support/e2e.js is processed and
 // loaded automatically before your test files.
 //
 // This is a great place to put global configuration and