ソースを参照

Added tests for InlineEditor.

Aleksander Nowodzinski 8 年 前
コミット
4c488b40d1

+ 22 - 0
packages/ckeditor5-editor-inline/tests/.jshintrc

@@ -0,0 +1,22 @@
+{
+  "esnext": true,
+  "expr": true,
+  "immed": true,
+  "loopfunc": true,
+  "noarg": true,
+  "nonbsp": true,
+  "strict": "implied",
+  "undef": true,
+  "unused": true,
+  "varstmt": true,
+  "globals": {
+    "after": false,
+    "afterEach": false,
+    "before": false,
+    "beforeEach": false,
+    "describe": false,
+    "expect": false,
+    "it": false,
+    "sinon": false
+  }
+}

+ 183 - 0
packages/ckeditor5-editor-inline/tests/inline.js

@@ -0,0 +1,183 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals document */
+
+import InlineEditorUI from '../src/inlineeditorui';
+import InlineEditorUIView from '../src/inlineeditoruiview';
+
+import HtmlDataProcessor from '@ckeditor/ckeditor5-engine/src/dataprocessor/htmldataprocessor';
+
+import InlineEditor from '../src/inline';
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
+
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+import count from '@ckeditor/ckeditor5-utils/src/count';
+
+testUtils.createSinonSandbox();
+
+describe( 'InlineEditor', () => {
+	let editor, editorElement;
+
+	beforeEach( () => {
+		editorElement = document.createElement( 'div' );
+		editorElement.innerHTML = '<p><strong>foo</strong> bar</p>';
+
+		document.body.appendChild( editorElement );
+	} );
+
+	afterEach( () => {
+		editorElement.remove();
+	} );
+
+	describe( 'constructor()', () => {
+		beforeEach( () => {
+			editor = new InlineEditor( editorElement );
+		} );
+
+		it( 'creates a single div editable root in the view', () => {
+			expect( editor.editing.view.getRoot() ).to.have.property( 'name', 'div' );
+		} );
+
+		it( 'creates a single document root', () => {
+			expect( count( editor.document.getRootNames() ) ).to.equal( 1 );
+			expect( editor.document.getRoot() ).to.have.property( 'name', '$root' );
+		} );
+
+		it( 'creates the UI using BoxedEditorUI classes', () => {
+			expect( editor.ui ).to.be.instanceof( InlineEditorUI );
+			expect( editor.ui.view ).to.be.instanceof( InlineEditorUIView );
+		} );
+
+		it( 'uses HTMLDataProcessor', () => {
+			expect( editor.data.processor ).to.be.instanceof( HtmlDataProcessor );
+		} );
+	} );
+
+	describe( 'create()', () => {
+		beforeEach( function() {
+			return InlineEditor.create( editorElement, {
+					plugins: [ Paragraph, Bold ]
+				} )
+				.then( newEditor => {
+					editor = newEditor;
+				} );
+		} );
+
+		afterEach( () => {
+			return editor.destroy();
+		} );
+
+		it( 'creates an instance which inherits from the InlineEditor', () => {
+			expect( editor ).to.be.instanceof( InlineEditor );
+		} );
+
+		it( 'creates element–less UI view', () => {
+			expect( editor.ui.view.element ).to.be.null;
+		} );
+
+		it( 'attaches editable UI as view\'s DOM root', () => {
+			expect( editor.editing.view.getDomRoot() ).to.equal( editor.ui.view.editable.element );
+		} );
+
+		it( 'loads data from the editor element', () => {
+			expect( editor.getData() ).to.equal( '<p><strong>foo</strong> bar</p>' );
+		} );
+	} );
+
+	describe( 'create - events', () => {
+		afterEach( () => {
+			return editor.destroy();
+		} );
+
+		it( 'fires all events in the right order', () => {
+			const fired = [];
+
+			function spy( evt ) {
+				fired.push( evt.name );
+			}
+
+			class EventWatcher extends Plugin {
+				init() {
+					this.editor.on( 'pluginsReady', spy );
+					this.editor.on( 'uiReady', spy );
+					this.editor.on( 'dataReady', spy );
+					this.editor.on( 'ready', spy );
+				}
+			}
+
+			return InlineEditor.create( editorElement, {
+					plugins: [ EventWatcher ]
+				} )
+				.then( ( newEditor ) => {
+					expect( fired ).to.deep.equal( [ 'pluginsReady', 'uiReady', 'dataReady', 'ready' ] );
+
+					editor = newEditor;
+				} );
+		} );
+
+		it( 'fires dataReady once data is loaded', () => {
+			let data;
+
+			class EventWatcher extends Plugin {
+				init() {
+					this.editor.on( 'dataReady', () => {
+						data = this.editor.getData();
+					} );
+				}
+			}
+
+			return InlineEditor.create( editorElement, {
+					plugins: [ EventWatcher, Paragraph, Bold ]
+				} )
+				.then( ( newEditor ) => {
+					expect( data ).to.equal( '<p><strong>foo</strong> bar</p>' );
+
+					editor = newEditor;
+				} );
+		} );
+
+		it( 'fires uiReady once UI is ready', () => {
+			let isReady;
+
+			class EventWatcher extends Plugin {
+				init() {
+					this.editor.on( 'uiReady', () => {
+						isReady = this.editor.ui.view.ready;
+					} );
+				}
+			}
+
+			return InlineEditor.create( editorElement, {
+					plugins: [ EventWatcher ]
+				} )
+				.then( ( newEditor ) => {
+					expect( isReady ).to.be.true;
+
+					editor = newEditor;
+				} );
+		} );
+	} );
+
+	describe( 'destroy', () => {
+		beforeEach( function() {
+			return InlineEditor.create( editorElement, { plugins: [ Paragraph ] } )
+				.then( newEditor => {
+					editor = newEditor;
+				} );
+		} );
+
+		it( 'sets the data back to the editor element', () => {
+			editor.setData( '<p>foo</p>' );
+
+			return editor.destroy()
+				.then( () => {
+					expect( editorElement.innerHTML ).to.equal( '<p>foo</p>' );
+				} );
+		} );
+	} );
+} );

+ 1 - 1
packages/ckeditor5-editor-inline/tests/manual/inline.html

@@ -3,7 +3,7 @@
 	<button id="initEditor">Init editor</button>
 </p>
 
-<div id="editor" class="custom-class" custom-attr="foo" contenteditable="true">
+<div id="editor" contenteditable="true" class="custom-class" custom-attr="foo">
 	<h2>Hello world!</h2>
 	<p>This is an editor instance.</p>
 </div>