deps(Cypress): upgrade library and related packages to latest versions, migrate config, fix type error (#2327)

* deps: upgrade cypress and related libraries

* chore: automate migrate cypress config, rename spec files

* fix: custom commands types

* chore: upgrade CHANGELOG.md

* ci: upgrade cypress action to support new config file format

* ci: remove container from firefox job, upgrade checkout action

.github/workflows/cypress.yml

@@ -3,16 +3,13 @@ on: [pull_request]
 jobs:
   firefox:
     runs-on: ubuntu-latest
-    container:
-      image: cypress/browsers:node14.17.0-chrome88-ff89
-      options: --user 1001
     steps:
       - uses: actions/setup-node@v3
         with:
           node-version: 16
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - run: yarn ci:pull_paragraph
-      - uses: cypress-io/github-action@v2
+      - uses: cypress-io/github-action@v5
         with:
           config: video=false
           browser: firefox
@@ -23,9 +20,9 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 16
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - run: yarn ci:pull_paragraph
-      - uses: cypress-io/github-action@v2
+      - uses: cypress-io/github-action@v5
         with:
           config: video=false
           browser: chrome
@@ -36,9 +33,9 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 16
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - run: yarn ci:pull_paragraph
-      - uses: cypress-io/github-action@v2
+      - uses: cypress-io/github-action@v5
         with:
           config: video=false
           browser: edge

cypress.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  env: {
+    NODE_ENV: 'test',
+  },
+  fixturesFolder: 'test/cypress/fixtures',
+  screenshotsFolder: 'test/cypress/screenshots',
+  videosFolder: 'test/cypress/videos',
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./test/cypress/plugins/index.ts')(on, config)
+    },
+    specPattern: 'test/cypress/tests/**/*.cy.{js,jsx,ts,tsx}',
+    supportFile: 'test/cypress/support/index.ts',
+  },
+})

cypress.json

@@ -1,11 +0,0 @@
-{
-  "env": {
-    "NODE_ENV": "test"
-  },
-  "fixturesFolder": "test/cypress/fixtures",
-  "integrationFolder": "test/cypress/tests",
-  "screenshotsFolder": "test/cypress/screenshots",
-  "videosFolder": "test/cypress/videos",
-  "supportFile": "test/cypress/support/index.ts",
-  "pluginsFile": "test/cypress/plugins/index.ts"
-}

docs/CHANGELOG.md

@@ -11,6 +11,7 @@
 - `Fix`- Several bugs caused by random browser extensions.
 - `Improvement` — *Dependencies* — Upgrade TypeScript to v5.
 - `Fix` — *ToolsAPI* — `pasteConfig` getter with `false` value could be used to disable paste handling by Editor.js core. Could be useful if your tool has its own paste handler.
+- `Improvement` — *Dependencies* — Upgrade Cypress to v12, upgrade related libraries to latest versions.
 
 ### 2.26.5
 

package.json

@@ -48,8 +48,8 @@
     "@babel/register": "^7.9.0",
     "@babel/runtime": "^7.9.2",
     "@codexteam/shortcuts": "^1.1.1",
-    "@cypress/code-coverage": "^3.9.2",
-    "@cypress/webpack-preprocessor": "^5.6.0",
+    "@cypress/code-coverage": "^3.10.1",
+    "@cypress/webpack-preprocessor": "^5.17.0",
     "@editorjs/code": "^2.7.0",
     "@editorjs/delimiter": "^1.2.0",
     "@editorjs/header": "^2.7.0",
@@ -64,8 +64,8 @@
     "core-js": "3.6.5",
     "css-loader": "^3.5.3",
     "cssnano": "^4.1.10",
-    "cypress": "^6.8.0",
-    "cypress-intellij-reporter": "^0.0.6",
+    "cypress": "^12.9.0",
+    "cypress-intellij-reporter": "^0.0.7",
     "eslint": "^8.28.0",
     "eslint-config-codex": "^1.7.1",
     "eslint-loader": "^4.0.2",

test/cypress/support/commands.ts

@@ -70,7 +70,7 @@ Cypress.Commands.add('paste', {
  * Usage:
  * cy.get('div').copy().then(data => {})
  */
-Cypress.Commands.add('copy', { prevSubject: true }, async (subject) => {
+Cypress.Commands.add('copy', { prevSubject: true }, (subject) => {
   const clipboardData: {[type: string]: any} = {};
 
   const copyEvent = Object.assign(new Event('copy', {
@@ -87,7 +87,7 @@ Cypress.Commands.add('copy', { prevSubject: true }, async (subject) => {
 
   subject[0].dispatchEvent(copyEvent);
 
-  return clipboardData;
+  return cy.wrap(clipboardData);
 });
 
 /**
@@ -96,7 +96,7 @@ Cypress.Commands.add('copy', { prevSubject: true }, async (subject) => {
  * Usage:
  * cy.get('div').cut().then(data => {})
  */
-Cypress.Commands.add('cut', { prevSubject: true }, async (subject) => {
+Cypress.Commands.add('cut', { prevSubject: true }, (subject) => {
   const clipboardData: {[type: string]: any} = {};
 
   const copyEvent = Object.assign(new Event('cut', {
@@ -113,7 +113,7 @@ Cypress.Commands.add('cut', { prevSubject: true }, async (subject) => {
 
   subject[0].dispatchEvent(copyEvent);
 
-  return clipboardData;
+  return cy.wrap(clipboardData);
 });
 
 /**
@@ -121,10 +121,10 @@ Cypress.Commands.add('cut', { prevSubject: true }, async (subject) => {
  *
  * @param data — data to render
  */
-Cypress.Commands.add('render', { prevSubject: true }, async (subject: EditorJS, data: OutputData): Promise<EditorJS> => {
-  await subject.render(data);
+Cypress.Commands.add('render', { prevSubject: true }, (subject: EditorJS, data: OutputData) => {
+  subject.render(data);
 
-  return subject;
+  return cy.wrap(subject);
 });
 
 

test/cypress/support/index.d.ts

@@ -31,7 +31,7 @@ declare global {
        * @usage
        * cy.get('div').copy().then(data => {})
        */
-      copy(): Chainable<{ [type: string]: any }>;
+      copy(): Chainable<Subject>;
 
       /**
        * Cut command to dispatch cut event on subject
@@ -39,14 +39,14 @@ declare global {
        * @usage
        * cy.get('div').cut().then(data => {})
        */
-      cut(): Chainable<{ [type: string]: any }>;
+      cut(): Chainable<Subject>;
 
       /**
        * Calls EditorJS API render method
        *
        * @param data — data to render
        */
-      render(data: OutputData): Chainable<EditorJS>;
+      render(data: OutputData): Chainable<Subject>;
 
       /**
        * Select passed text in element