Basic initialisation test for Editor.js (#1410)

* Initial commit * Fixed test.html file * Create editor instance in the test * Assert paragraph data in editor instance * Moving cypress folder to test folder * Minor Fixes * Removed config test for now * Fixed example.html * Fixed editor.js dist path * Minor Fixes * Stored Host in a const * Add nodemon and Fix commands * Add and configure cypress eslint plugin * Updated Tests according to best practices * Minor FIxes * Minor FIxes * adjust eslint and ts * Update .eslintrc * improve config * debug tests * fix tests * Fix declarations * descrease debounce * rm timeout * Update CHANGELOG.md * Update CHANGELOG.md Co-authored-by: Peter Savchenko <[email protected]> Co-authored-by: George Berezhnoy <[email protected]>
codex-team · Nov 21, 2020 · 585e01b · 585e01b
1 parent f440a60
commit 585e01b
Show file tree

Hide file tree

Showing 15 changed files with 1,152 additions and 16 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -7,6 +7,7 @@
      * Temporary suppress some errors. We need to fix them partially in next patches
      */
     "import/no-duplicates": ["warn"],
+    "@typescript-eslint/triple-slash-reference": ["off"]
   },
   "settings": {
     "jsdoc": {

diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,6 @@ node_modules/*
 
 npm-debug.log
 yarn-error.log
+
+test/cypress/screenshots
+test/cypress/videos
diff --git a/cypress.json b/cypress.json
@@ -0,0 +1,11 @@
+{
+  "projectId": "tivr7e",
+  "env": {
+  },
+  "fixturesFolder": "test/cypress/fixtures",
+  "integrationFolder": "test/cypress/tests",
+  "pluginsFile": "test/cypress/plugins/index.ts",
+  "screenshotsFolder": "test/cypress/screenshots",
+  "videosFolder": "test/cypress/videos",
+  "supportFile": "test/cypress/support/index.ts"
+}
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ### 2.19.1
 
+- `Improvements` - The [Cypress](https://www.cypress.io) was integrated as the end-to-end testing framework
 - `Fix` - The problem with destroy() method [#1380](https://github.com/codex-team/editor.js/issues/1380).
 - `Fix` - add getter keyword to `block.mergeable` method [#1415](https://github.com/codex-team/editor.js/issues/1415).
 - `Fix` — Fix problem with entering to Editor.js by Tab key [#1393](https://github.com/codex-team/editor.js/issues/1393)

diff --git a/package.json b/package.json
@@ -16,13 +16,15 @@
     "build:win": "rimraf dist && yarn svg:win && yarn build:prod",
     "build:dev": "webpack --mode development --progress --display-error-details --display-entrypoints --watch",
     "build:prod": "webpack --mode production",
-    "lint": "eslint src/ --ext .ts",
+    "lint": "eslint src/ --ext .ts && yarn lint:tests",
     "lint:errors": "eslint src/ --ext .ts --quiet",
     "lint:fix": "eslint src/ --ext .ts --fix",
+    "lint:tests": "eslint test/ --ext .ts",
     "svg:win": "if not exist dist md dist && yarn svg",
     "svg": "svg-sprite-generate -d src/assets/ -o dist/sprite.svg",
     "pull_tools": "git submodule update --init --recursive",
-    "checkout_tools": "git submodule foreach git pull origin master"
+    "checkout_tools": "git submodule foreach git pull origin master",
+    "test:e2e": "cypress open"
   },
   "author": "CodeX",
   "license": "Apache-2.0",
@@ -46,9 +48,11 @@
     "core-js": "3.6.5",
     "css-loader": "^3.5.3",
     "cssnano": "^4.1.10",
+    "cypress": "^5.5.0",
     "eslint": "^6.8.0",
     "eslint-config-codex": "^1.3.3",
     "eslint-loader": "^4.0.2",
+    "eslint-plugin-cypress": "^2.11.2",
     "extract-text-webpack-plugin": "^3.0.2",
     "html-janitor": "^2.0.4",
     "license-webpack-plugin": "^2.1.4",

diff --git a/test/cypress/.eslintrc b/test/cypress/.eslintrc
@@ -0,0 +1,17 @@
+{
+    "plugins": [
+        "cypress"
+    ],
+    "env": {
+        "cypress/globals": true
+    },
+    "extends": [
+        "plugin:cypress/recommended"
+    ],
+    "rules": {
+        "cypress/require-data-selectors": 2
+    },
+    "globals": {
+        "EditorJS": true
+    }
+}
diff --git a/test/cypress/fixtures/test.html b/test/cypress/fixtures/test.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html lang="en">
+<body>
+  <!-- Load Editor.js's Core -->
+  <script src="./../../../dist/editor.js"></script>
+  <h1>Editor.js test page</h1>
+</body>
+</html>
diff --git a/test/cypress/plugins/index.ts b/test/cypress/plugins/index.ts
@@ -0,0 +1,5 @@
+/**
+ * This file contains connection of Cypres plugins
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export default function(on, config): void {}
diff --git a/test/cypress/support/commands.ts b/test/cypress/support/commands.ts
@@ -0,0 +1,38 @@
+/**
+ * This file contains custom commands for Cypress.
+ * Also it can override the existing commands.
+ *
+ * --------------------------------------------------
+ */
+
+import type { EditorConfig } from './../../../types/index';
+import type EditorJS from '../../../types/index';
+import Chainable = Cypress.Chainable;
+
+/**
+ * Create a wrapper and initialize the new instance of editor.js
+ * Then return the instance
+ *
+ * @param editorConfig - config to pass to the editor
+ * @returns EditorJS - created instance
+ */
+Cypress.Commands.add('createEditor', (editorConfig: EditorConfig = {}): Chainable<EditorJS> => {
+  return cy.window()
+    .then((window) => {
+      return new Promise((resolve: (instance: EditorJS) => void) => {
+        const editorContainer = window.document.createElement('div');
+
+        editorContainer.setAttribute('id', 'editorjs');
+        editorContainer.dataset.cy = 'editorjs';
+        editorContainer.style.border = '1px dotted #388AE5';
+
+        window.document.body.appendChild(editorContainer);
+
+        const editorInstance: EditorJS = new window.EditorJS(editorConfig);
+
+        editorInstance.isReady.then(() => {
+          resolve(editorInstance);
+        });
+      });
+    });
+});
diff --git a/test/cypress/support/index.d.ts b/test/cypress/support/index.d.ts
@@ -0,0 +1,23 @@
+// in cypress/support/index.d.ts
+// load type definitions that come with Cypress module
+/// <reference types="cypress" />
+
+import type { EditorConfig } from './../../../types/index';
+import type EditorJS from '../../../types/index'
+
+declare global {
+  namespace Cypress {
+    interface Chainable<Subject = any> {
+      /**
+       * Custom command to select DOM element by data-cy attribute.
+       * @param editorConfig - config to pass to the editor
+       * @example cy.createEditor({})
+       */
+      createEditor(editorConfig: EditorConfig): Chainable<EditorJS>
+    }
+
+    interface ApplicationWindow {
+      EditorJS: typeof EditorJS
+    }
+  }
+}
diff --git a/test/cypress/support/index.ts b/test/cypress/support/index.ts
@@ -0,0 +1,19 @@
+/**
+ * This file is processed and
+ * loaded automatically before the test files.
+ *
+ * This is a great place to put global configuration and
+ * behavior that modifies Cypress.
+ */
+
+/**
+ * File with the helpful commands
+ */
+import './commands';
+
+/**
+ * Before-each hook for the cypress tests
+ */
+beforeEach((): void => {
+  cy.visit('test/cypress/fixtures/test.html');
+});
diff --git a/test/cypress/tests/initialization.spec.ts b/test/cypress/tests/initialization.spec.ts
@@ -0,0 +1,30 @@
+// eslint-disable-next-line spaced-comment
+/// <reference path="../support/index.d.ts" />
+
+describe('Editor basic initialization', () => {
+  describe('Zero-config initialization', () => {
+    /**
+     * In this test suite we use zero (omitted) configuration
+     */
+    const editorConfig = {};
+
+    beforeEach(() => {
+      if (this.editorInstance) {
+        this.editorInstance.destroy();
+      } else {
+        cy.createEditor(editorConfig).as('editorInstance');
+      }
+    });
+
+    it('should create a visible UI', () => {
+      cy.window().then((window) => {
+        /**
+         * Assert if created instance is visible or not.
+         */
+        cy.get('[data-cy=editorjs]')
+          .get('div.codex-editor')
+          .should('be.visible');
+      });
+    });
+  });
+});
diff --git a/test/cypress/tsconfig.json b/test/cypress/tsconfig.json
@@ -0,0 +1,10 @@
+{
+    "compilerOptions": {
+      "target": "es2017",
+      "lib": ["es2017", "dom"],
+      "types": ["cypress"]
+    },
+    "include": [
+      "**/*.ts"
+    ]
+  }
diff --git a/tslint.json b/tslint.json
@@ -20,7 +20,8 @@
     "no-string-literal": false,
     "no-empty": false,
     "no-namespace": false,
-    "variable-name": [true, "allow-leading-underscore", "allow-pascal-case"]
+    "variable-name": [true, "allow-leading-underscore", "allow-pascal-case"],
+    "no-reference": false
   },
   "globals": {
     "require": true