Add cypress tests

pull/396/head
Jeroen Akkerman 2 years ago
parent 722fb61ed2
commit 56532f9ce4

@ -1,4 +1,5 @@
{
"root": true,
"rules": {
"strict": 0,
"no-console": 0,

@ -37,6 +37,20 @@ jobs:
- name: Test
run: npm test
- uses: actions/upload-artifact@v2
if: failure()
with:
name: cypress-screenshots
path: cypress/screenshots
retention-days: 7
- uses: actions/upload-artifact@v2
if: always()
with:
name: cypress-videos
path: cypress/videos
retention-days: 7
deploy:
needs: [ test ]

4
.gitignore vendored

@ -11,3 +11,7 @@ node_modules/
.idea/
.vscode/
dev_test/
# Test artifacts
cypress/screenshots
cypress/videos

@ -0,0 +1,5 @@
{
"ignoreTestFiles": [
"**/*.html"
]
}

@ -0,0 +1,14 @@
{
"plugins": [
"cypress"
],
"env": {
"node": true,
"es6": true,
"cypress/globals": true
},
"extends": [
"../.eslintrc",
"plugin:cypress/recommended"
]
}

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Default</title>
<link rel="stylesheet" href="../../../dist/easymde.min.css">
<script src="../../../dist/easymde.min.js"></script>
</head>
<body>
<textarea id="textarea"></textarea>
<script>
const easyMDE = new EasyMDE();
</script>
</body>
</html>

@ -0,0 +1,56 @@
/// <reference types="cypress" />
describe('Default statusbar', () => {
beforeEach(() => {
cy.visit(__dirname + '/default.html');
});
it('loads the editor with default statusbar', () => {
cy.get('.EasyMDEContainer').should('be.visible');
cy.get('.EasyMDEContainer .editor-statusbar').should('be.visible');
cy.get('.EasyMDEContainer .editor-statusbar .autosave').should('be.empty');
cy.get('.EasyMDEContainer .editor-statusbar .lines').before('content').should('contain', 'lines: ');
cy.get('.EasyMDEContainer .editor-statusbar .lines').should('contain', '1');
cy.get('.EasyMDEContainer .editor-statusbar .words').before('content').should('contain', 'words: ');
cy.get('.EasyMDEContainer .editor-statusbar .words').should('contain', '0');
cy.get('.EasyMDEContainer .editor-statusbar .cursor').should('contain', '1:1');
});
it('updates the statusbar when typing', () => {
cy.get('.EasyMDEContainer').should('be.visible');
cy.get('.EasyMDEContainer .editor-statusbar').should('be.visible');
cy.get('.EasyMDEContainer .CodeMirror').type('Hello');
cy.get('.EasyMDEContainer .editor-statusbar .autosave').should('be.empty');
cy.get('.EasyMDEContainer .editor-statusbar .lines').should('contain', '1');
cy.get('.EasyMDEContainer .editor-statusbar .words').should('contain', '1');
cy.get('.EasyMDEContainer .editor-statusbar .cursor').should('contain', '1:6');
cy.get('.EasyMDEContainer .CodeMirror').type(' World');
cy.get('.EasyMDEContainer .editor-statusbar .lines').should('contain', '1');
cy.get('.EasyMDEContainer .editor-statusbar .words').should('contain', '2');
cy.get('.EasyMDEContainer .editor-statusbar .cursor').should('contain', '1:12');
cy.get('.EasyMDEContainer .CodeMirror').type('{enter}');
cy.get('.EasyMDEContainer .editor-statusbar .lines').should('contain', '2');
cy.get('.EasyMDEContainer .editor-statusbar .words').should('contain', '2');
cy.get('.EasyMDEContainer .editor-statusbar .cursor').should('contain', '2:1');
cy.get('.EasyMDEContainer .CodeMirror').type('This is a sample text.{enter}We\'re testing the statusbar.{enter}Did it work?');
cy.get('.EasyMDEContainer .editor-statusbar .autosave').should('be.empty');
cy.get('.EasyMDEContainer .editor-statusbar .lines').before('content').should('contain', 'lines: ');
cy.get('.EasyMDEContainer .editor-statusbar .lines').should('contain', '4');
cy.get('.EasyMDEContainer .editor-statusbar .words').before('content').should('contain', 'words: ');
cy.get('.EasyMDEContainer .editor-statusbar .words').should('contain', '15');
cy.get('.EasyMDEContainer .editor-statusbar .cursor').should('contain', '4:13');
});
});

@ -0,0 +1,17 @@
/// <reference types="cypress" />
describe('Default editor', () => {
beforeEach(() => {
cy.visit(__dirname + '/default.html');
});
it('Loads the editor with default settings', () => {
cy.get('.EasyMDEContainer').should('be.visible');
cy.get('#textarea').should('not.be.visible');
cy.get('.EasyMDEContainer .editor-toolbar').should('be.visible');
cy.get('.EasyMDEContainer .CodeMirror').should('be.visible');
cy.get('.EasyMDEContainer .editor-preview').should('not.be.visible');
cy.get('.EasyMDEContainer .editor-statusbar').should('be.visible');
});
});

@ -0,0 +1,10 @@
/// <reference types="cypress" />
/**
* @type {Cypress.PluginConfig}
*/
// eslint-disable-next-line no-unused-vars
module.exports = (on, config) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
};

@ -0,0 +1,15 @@
/// <reference types="cypress" />
const unquote = (str) => str.replace(/(^")|("$)/g, '');
Cypress.Commands.add(
'before',
{
prevSubject: 'element',
},
(element, property) => {
const win = element[0].ownerDocument.defaultView;
const before = win.getComputedStyle(element[0], 'before');
return unquote(before.getPropertyValue(property));
},
);

@ -0,0 +1 @@
require('./commands');

3738
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -27,6 +27,9 @@
},
"devDependencies": {
"browserify": "^17.0.0",
"cypress": "^9.2.1",
"eslint": "^6.8.0",
"eslint-plugin-cypress": "^2.12.1",
"gulp": "^4.0.2",
"gulp-clean-css": "^4.2.0",
"gulp-concat": "^2.6.1",
@ -42,8 +45,11 @@
"repository": "github:Ionaru/easy-markdown-editor",
"scripts": {
"prepare": "gulp",
"test": "npm run lint && npm run test:types",
"test": "npm run lint && npm run test:types && npm run e2e",
"lint": "gulp lint",
"cypress:lint": "eslint cypress",
"cypress:run": "cypress run",
"e2e": "gulp && npm run cypress:lint && npm run cypress:run",
"test:types": "tsc --project types/tsconfig.json"
}
}

Loading…
Cancel
Save