search

ckeditor / ckeditor4-angular

Official CKEditor 4 Angular component.
Other
55 stars 32 forks source link

Extend component to output additional CKEditor events #21

Closed ezintz closed 4 years ago

ezintz commented 5 years ago

Hello everyone,

I have been extending the component with a few events CKEditor is aware of. Currently the tests are failing because it seems that some resources are not loaded. I would like to fix this as well, but I am not really sure how and I would appreciate any advice.

Here the test results (please note that I stripped the trace a bit):

CKEditorComponent type="divarea" when component is ready editor event paste should emit component paste

TypeError: Cannot read property 'dataTransfer' of undefined
    at a.<anonymous> (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:692:494)
    at a.h (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:10:70)
    at a.<anonymous> (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:11:433)
    at a.window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editor.CKEDITOR.editor.fire (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:13:97)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/ckeditor/ckeditor.component.spec.ts:270:26)

CKEditorComponent type="divarea" when component is ready editor event dragend should emit component dragend

TypeError: Cannot read property '$' of undefined
    at Object.initDragDataTransfer (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:705:241)
    at a.h (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:10:70)
    at a.<anonymous> (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:11:433)
    at a.window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editor.CKEDITOR.editor.fire (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:13:97)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/ckeditor/ckeditor.component.spec.ts:281:26)

CKEditorComponent type="divarea" when component is ready editor event dragstart should emit component dragstart

TypeError: Cannot read property '$' of undefined
    at Object.initDragDataTransfer (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:705:241)
    at a.<anonymous> (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:688:145)
    at a.h (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:10:70)
    at a.<anonymous> (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:11:433)
    at a.window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editor.CKEDITOR.editor.fire (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:13:97)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/ckeditor/ckeditor.component.spec.ts:292:26)

CKEditorComponent type="divarea" when component is ready editor event drop should emit component drop

TypeError: Cannot read property '$' of undefined
    at Object.initDragDataTransfer (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:705:241)
    at a.h (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:10:70)
    at a.<anonymous> (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:11:433)
    at a.window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editor.CKEDITOR.editor.fire (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:13:97)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/ckeditor/ckeditor.component.spec.ts:303:26)

CKEditorComponent type="divarea" when component is ready editor event fileUploadRequest should emit component fileUploadRequest

TypeError: Cannot read property 'fileLoader' of undefined
    at a.<anonymous> (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:824:381)
    at a.h (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:10:70)
    at a.<anonymous> (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:11:433)
    at a.window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editor.CKEDITOR.editor.fire (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:13:97)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/ckeditor/ckeditor.component.spec.ts:317:26)

CKEditorComponent type="divarea" when component is ready editor event fileUploadResponse should emit component fileUploadResponse

TypeError: Cannot read property 'fileLoader' of undefined
    at a.<anonymous> (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:825:390)
    at a.h (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:10:70)
    at a.<anonymous> (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:11:433)
    at a.window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editor.CKEDITOR.editor.fire (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:13:97)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/ckeditor/ckeditor.component.spec.ts:331:26)

CKEditorComponent type="inline" when component is ready editor event paste should emit component paste

TypeError: Cannot read property 'dataTransfer' of undefined
    at a.<anonymous> (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:692:494)
    at a.h (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:10:70)
    at a.<anonymous> (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:11:433)
    at a.window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editor.CKEDITOR.editor.fire (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:13:97)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/ckeditor/ckeditor.component.spec.ts:270:26)

CKEditorComponent type="inline" when component is ready editor event dragend should emit component dragend

TypeError: Cannot read property '$' of undefined
    at Object.initDragDataTransfer (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:705:241)
    at a.h (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:10:70)
    at a.<anonymous> (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:11:433)
    at a.window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editor.CKEDITOR.editor.fire (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:13:97)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/ckeditor/ckeditor.component.spec.ts:281:26)

CKEditorComponent type="inline" when component is ready editor event dragstart should emit component dragstart

