From a422e0983476d7da4960c092f79556ff3f581bb7 Mon Sep 17 00:00:00 2001 From: Dominik Szczepaniak Date: Thu, 18 Apr 2019 12:39:42 +0200 Subject: [PATCH 1/6] Change the way of data initialize. --- src/ckeditor.js | 10 ++++++---- tests/ckeditor.js | 13 ------------- 2 files changed, 6 insertions(+), 17 deletions(-) diff --git a/src/ckeditor.js b/src/ckeditor.js index 3b4c372..293618d 100644 --- a/src/ckeditor.js +++ b/src/ckeditor.js @@ -7,9 +7,14 @@ export default { name: 'ckeditor', + domContainer: null, render( createElement ) { - return createElement( this.tagName ); + return createElement(this.tagName, { + domProps: { + innerHTML: this.value || '' + } + }); }, props: { @@ -49,9 +54,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/ckeditor.js b/tests/ckeditor.js index 9bf9172..a58874a 100644 --- a/tests/ckeditor.js +++ b/tests/ckeditor.js @@ -104,19 +104,6 @@ describe( 'CKEditor Component', () => { expect( vm.value ).to.equal( '' ); } ); - it( 'should set the initial data', done => { - const setDataStub = sandbox.stub( MockEditor.prototype, 'setData' ); - const { wrapper } = createComponent( { - value: 'foo' - } ); - - Vue.nextTick( () => { - sinon.assert.calledWithExactly( setDataStub, 'foo' ); - - wrapper.destroy(); - done(); - } ); - } ); } ); describe( '#tagName', () => { From 9b557ca9eb15baf7256f562e35066f0fc9c2e86f Mon Sep 17 00:00:00 2001 From: Dominik Szczepaniak Date: Thu, 18 Apr 2019 12:52:23 +0200 Subject: [PATCH 2/6] Remove unnecessary variable. --- src/ckeditor.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/ckeditor.js b/src/ckeditor.js index 293618d..48fe69e 100644 --- a/src/ckeditor.js +++ b/src/ckeditor.js @@ -7,7 +7,6 @@ export default { name: 'ckeditor', - domContainer: null, render( createElement ) { return createElement(this.tagName, { From 1ce93871f0f375df6ba7afc4422e02aa47feb462 Mon Sep 17 00:00:00 2001 From: Dominik Szczepaniak Date: Thu, 18 Apr 2019 15:17:07 +0200 Subject: [PATCH 3/6] Restore and fix test for check initial data. Check if setData() wasn't invoked. --- tests/_utils/mockeditor.js | 2 ++ tests/ckeditor.js | 14 ++++++++++++++ 2 files changed, 16 insertions(+) diff --git a/tests/_utils/mockeditor.js b/tests/_utils/mockeditor.js index 16c895f..f1aecf2 100644 --- a/tests/_utils/mockeditor.js +++ b/tests/_utils/mockeditor.js @@ -16,6 +16,7 @@ export default class MockEditor { this.element = el; this.config = config; this.data = ''; + this.setDataCounter = 0; this.model = { document: new ModelDocument() @@ -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 a58874a..551a995 100644 --- a/tests/ckeditor.js +++ b/tests/ckeditor.js @@ -104,6 +104,20 @@ describe( 'CKEditor Component', () => { expect( vm.value ).to.equal( '' ); } ); + it( 'should set the initial data by using innerHTML, not by "setData()"', done => { + const { wrapper, vm } = createComponent( { + value: 'foo' + } ); + + Vue.nextTick( () => { + + expect( vm.$el.innerHTML ).to.equal( 'foo' ); + expect( vm.instance.setDataCounter).to.equal(0); + + wrapper.destroy(); + done(); + } ); + } ); } ); describe( '#tagName', () => { From 49b8f6d0321fc0ad44d68a7e5d9d169da8aad720 Mon Sep 17 00:00:00 2001 From: Dominik Szczepaniak Date: Fri, 19 Apr 2019 09:25:22 +0200 Subject: [PATCH 4/6] Fix code style --- src/ckeditor.js | 2 +- tests/ckeditor.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ckeditor.js b/src/ckeditor.js index 48fe69e..f463be4 100644 --- a/src/ckeditor.js +++ b/src/ckeditor.js @@ -9,7 +9,7 @@ export default { name: 'ckeditor', render( createElement ) { - return createElement(this.tagName, { + return createElement( this.tagName, { domProps: { innerHTML: this.value || '' } diff --git a/tests/ckeditor.js b/tests/ckeditor.js index 551a995..58a1239 100644 --- a/tests/ckeditor.js +++ b/tests/ckeditor.js @@ -112,7 +112,7 @@ describe( 'CKEditor Component', () => { Vue.nextTick( () => { expect( vm.$el.innerHTML ).to.equal( 'foo' ); - expect( vm.instance.setDataCounter).to.equal(0); + expect( vm.instance.setDataCounter ).to.equal(0); wrapper.destroy(); done(); From e5079805f873c6d1983af534ca321b791e5a958e Mon Sep 17 00:00:00 2001 From: Dominik Szczepaniak Date: Fri, 19 Apr 2019 09:59:36 +0200 Subject: [PATCH 5/6] Add link to the related issue --- tests/ckeditor.js | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/ckeditor.js b/tests/ckeditor.js index 58a1239..e2d687c 100644 --- a/tests/ckeditor.js +++ b/tests/ckeditor.js @@ -104,6 +104,7 @@ describe( 'CKEditor Component', () => { expect( vm.value ).to.equal( '' ); } ); + //See: https://github.com/ckeditor/ckeditor5-vue/issues/47 it( 'should set the initial data by using innerHTML, not by "setData()"', done => { const { wrapper, vm } = createComponent( { value: 'foo' From 9c9a6eca1a35fda5d15483c94f9f25029712920b Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Fri, 19 Apr 2019 14:56:54 +0200 Subject: [PATCH 6/6] Code refactoring and code style. --- src/ckeditor.js | 2 +- tests/_utils/mockeditor.js | 6 +++--- tests/ckeditor.js | 19 ++++++++++++------- tests/plugin/localcomponent.js | 2 +- 4 files changed, 17 insertions(+), 12 deletions(-) diff --git a/src/ckeditor.js b/src/ckeditor.js index 2cef09a..c40449d 100644 --- a/src/ckeditor.js +++ b/src/ckeditor.js @@ -17,7 +17,7 @@ export default { domProps: { innerHTML: this.value || '' } - }); + } ); }, props: { diff --git a/tests/_utils/mockeditor.js b/tests/_utils/mockeditor.js index f1aecf2..73e27f8 100644 --- a/tests/_utils/mockeditor.js +++ b/tests/_utils/mockeditor.js @@ -7,11 +7,11 @@ 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; @@ -24,7 +24,7 @@ export default class MockEditor { this.editing = { view: { - document: new ViewlDocument() + document: new ViewDocument() } }; } diff --git a/tests/ckeditor.js b/tests/ckeditor.js index 0d7ed17..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 { wrapper } = createComponent( { + const { wrapper, vm } = createComponent( { value: 'foo' } ); Vue.nextTick( () => { expect( vm.$el.innerHTML ).to.equal( 'foo' ); - expect( vm.instance.setDataCounter ).to.equal(0); + 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 {}