Skip to content

Commit 585e01b

Browse files
ranemihirneSpeccgohabereg
authored
Basic initialisation test for Editor.js (codex-team#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 <specc.dev@gmail.com> Co-authored-by: George Berezhnoy <gohabereg@gmail.com>
1 parent f440a60 commit 585e01b

15 files changed

Lines changed: 1152 additions & 16 deletions

File tree

‎.eslintrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
* Temporary suppress some errors. We need to fix them partially in next patches
88
*/
99
"import/no-duplicates": ["warn"],
10+
"@typescript-eslint/triple-slash-reference": ["off"]
1011
},
1112
"settings": {
1213
"jsdoc": {

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,6 @@ node_modules/*
99

1010
npm-debug.log
1111
yarn-error.log
12+
13+
test/cypress/screenshots
14+
test/cypress/videos

‎cypress.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"projectId": "tivr7e",
3+
"env": {
4+
},
5+
"fixturesFolder": "test/cypress/fixtures",
6+
"integrationFolder": "test/cypress/tests",
7+
"pluginsFile": "test/cypress/plugins/index.ts",
8+
"screenshotsFolder": "test/cypress/screenshots",
9+
"videosFolder": "test/cypress/videos",
10+
"supportFile": "test/cypress/support/index.ts"
11+
}

‎docs/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
### 2.19.1
44

5+
- `Improvements` - The [Cypress](https://www.cypress.io) was integrated as the end-to-end testing framework
56
- `Fix` - The problem with destroy() method [#1380](https://github.com/codex-team/editor.js/issues/1380).
67
- `Fix` - add getter keyword to `block.mergeable` method [#1415](https://github.com/codex-team/editor.js/issues/1415).
78
- `Fix` — Fix problem with entering to Editor.js by Tab key [#1393](https://github.com/codex-team/editor.js/issues/1393)

‎package.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,15 @@
1616
"build:win": "rimraf dist && yarn svg:win && yarn build:prod",
1717
"build:dev": "webpack --mode development --progress --display-error-details --display-entrypoints --watch",
1818
"build:prod": "webpack --mode production",
19-
"lint": "eslint src/ --ext .ts",
19+
"lint": "eslint src/ --ext .ts && yarn lint:tests",
2020
"lint:errors": "eslint src/ --ext .ts --quiet",
2121
"lint:fix": "eslint src/ --ext .ts --fix",
22+
"lint:tests": "eslint test/ --ext .ts",
2223
"svg:win": "if not exist dist md dist && yarn svg",
2324
"svg": "svg-sprite-generate -d src/assets/ -o dist/sprite.svg",
2425
"pull_tools": "git submodule update --init --recursive",
25-
"checkout_tools": "git submodule foreach git pull origin master"
26+
"checkout_tools": "git submodule foreach git pull origin master",
27+
"test:e2e": "cypress open"
2628
},
2729
"author": "CodeX",
2830
"license": "Apache-2.0",
@@ -46,9 +48,11 @@
4648
"core-js": "3.6.5",
4749
"css-loader": "^3.5.3",
4850
"cssnano": "^4.1.10",
51+
"cypress": "^5.5.0",
4952
"eslint": "^6.8.0",
5053
"eslint-config-codex": "^1.3.3",
5154
"eslint-loader": "^4.0.2",
55+
"eslint-plugin-cypress": "^2.11.2",
5256
"extract-text-webpack-plugin": "^3.0.2",
5357
"html-janitor": "^2.0.4",
5458
"license-webpack-plugin": "^2.1.4",

‎test/cypress/.eslintrc‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"plugins": [
3+
"cypress"
4+
],
5+
"env": {
6+
"cypress/globals": true
7+
},
8+
"extends": [
9+
"plugin:cypress/recommended"
10+
],
11+
"rules": {
12+
"cypress/require-data-selectors": 2
13+
},
14+
"globals": {
15+
"EditorJS": true
16+
}
17+
}

‎test/cypress/fixtures/test.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<body>
4+
<!-- Load Editor.js's Core -->
5+
<script src="./../../../dist/editor.js"></script>
6+
<h1>Editor.js test page</h1>
7+
</body>
8+
</html>

‎test/cypress/plugins/index.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/**
2+
* This file contains connection of Cypres plugins
3+
*/
4+
// eslint-disable-next-line @typescript-eslint/no-empty-function
5+
export default function(on, config): void {}

‎test/cypress/support/commands.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/**
2+
* This file contains custom commands for Cypress.
3+
* Also it can override the existing commands.
4+
*
5+
* --------------------------------------------------
6+
*/
7+
8+
import type { EditorConfig } from './../../../types/index';
9+
import type EditorJS from '../../../types/index';
10+
import Chainable = Cypress.Chainable;
11+
12+
/**
13+
* Create a wrapper and initialize the new instance of editor.js
14+
* Then return the instance
15+
*
16+
* @param editorConfig - config to pass to the editor
17+
* @returns EditorJS - created instance
18+
*/
19+
Cypress.Commands.add('createEditor', (editorConfig: EditorConfig = {}): Chainable<EditorJS> => {
20+
return cy.window()
21+
.then((window) => {
22+
return new Promise((resolve: (instance: EditorJS) => void) => {
23+
const editorContainer = window.document.createElement('div');
24+
25+
editorContainer.setAttribute('id', 'editorjs');
26+
editorContainer.dataset.cy = 'editorjs';
27+
editorContainer.style.border = '1px dotted #388AE5';
28+
29+
window.document.body.appendChild(editorContainer);
30+
31+
const editorInstance: EditorJS = new window.EditorJS(editorConfig);
32+
33+
editorInstance.isReady.then(() => {
34+
resolve(editorInstance);
35+
});
36+
});
37+
});
38+
});

‎test/cypress/support/index.d.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// in cypress/support/index.d.ts
2+
// load type definitions that come with Cypress module
3+
/// <reference types="cypress" />
4+
5+
import type { EditorConfig } from './../../../types/index';
6+
import type EditorJS from '../../../types/index'
7+
8+
declare global {
9+
namespace Cypress {
10+
interface Chainable<Subject = any> {
11+
/**
12+
* Custom command to select DOM element by data-cy attribute.
13+
* @param editorConfig - config to pass to the editor
14+
* @example cy.createEditor({})
15+
*/
16+
createEditor(editorConfig: EditorConfig): Chainable<EditorJS>
17+
}
18+
19+
interface ApplicationWindow {
20+
EditorJS: typeof EditorJS
21+
}
22+
}
23+
}

0 commit comments

Comments
 (0)