TypeError: Cannot read property '$' of undefined
    at Object.initDragDataTransfer (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:705:241)
    at a.<anonymous> (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:688:145)
    at a.h (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:10:70)
    at a.<anonymous> (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:11:433)
    at a.window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editor.CKEDITOR.editor.fire (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:13:97)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/ckeditor/ckeditor.component.spec.ts:292:26)

CKEditorComponent type="inline" when component is ready editor event drop should emit component drop

TypeError: Cannot read property '$' of undefined
    at Object.initDragDataTransfer (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:705:241)
    at a.h (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:10:70)
    at a.<anonymous> (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:11:433)
    at a.window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editor.CKEDITOR.editor.fire (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:13:97)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/ckeditor/ckeditor.component.spec.ts:303:26)

CKEditorComponent type="inline" when component is ready editor event fileUploadRequest should emit component fileUploadRequest

TypeError: Cannot read property 'fileLoader' of undefined
    at a.<anonymous> (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:824:381)
    at a.h (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:10:70)
    at a.<anonymous> (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:11:433)
    at a.window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editor.CKEDITOR.editor.fire (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:13:97)

CKEditorComponent type="inline" when component is ready editor event fileUploadResponse should emit component fileUploadResponse

TypeError: Cannot read property 'fileLoader' of undefined
    at a.<anonymous> (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:825:390)
    at a.h (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:10:70)
    at a.<anonymous> (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:11:433)
    at a.window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editor.CKEDITOR.editor.fire (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:13:97)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/ckeditor/ckeditor.component.spec.ts:331:26)

Are those errors the reason why they have not been added from beginning?

Closes #7.

f1ames commented 5 years ago

Hello @ezintz, great to see that you would like to improve the integration! (btw. there is an issue for exposing those events, not sure if you have seen it - #7)

From what I can see this errors are caused by the component.instance.fire( 'eventName' ). The reason for this is that CKEditor listeners use some data from event object and in the tests you do not pass any additional data to fire() method. And so:

TypeError: Cannot read property 'dataTransfer' of undefined

This error is caused by not stubbing/mocking paste event data. You can see how it is done, for example, in clipboard plugin paste tests. The function to mock event data there is mockPasteEvent. It is not available here so you won't be able to use directly, but it should be enough to mock something like { $: { clipboardData: {} } }.

TypeError: Cannot read property '$' of undefined
    at Object.initDragDataTransfer

This is very similar case to the one above. Take a look at clipboard plugin drop tests and mockDropEvent() function.

TypeError: Cannot read property 'fileLoader' of undefined

Similar story here, please take a look at filetools tests and how fileUploadResponse and fileUploadRequest are used.

The easiest way is to look at ckeditor-dev repository, to tests folder and try to find usage like fire( 'eventName' so you can see how this events are used and mocked in other tests.

ezintz commented 5 years ago

Hello and thank your for your quick answers, for sure it make sense to pass in a correct event object. I was just duplicating the other test without using my brain. No I have not seen that there is actually an issue for this events to be integrated, we just need them ourselves (;

I have been extending the testing tools with exact same logic from the files you have been linking, but without much success. The "dataTransfer error" is gone but replaced by another one. After inspecting the original tests it seems the editable is firing the event, which would work but the spy is not working any more. Any ideas? I believe it belongs to that part where I am trying to access the CKEDITOR.tools..

TypeError: Cannot read property 'indexOf' of undefined
    at a.<anonymous> (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:693:384)
    at a.h (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:10:70)
    at a.<anonymous> (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:11:433)
    at a.window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editor.CKEDITOR.editor.fire (https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js:13:97)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/ckeditor/ckeditor.component.spec.ts:273:26)

Very hard to read the minified version.. would it make sense to add the npm ckeditor package and use it?

ezintz commented 4 years ago

Hello 😀,

I finally 🙄 fixed all the tests for the events I have been adding. Please let me know if there is anything else is needed.

Can't wait to see this happen, so I can change to the current package. 🤭

f1ames commented 4 years ago

Rebased onto latest master.

f1ames commented 4 years ago

Merge commit is db2a8da due to some unpleasant surprise from our GH integration :see_no_evil: