diff --git a/src/ckeditor.js b/src/ckeditor.js index fe2cbe8..c40449d 100644 --- a/src/ckeditor.js +++ b/src/ckeditor.js @@ -13,7 +13,11 @@ export default { name: 'ckeditor', render( createElement ) { - return createElement( this.tagName ); + return createElement( this.tagName, { + domProps: { + innerHTML: this.value || '' + } + } ); }, props: { @@ -58,9 +62,6 @@ export default { // Save the reference to the instance for further use. this.instance = editor; - // Set the initial data of the editor. - editor.setData( this.value ); - // Set initial disabled state. editor.isReadOnly = this.disabled; diff --git a/tests/_utils/mockeditor.js b/tests/_utils/mockeditor.js index 16c895f..73e27f8 100644 --- a/tests/_utils/mockeditor.js +++ b/tests/_utils/mockeditor.js @@ -7,15 +7,16 @@ export class ModelDocument { on() {} } -export class ViewlDocument { +export class ViewDocument { on() {} } -export default class MockEditor { +export class MockEditor { constructor( el, config ) { this.element = el; this.config = config; this.data = ''; + this.setDataCounter = 0; this.model = { document: new ModelDocument() @@ -23,7 +24,7 @@ export default class MockEditor { this.editing = { view: { - document: new ViewlDocument() + document: new ViewDocument() } }; } @@ -39,6 +40,7 @@ export default class MockEditor { } setData( data ) { + this.setDataCounter++; this.data = data; } diff --git a/tests/ckeditor.js b/tests/ckeditor.js index 5f6917c..633d2fc 100644 --- a/tests/ckeditor.js +++ b/tests/ckeditor.js @@ -8,8 +8,11 @@ import Vue from 'vue'; import { mount } from '@vue/test-utils'; import CKEditorComponent from '../src/ckeditor'; -import MockEditor from './_utils/mockeditor'; -import { ModelDocument, ViewlDocument } from './_utils/mockeditor'; +import { + MockEditor, + ModelDocument, + ViewDocument +} from './_utils/mockeditor'; describe( 'CKEditor Component', () => { let sandbox, wrapper, vm; @@ -69,7 +72,8 @@ describe( 'CKEditor Component', () => { const { wrapper } = createComponent(); setTimeout( () => { - consoleErrorStub.restore() + consoleErrorStub.restore(); + expect( consoleErrorStub.calledOnce ).to.be.true; expect( consoleErrorStub.firstCall.args[ 0 ] ).to.equal( error ); @@ -114,16 +118,17 @@ describe( 'CKEditor Component', () => { expect( vm.value ).to.equal( '' ); } ); + // See: https://github.com/ckeditor/ckeditor5-vue/issues/47. it( 'should set the initial data', done => { Vue.config.errorHandler = done; - const setDataStub = sandbox.stub( MockEditor.prototype, 'setData' ); - const { wrapper } = createComponent( { + const { wrapper, vm } = createComponent( { value: 'foo' } ); Vue.nextTick( () => { - sinon.assert.calledWithExactly( setDataStub, 'foo' ); + expect( vm.$el.innerHTML ).to.equal( 'foo' ); + expect( vm.instance.setDataCounter ).to.equal( 0 ); wrapper.destroy(); done(); @@ -304,7 +309,7 @@ describe( 'CKEditor Component', () => { it( 'emits #focus when editor editable is focused', done => { Vue.config.errorHandler = done; - sandbox.stub( ViewlDocument.prototype, 'on' ); + sandbox.stub( ViewDocument.prototype, 'on' ); Vue.nextTick( () => { const on = vm.instance.editing.view.document.on; @@ -330,7 +335,7 @@ describe( 'CKEditor Component', () => { it( 'emits #blur when editor editable is focused', done => { Vue.config.errorHandler = done; - sandbox.stub( ViewlDocument.prototype, 'on' ); + sandbox.stub( ViewDocument.prototype, 'on' ); Vue.nextTick( () => { const on = vm.instance.editing.view.document.on; diff --git a/tests/plugin/localcomponent.js b/tests/plugin/localcomponent.js index f0e10ec..a678ef5 100644 --- a/tests/plugin/localcomponent.js +++ b/tests/plugin/localcomponent.js @@ -6,7 +6,7 @@ import Vue from 'vue'; import { mount } from '@vue/test-utils'; import CKEditor from '../../src/plugin'; -import MockEditor from '../_utils/mockeditor'; +import { MockEditor } from '../_utils/mockeditor'; class FooEditor extends MockEditor {} class BarEditor extends MockEditor {}