Extend component to output additional CKEditor events #21

ezintz · 2019-04-28T11:01:26Z

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 · 2019-04-29T12:59:12Z

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 · 2019-05-01T00:26:57Z

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 · 2020-04-11T08:59:40Z

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 · 2020-05-05T14:18:14Z

Rebased onto latest master.

f1ames

@ezintz I spent some time refactoring and simplifying unit tests since we don't need all the magic related to mocking drag and drop. So I kept only sufficient stuff to keep it simple.

There is some issue with emulating drop on Firefox, but since it works (confirmed with manual tests and with other browsers), I just decided to skip this one check for FF. Also as for initial drag/drop test it didn't worked since done() was called outside async/promised stuff and it was executed (making test pass) before asynchronous execution happened.

I also did some minor rewording here and there.

Overall, great job with this PR! Thank you for contributing once again :tada: :clap: :+1:

Extend component to output additional CKEditor events

f1ames · 2020-05-05T15:09:50Z

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

f1ames self-assigned this Apr 29, 2019

f1ames removed their assignment Apr 29, 2019

ezintz closed this May 5, 2019

ezintz reopened this Apr 11, 2020

ezintz mentioned this pull request Apr 11, 2020

Expose popular events via event emitters #7

Closed

f1ames self-requested a review May 4, 2020 11:36

f1ames self-assigned this May 4, 2020

ezintz and others added 9 commits May 5, 2020 16:01

Extend component to output additional CKEditor events

99540f9

Extend tests for paste by mocking "paste"-event

e77813c

Fix tests: paste, dragStart, drop, dragEnd

6038431

Add tests: fileUploadRequest, fileUploadResponse

67de9e2

Minor rewording and reformatting.

bf2238e

Simplified unit tests.

8f06ac8

Added support for 'afterPaste' event.

0693b7e

Sample console messages rewording.

08083b6

Simplified tests.

2fa611d

f1ames force-pushed the master branch from dba848d to 2fa611d Compare May 5, 2020 14:15

Fix after rebase.

f24d86c

f1ames approved these changes May 5, 2020

View reviewed changes

CKEditorBot unassigned f1ames May 5, 2020

Changelog entry.

cccbf59

f1ames merged commit c64fc09 into ckeditor:master May 5, 2020

f1ames added a commit that referenced this pull request May 5, 2020

Merge pull request #21 from ezintz/master

db2a8da

Extend component to output additional CKEditor events

f1ames mentioned this pull request May 6, 2020

Paste and afterPaste unit tests fails on IE 11 #104

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Extend component to output additional CKEditor events #21

Extend component to output additional CKEditor events #21

ezintz commented Apr 28, 2019 •

edited by f1ames

Loading

f1ames commented Apr 29, 2019

ezintz commented May 1, 2019 •

edited

Loading

ezintz commented Apr 11, 2020

f1ames commented May 5, 2020

f1ames left a comment

f1ames commented May 5, 2020

Extend component to output additional CKEditor events #21

Extend component to output additional CKEditor events #21

Conversation

ezintz commented Apr 28, 2019 • edited by f1ames Loading

f1ames commented Apr 29, 2019

ezintz commented May 1, 2019 • edited Loading

ezintz commented Apr 11, 2020

f1ames commented May 5, 2020

f1ames left a comment

Choose a reason for hiding this comment

f1ames commented May 5, 2020

ezintz commented Apr 28, 2019 •

edited by f1ames

Loading

ezintz commented May 1, 2019 •

edited

Loading