Skip to content

C
CKEditor 5 Custom Build
Unverified Commit 2bec9fc9 authored by Aleksander Nowodzinski's avatar Aleksander Nowodzinski
Browse files
Options

Tests: Updated tests to the latest decoupled editor API.

parent 4749a0b9
Show whitespace changes
Inline Side-by-side
Showing with 273 additions and 246 deletions
tests/ckeditor.js
View file @ 2bec9fc9
...@@ -9,13 +9,19 @@ import DecoupledDocumentEditor from '../src/ckeditor'; ...@@ -9,13 +9,19 @@ import DecoupledDocumentEditor from '../src/ckeditor';
import DecoupledEditor from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor'; import DecoupledEditor from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor';
describe( 'DecoupledDocumentEditor build', () => { describe( 'DecoupledDocumentEditor build', () => {
let editor, editorData; let editor, editorData, editorElement;
beforeEach( () => { beforeEach( () => {
editorData = '<p><strong>foo</strong> bar</p>'; editorData = '<p><strong>foo</strong> bar</p>';
editorElement = document.createElement( 'div' );
editorElement.innerHTML = editorData;
document.body.appendChild( editorElement );
} ); } );
afterEach( () => { afterEach( () => {
editorElement.remove();
editor = null; editor = null;
} ); } );
...@@ -29,9 +35,34 @@ describe( 'DecoupledDocumentEditor build', () => { ...@@ -29,9 +35,34 @@ describe( 'DecoupledDocumentEditor build', () => {
} ); } );
} ); } );
describe( 'editor with data', () => {
test( () => editorData );
it( 'does not define the UI DOM structure', () => {
return DecoupledDocumentEditor.create( editorData )
.then( newEditor => {
expect( newEditor.ui.view.element ).to.be.null;
expect( newEditor.ui.view.toolbar.element.parentElement ).to.be.null;
expect( newEditor.ui.view.editable.element.parentElement ).to.be.null;
} );
} );
} );
describe( 'editor with editable element', () => {
test( () => editorElement );
it( 'uses the provided editable element', () => {
return DecoupledDocumentEditor.create( editorElement )
.then( newEditor => {
expect( newEditor.ui.view.editable.element.parentElement ).to.equal( document.body );
} );
} );
} );
function test( getEditorDataOrElement ) {
describe( 'create()', () => { describe( 'create()', () => {
beforeEach( () => { beforeEach( () => {
return DecoupledDocumentEditor.create( editorData ) return DecoupledDocumentEditor.create( getEditorDataOrElement() )
.then( newEditor => { .then( newEditor => {
editor = newEditor; editor = newEditor;
} ); } );
...@@ -49,17 +80,11 @@ describe( 'DecoupledDocumentEditor build', () => { ...@@ -49,17 +80,11 @@ describe( 'DecoupledDocumentEditor build', () => {
it( 'loads passed data', () => { it( 'loads passed data', () => {
expect( editor.getData() ).to.equal( '<p><strong>foo</strong> bar</p>' ); expect( editor.getData() ).to.equal( '<p><strong>foo</strong> bar</p>' );
} ); } );
it( 'does not define the UI DOM structure', () => {
expect( editor.ui.view.element ).to.be.null;
expect( editor.ui.view.toolbar.element.parentElement ).to.be.null;
expect( editor.ui.view.editable.element.parentElement ).to.be.null;
} );
} ); } );
describe( 'destroy()', () => { describe( 'destroy()', () => {
beforeEach( () => { beforeEach( () => {
return DecoupledDocumentEditor.create( editorData ) return DecoupledDocumentEditor.create( getEditorDataOrElement() )
.then( newEditor => { .then( newEditor => {
editor = newEditor; editor = newEditor;
} ); } );
...@@ -68,7 +93,7 @@ describe( 'DecoupledDocumentEditor build', () => { ...@@ -68,7 +93,7 @@ describe( 'DecoupledDocumentEditor build', () => {
describe( 'plugins', () => { describe( 'plugins', () => {
beforeEach( () => { beforeEach( () => {
return DecoupledDocumentEditor.create( editorData ) return DecoupledDocumentEditor.create( getEditorDataOrElement() )
.then( newEditor => { .then( newEditor => {
editor = newEditor; editor = newEditor;
} ); } );
...@@ -188,7 +213,7 @@ describe( 'DecoupledDocumentEditor build', () => { ...@@ -188,7 +213,7 @@ describe( 'DecoupledDocumentEditor build', () => {
// https://github.com/ckeditor/ckeditor5/issues/572 // https://github.com/ckeditor/ckeditor5/issues/572
it( 'allows configure toolbar items through config.toolbar', () => { it( 'allows configure toolbar items through config.toolbar', () => {
return DecoupledDocumentEditor return DecoupledDocumentEditor
.create( editorData, { .create( getEditorDataOrElement(), {
toolbar: [ 'bold' ] toolbar: [ 'bold' ]
} ) } )
.then( newEditor => { .then( newEditor => {
...@@ -198,4 +223,5 @@ describe( 'DecoupledDocumentEditor build', () => { ...@@ -198,4 +223,5 @@ describe( 'DecoupledDocumentEditor build', () => {
} ); } );
} ); } );
} ); } );
}
} ); } );
tests/manual/ckeditor-cjs-version.html
View file @ 2bec9fc9
...@@ -2,7 +2,48 @@ ...@@ -2,7 +2,48 @@
<div class="toolbar-container"></div> <div class="toolbar-container"></div>
<h2>The editable</h2> <h2>The editable</h2>
<div class="editable-container"></div> <div class="editable-container">
<div id="editor">
<h2>About CKEditor&nbsp;5</h2>
<p>This is <a href="https://ckeditor.com">CKEditor&nbsp;5</a>.</p>
<figure class="image">
<img src="./sample.jpg" alt="Autumn fields" />
</figure>
<p>After more than 2 years of building the next generation editor from scratch and closing over 980 tickets,
we created a highly <strong>extensible and flexible architecture</strong> which consists of an <strong>amazing
editing framework</strong> and <strong>editing solutions</strong> that will be built on top of it.</p>
<p>We explained this design choice in
<a href="https://medium.com/content-uneditable/ckeditor-5-the-future-of-rich-text-editing-2b9300f9df2c">&ldquo;CKEditor 5:
The future of rich text editing&ldquo;</a>:</p>
<blockquote><p>(…) we are changing our approach with CKEditor 5. We will no longer have only two solutions
available, instead CKEditor will be seen as a framework for editing solutions. At the same time, we will be
developing several out-of-the-box solutions based on it, which will be available to use in many different contexts.
It will be a real “one size fits all” approach, from little requirements, to super advanced full featured
applications.</p></blockquote>
<h3>Notes</h3>
<p><a href="https://ckeditor.com">CKEditor&nbsp;5</a> is <i>under heavy development</i> and this demo
is not production-ready software. For example:</p>
<ul>
<li><strong>Only Chrome, Opera and Safari are supported</strong>.</li>
<li>Firefox requires enabling the
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/onselectionchange">
&ldquo;dom.select_events.enabled&rdquo;</a> option.</li>
<li><a href="https://github.com/ckeditor/ckeditor5/issues/342">Support for pasting</a>
is under development (content filtering is unstable).</li>
</ul>
<p>It has <em>bugs</em> that we are aware of &mdash; and that we will be working on in the next few
iterations of the project. Stay tuned for some updates soon!</p>
</div>
</div>
<style> <style>
.editable-container, .editable-container,
......
tests/manual/ckeditor-cjs-version.js
View file @ 2bec9fc9
...@@ -4,51 +4,11 @@ ...@@ -4,51 +4,11 @@
*/ */
const DecoupledDocumentEditor = require( '../../build/ckeditor' ); const DecoupledDocumentEditor = require( '../../build/ckeditor' );
const editorData = `<h2>About CKEditor&nbsp;5</h2>
<p>This is <a href="https://ckeditor.com">CKEditor&nbsp;5</a>.</p> DecoupledDocumentEditor.create( document.querySelector( '#editor' ) )
<figure class="image">
<img src="./sample.jpg" alt="Autumn fields" />
</figure>
<p>After more than 2 years of building the next generation editor from scratch and closing over 980 tickets,
we created a highly <strong>extensible and flexible architecture</strong> which consists of an <strong>amazing
editing framework</strong> and <strong>editing solutions</strong> that will be built on top of it.</p>
<p>We explained this design choice in
<a href="https://medium.com/content-uneditable/ckeditor-5-the-future-of-rich-text-editing-2b9300f9df2c">&ldquo;CKEditor 5:
The future of rich text editing&ldquo;</a>:</p>
<blockquote><p>(…) we are changing our approach with CKEditor 5. We will no longer have only two solutions
available, instead CKEditor will be seen as a framework for editing solutions. At the same time, we will be
developing several out-of-the-box solutions based on it, which will be available to use in many different contexts.
It will be a real “one size fits all” approach, from little requirements, to super advanced full featured
applications.</p></blockquote>
<h3>Notes</h3>
<p><a href="https://ckeditor.com">CKEditor&nbsp;5</a> is <i>under heavy development</i> and this demo
is not production-ready software. For example:</p>
<ul>
<li><strong>Only Chrome, Opera and Safari are supported</strong>.</li>
<li>Firefox requires enabling the
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/onselectionchange">
&ldquo;dom.select_events.enabled&rdquo;</a> option.</li>
<li><a href="https://github.com/ckeditor/ckeditor5/issues/342">Support for pasting</a>
is under development (content filtering is unstable).</li>
</ul>
<p>It has <em>bugs</em> that we are aware of &mdash; and that we will be working on in the next few
iterations of the project. Stay tuned for some updates soon!</p>`;
DecoupledDocumentEditor
.create( editorData, {
toolbarContainer: document.querySelector( '.toolbar-container' ),
editableContainer: document.querySelector( '.editable-container' )
} )
.then( editor => { .then( editor => {
document.querySelector( '.toolbar-container' ).appendChild( editor.ui.view.toolbar.element );
window.editor = editor; window.editor = editor;
} ) } )
.catch( err => { .catch( err => {
......
tests/manual/ckeditor.html
View file @ 2bec9fc9
...@@ -2,7 +2,48 @@ ...@@ -2,7 +2,48 @@
<div class="toolbar-container"></div> <div class="toolbar-container"></div>
<h2>The editable</h2> <h2>The editable</h2>
<div class="editable-container"></div> <div class="editable-container">
<div id="editor">
<h2>About CKEditor&nbsp;5</h2>
<p>This is <a href="https://ckeditor.com">CKEditor&nbsp;5</a>.</p>
<figure class="image">
<img src="./sample.jpg" alt="Autumn fields" />
</figure>
<p>After more than 2 years of building the next generation editor from scratch and closing over 980 tickets,
we created a highly <strong>extensible and flexible architecture</strong> which consists of an <strong>amazing
editing framework</strong> and <strong>editing solutions</strong> that will be built on top of it.</p>
<p>We explained this design choice in
<a href="https://medium.com/content-uneditable/ckeditor-5-the-future-of-rich-text-editing-2b9300f9df2c">&ldquo;CKEditor 5:
The future of rich text editing&ldquo;</a>:</p>
<blockquote><p>(…) we are changing our approach with CKEditor 5. We will no longer have only two solutions
available, instead CKEditor will be seen as a framework for editing solutions. At the same time, we will be
developing several out-of-the-box solutions based on it, which will be available to use in many different contexts.
It will be a real “one size fits all” approach, from little requirements, to super advanced full featured
applications.</p></blockquote>
<h3>Notes</h3>
<p><a href="https://ckeditor.com">CKEditor&nbsp;5</a> is <i>under heavy development</i> and this demo
is not production-ready software. For example:</p>
<ul>
<li><strong>Only Chrome, Opera and Safari are supported</strong>.</li>
<li>Firefox requires enabling the
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/onselectionchange">
&ldquo;dom.select_events.enabled&rdquo;</a> option.</li>
<li><a href="https://github.com/ckeditor/ckeditor5/issues/342">Support for pasting</a>
is under development (content filtering is unstable).</li>
</ul>
<p>It has <em>bugs</em> that we are aware of &mdash; and that we will be working on in the next few
iterations of the project. Stay tuned for some updates soon!</p>
</div>
</div>
<style> <style>
.editable-container, .editable-container,
......
tests/manual/ckeditor.js
View file @ 2bec9fc9
...@@ -5,51 +5,10 @@ ...@@ -5,51 +5,10 @@
import DecoupledDocumentEditor from '../../build/ckeditor'; import DecoupledDocumentEditor from '../../build/ckeditor';
const editorData = `<h2>About CKEditor&nbsp;5</h2> DecoupledDocumentEditor.create( document.querySelector( '#editor' ) )
<p>This is <a href="https://ckeditor.com">CKEditor&nbsp;5</a>.</p>
<figure class="image">
<img src="./sample.jpg" alt="Autumn fields" />
</figure>
<p>After more than 2 years of building the next generation editor from scratch and closing over 980 tickets,
we created a highly <strong>extensible and flexible architecture</strong> which consists of an <strong>amazing
editing framework</strong> and <strong>editing solutions</strong> that will be built on top of it.</p>
<p>We explained this design choice in
<a href="https://medium.com/content-uneditable/ckeditor-5-the-future-of-rich-text-editing-2b9300f9df2c">&ldquo;CKEditor 5:
The future of rich text editing&ldquo;</a>:</p>
<blockquote><p>(…) we are changing our approach with CKEditor 5. We will no longer have only two solutions
available, instead CKEditor will be seen as a framework for editing solutions. At the same time, we will be
developing several out-of-the-box solutions based on it, which will be available to use in many different contexts.
It will be a real “one size fits all” approach, from little requirements, to super advanced full featured
applications.</p></blockquote>
<h3>Notes</h3>
<p><a href="https://ckeditor.com">CKEditor&nbsp;5</a> is <i>under heavy development</i> and this demo
is not production-ready software. For example:</p>
<ul>
<li><strong>Only Chrome, Opera and Safari are supported</strong>.</li>
<li>Firefox requires enabling the
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/onselectionchange">
&ldquo;dom.select_events.enabled&rdquo;</a> option.</li>
<li><a href="https://github.com/ckeditor/ckeditor5/issues/342">Support for pasting</a>
is under development (content filtering is unstable).</li>
</ul>
<p>It has <em>bugs</em> that we are aware of &mdash; and that we will be working on in the next few
iterations of the project. Stay tuned for some updates soon!</p>`;
DecoupledDocumentEditor
.create( editorData, {
toolbarContainer: document.querySelector( '.toolbar-container' ),
editableContainer: document.querySelector( '.editable-container' )
} )
.then( editor => { .then( editor => {
document.querySelector( '.toolbar-container' ).appendChild( editor.ui.view.toolbar.element );
window.editor = editor; window.editor = editor;
} ) } )
.catch( err => { .catch( err => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment