WikiContent using easy-markdown-editor
This commit is contained in:
@ -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,31 @@
|
||||
/// <reference types="cypress" />
|
||||
|
||||
describe('Preview', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit(__dirname + '/index.html');
|
||||
});
|
||||
|
||||
it('can show a preview of markdown text', () => {
|
||||
cy.get('.EasyMDEContainer').should('be.visible');
|
||||
cy.get('.EasyMDEContainer .editor-preview').should('not.be.visible');
|
||||
|
||||
// Enter markdown text.
|
||||
cy.get('.EasyMDEContainer .CodeMirror').type('# My Big Title');
|
||||
cy.get('.EasyMDEContainer .CodeMirror').type('{enter}');
|
||||
cy.get('.EasyMDEContainer .CodeMirror').type('This is some **important** text!');
|
||||
|
||||
cy.get('.EasyMDEContainer .CodeMirror-line').should('contain', '# My Big Title');
|
||||
cy.get('.EasyMDEContainer .cm-header.cm-header-1').should('contain', '#');
|
||||
cy.get('.EasyMDEContainer .cm-header.cm-header-1').should('contain', 'My Big Title');
|
||||
|
||||
cy.get('.EasyMDEContainer .CodeMirror-line').should('contain', 'This is some **important** text!');
|
||||
cy.get('.EasyMDEContainer .cm-strong').should('contain', '**');
|
||||
cy.get('.EasyMDEContainer .cm-strong').should('contain', 'important');
|
||||
|
||||
cy.previewOn();
|
||||
|
||||
// Check preview window for rendered markdown.
|
||||
cy.get('.EasyMDEContainer .editor-preview').should('contain.html', '<h1 id="my-big-title">My Big Title</h1>');
|
||||
cy.get('.EasyMDEContainer .editor-preview').should('contain.html', '<p>This is some <strong>important</strong> text!</p>');
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,56 @@
|
||||
/// <reference types="cypress" />
|
||||
|
||||
describe('Default statusbar', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit(__dirname + '/index.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 + '/index.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,20 @@
|
||||
<!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({
|
||||
promptURLs: true,
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,228 @@
|
||||
/// <reference types="cypress" />
|
||||
|
||||
describe('URL prompts', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit(__dirname + '/index.html');
|
||||
});
|
||||
|
||||
it('must show the correct text for a link prompt', () => {
|
||||
cy.get('.EasyMDEContainer').should('be.visible');
|
||||
cy.get('#textarea').should('not.be.visible');
|
||||
|
||||
cy.window().then(($win) => {
|
||||
const stub = cy.stub($win, 'prompt');
|
||||
cy.get('button.link').click().then(() => {
|
||||
expect(stub).to.be.calledWith('URL for the link:', 'https://');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('must show the correct text for an image prompt', () => {
|
||||
cy.get('.EasyMDEContainer').should('be.visible');
|
||||
cy.get('#textarea').should('not.be.visible');
|
||||
|
||||
cy.window().then(($win) => {
|
||||
const stub = cy.stub($win, 'prompt');
|
||||
cy.get('button.image').click().then(() => {
|
||||
expect(stub).to.be.calledWith('URL of the image:', 'https://');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('must enter a link correctly through a prompt', () => {
|
||||
cy.get('.EasyMDEContainer').should('be.visible');
|
||||
cy.get('#textarea').should('not.be.visible');
|
||||
|
||||
cy.window().then(($win) => {
|
||||
cy.stub($win, 'prompt').returns('https://example.com');
|
||||
cy.get('button.link').click();
|
||||
});
|
||||
cy.get('.EasyMDEContainer .CodeMirror').contains('[](https://example.com)');
|
||||
cy.get('.EasyMDEContainer .CodeMirror').type('{home}{rightarrow}Link to a website!');
|
||||
|
||||
cy.previewOn();
|
||||
|
||||
cy.get('.EasyMDEContainer .editor-preview').should('contain.html', '<p><a href="https://example.com" target="_blank">Link to a website!</a></p>');
|
||||
});
|
||||
|
||||
it('can use the prompt multiple times', () => {
|
||||
cy.get('.EasyMDEContainer').should('be.visible');
|
||||
cy.get('#textarea').should('not.be.visible');
|
||||
|
||||
cy.window().then(($win) => {
|
||||
const stub = cy.stub($win, 'prompt');
|
||||
stub.returns('https://example.com');
|
||||
cy.get('button.link').click().then(() => {
|
||||
expect(stub).to.be.calledWith('URL for the link:', 'https://');
|
||||
stub.restore();
|
||||
});
|
||||
});
|
||||
cy.get('.EasyMDEContainer .CodeMirror').contains('[](https://example.com)');
|
||||
cy.get('.EasyMDEContainer .CodeMirror').type('{home}{rightarrow}Link to a website!{end}{enter}');
|
||||
|
||||
cy.window().then(($win) => {
|
||||
const stub = cy.stub($win, 'prompt');
|
||||
stub.returns('https://example.eu');
|
||||
cy.get('button.link').click().then(() => {
|
||||
expect(stub).to.be.calledWith('URL for the link:', 'https://');
|
||||
stub.restore();
|
||||
});
|
||||
});
|
||||
cy.get('.EasyMDEContainer .CodeMirror').contains('[](https://example.eu)');
|
||||
cy.get('.EasyMDEContainer .CodeMirror').type('{home}{rightarrow}Link to a second website!');
|
||||
|
||||
cy.get('.EasyMDEContainer .CodeMirror').contains('[Link to a website!](https://example.com)');
|
||||
cy.get('.EasyMDEContainer .CodeMirror').contains('[Link to a second website!](https://example.eu)');
|
||||
|
||||
cy.previewOn();
|
||||
|
||||
cy.get('.EasyMDEContainer .editor-preview').should(
|
||||
'contain.html',
|
||||
'<p><a href="https://example.com" target="_blank">Link to a website!</a><br><a href="https://example.eu" target="_blank">Link to a second website!</a></p>',
|
||||
);
|
||||
});
|
||||
|
||||
it('must be able to deal with parameters in links', () => {
|
||||
cy.get('.EasyMDEContainer').should('be.visible');
|
||||
cy.get('#textarea').should('not.be.visible');
|
||||
|
||||
cy.window().then(($win) => {
|
||||
cy.stub($win, 'prompt').returns('https://example.com?some=param&moo=cow');
|
||||
cy.get('button.link').click();
|
||||
});
|
||||
cy.get('.EasyMDEContainer .CodeMirror').contains('[](https://example.com?some=param&moo=cow)');
|
||||
cy.get('.EasyMDEContainer .CodeMirror').type('{home}{rightarrow}Link to a website!');
|
||||
|
||||
cy.previewOn();
|
||||
|
||||
cy.get('.EasyMDEContainer .editor-preview').should('contain.html', '<p><a href="https://example.com?some=param&moo=cow" target="_blank">Link to a website!</a></p>');
|
||||
});
|
||||
|
||||
it('must be able to deal with brackets in links', () => {
|
||||
cy.get('.EasyMDEContainer').should('be.visible');
|
||||
cy.get('#textarea').should('not.be.visible');
|
||||
|
||||
cy.window().then(($win) => {
|
||||
cy.stub($win, 'prompt').returns('https://example.com?some=[]param');
|
||||
cy.get('button.link').click();
|
||||
});
|
||||
cy.get('.EasyMDEContainer .CodeMirror').contains('[](https://example.com?some=%5B%5Dparam)');
|
||||
cy.get('.EasyMDEContainer .CodeMirror').type('{home}{rightarrow}Link to a website!');
|
||||
|
||||
cy.previewOn();
|
||||
|
||||
cy.get('.EasyMDEContainer .editor-preview').should('contain.html', '<p><a href="https://example.com?some=%5B%5Dparam" target="_blank">Link to a website!</a></p>');
|
||||
});
|
||||
|
||||
it('must be able to deal with parentheses in links', () => {
|
||||
cy.get('.EasyMDEContainer').should('be.visible');
|
||||
cy.get('#textarea').should('not.be.visible');
|
||||
|
||||
cy.window().then(($win) => {
|
||||
cy.stub($win, 'prompt').returns('https://example.com?some=(param)');
|
||||
cy.get('button.link').click();
|
||||
});
|
||||
cy.get('.EasyMDEContainer .CodeMirror').contains('[](https://example.com?some=\\(param\\))');
|
||||
cy.get('.EasyMDEContainer .CodeMirror').type('{home}{rightarrow}Link to a website!');
|
||||
|
||||
cy.previewOn();
|
||||
|
||||
cy.get('.EasyMDEContainer .editor-preview').should('contain.html', '<p><a href="https://example.com?some=(param)" target="_blank">Link to a website!</a></p>');
|
||||
});
|
||||
|
||||
it('must be able to deal with parentheses in links (multiple)', () => {
|
||||
cy.get('.EasyMDEContainer').should('be.visible');
|
||||
cy.get('#textarea').should('not.be.visible');
|
||||
|
||||
cy.window().then(($win) => {
|
||||
cy.stub($win, 'prompt').returns('https://example.com?some=(param1,param2)&more=(param3,param4)&end=true');
|
||||
cy.get('button.link').click();
|
||||
});
|
||||
cy.get('.EasyMDEContainer .CodeMirror').contains('[](https://example.com?some=\\(param1,param2\\)&more=\\(param3,param4\\)&end=true)');
|
||||
cy.get('.EasyMDEContainer .CodeMirror').type('{home}{rightarrow}Link to a website!');
|
||||
|
||||
cy.previewOn();
|
||||
|
||||
cy.get('.EasyMDEContainer .editor-preview').should('contain.html', '<p><a href="https://example.com?some=(param1,param2)&more=(param3,param4)&end=true" target="_blank">Link to a website!</a></p>');
|
||||
});
|
||||
|
||||
it('must be able to deal with unbalanced parentheses in links (opening)', () => {
|
||||
cy.get('.EasyMDEContainer').should('be.visible');
|
||||
cy.get('#textarea').should('not.be.visible');
|
||||
|
||||
cy.window().then(($win) => {
|
||||
cy.stub($win, 'prompt').returns('https://example.com?some=(param');
|
||||
cy.get('button.link').click();
|
||||
});
|
||||
cy.get('.EasyMDEContainer .CodeMirror').contains('[](https://example.com?some=\\(param)');
|
||||
cy.get('.EasyMDEContainer .CodeMirror').type('{home}{rightarrow}Link to a website!');
|
||||
|
||||
cy.previewOn();
|
||||
|
||||
cy.get('.EasyMDEContainer .editor-preview').should('contain.html', '<p><a href="https://example.com?some=(param" target="_blank">Link to a website!</a></p>');
|
||||
});
|
||||
|
||||
it('must be able to deal with unbalanced parentheses in links (closing)', () => {
|
||||
cy.get('.EasyMDEContainer').should('be.visible');
|
||||
cy.get('#textarea').should('not.be.visible');
|
||||
|
||||
cy.window().then(($win) => {
|
||||
cy.stub($win, 'prompt').returns('https://example.com?some=)param');
|
||||
cy.get('button.link').click();
|
||||
});
|
||||
cy.get('.EasyMDEContainer .CodeMirror').contains('[](https://example.com?some=\\)param)');
|
||||
cy.get('.EasyMDEContainer .CodeMirror').type('{home}{rightarrow}Link to a website!');
|
||||
|
||||
cy.previewOn();
|
||||
|
||||
cy.get('.EasyMDEContainer .editor-preview').should('contain.html', '<p><a href="https://example.com?some=)param" target="_blank">Link to a website!</a></p>');
|
||||
});
|
||||
|
||||
it('must be able to deal with inequality symbols in links', () => {
|
||||
cy.get('.EasyMDEContainer').should('be.visible');
|
||||
cy.get('#textarea').should('not.be.visible');
|
||||
|
||||
cy.window().then(($win) => {
|
||||
cy.stub($win, 'prompt').returns('https://example.com?some=<param');
|
||||
cy.get('button.link').click();
|
||||
});
|
||||
cy.get('.EasyMDEContainer .CodeMirror').contains('[](https://example.com?some=%3Cparam');
|
||||
cy.get('.EasyMDEContainer .CodeMirror').type('{home}{rightarrow}Link to a website!');
|
||||
|
||||
cy.previewOn();
|
||||
|
||||
cy.get('.EasyMDEContainer .editor-preview').should('contain.html', '<p><a href="https://example.com?some=%3Cparam" target="_blank">Link to a website!</a></p>');
|
||||
});
|
||||
|
||||
it('must be able to deal with emoji in links', () => {
|
||||
cy.get('.EasyMDEContainer').should('be.visible');
|
||||
cy.get('#textarea').should('not.be.visible');
|
||||
|
||||
cy.window().then(($win) => {
|
||||
cy.stub($win, 'prompt').returns('https://example.com?some=👷♂️');
|
||||
cy.get('button.link').click();
|
||||
});
|
||||
cy.get('.EasyMDEContainer .CodeMirror').contains('[](https://example.com?some=%F0%9F%91%B7%E2%80%8D%E2%99%82%EF%B8%8F');
|
||||
cy.get('.EasyMDEContainer .CodeMirror').type('{home}{rightarrow}Link to a 👌 website!');
|
||||
|
||||
cy.previewOn();
|
||||
|
||||
cy.get('.EasyMDEContainer .editor-preview').should('contain.html', '<p><a href="https://example.com?some=%F0%9F%91%B7%E2%80%8D%E2%99%82%EF%B8%8F" target="_blank">Link to a 👌 website!</a></p>');
|
||||
});
|
||||
|
||||
it('must be able to deal with spaces in links', () => {
|
||||
cy.get('.EasyMDEContainer').should('be.visible');
|
||||
cy.get('#textarea').should('not.be.visible');
|
||||
|
||||
cy.window().then(($win) => {
|
||||
cy.stub($win, 'prompt').returns('https://example.com?some=very special param');
|
||||
cy.get('button.link').click();
|
||||
});
|
||||
cy.get('.EasyMDEContainer .CodeMirror').contains('[](https://example.com?some=very%20special%20param');
|
||||
cy.get('.EasyMDEContainer .CodeMirror').type('{home}{rightarrow}Link to a website!');
|
||||
|
||||
cy.previewOn();
|
||||
|
||||
cy.get('.EasyMDEContainer .editor-preview').should('contain.html', '<p><a href="https://example.com?some=very%20special%20param" target="_blank">Link to a website!</a></p>');
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user