Zombie.js unable to access dataset property of DOM elements

Question

I have a page which contains a rich-text editor. I used CKEditor for this. You pass it a div element and it loads the editor into that element.

Now I wanted to write integration tests for that page. I am using zombie.js with version 4.2.1 (old, I know, but I'm stuck with it) for that purpose. However, I get an error just trying to load the page. The problem apparently happens while trying to load editor into the div element. This is the relevant output:

[some other resources loading]
  zombie GET http://localhost:10003/js/lib/ckeditor.js => 200 +0ms
  zombie GET http://localhost:10003/js/pages/categories/init.js => 200 +0ms
  zombie http://localhost:10003/js/lib/ckeditor.js:6623
                e.dataset.ckeFiller = true;
                                    ^

TypeError: Cannot set property 'ckeFiller' of undefined
    at au (http://localhost:10003/js/lib/ckeditor.js:6623:37)
    at Module.<anonymous> (http://localhost:10003/js/lib/ckeditor.js:7326:24)
    at n (http://localhost:10003/js/lib/ckeditor.js:57:22)
    at http://localhost:10003/js/lib/ckeditor.js:100:20
    at http://localhost:10003/js/lib/ckeditor.js:101:10
    at t (http://localhost:10003/js/lib/ckeditor.js:47:258)
    at http://localhost:10003/js/lib/ckeditor.js:48:7
    at Script.runInContext (vm.js:133:20)
    at Object.runInContext (vm.js:311:6)
    at window._evaluate (/home/laura/Projekte/fricke/hybristools/node_modules/zombie/lib/document.js:253:75)
    in http://localhost:10003/categories +68ms
Debug-Output hier:
undefined
{ http://localhost:10003/js/lib/ckeditor.js:6623
                e.dataset.ckeFiller = true;
                                    ^

TypeError: Cannot set property 'ckeFiller' of undefined
    at au (http://localhost:10003/js/lib/ckeditor.js:6623:37)
    at Module.<anonymous> (http://localhost:10003/js/lib/ckeditor.js:7326:24)
    at n (http://localhost:10003/js/lib/ckeditor.js:57:22)
    at http://localhost:10003/js/lib/ckeditor.js:100:20
    at http://localhost:10003/js/lib/ckeditor.js:101:10
    at t (http://localhost:10003/js/lib/ckeditor.js:47:258)
    at http://localhost:10003/js/lib/ckeditor.js:48:7
    at Script.runInContext (vm.js:133:20)
    at Object.runInContext (vm.js:311:6)
    at window._evaluate (/home/laura/Projekte/fricke/hybristools/node_modules/zombie/lib/document.js:253:75)
    in http://localhost:10003/categories
  cause:
   http://localhost:10003/js/lib/ckeditor.js:6623
                   e.dataset.ckeFiller = true;
                                       ^

   TypeError: Cannot set property 'ckeFiller' of undefined
       at au (http://localhost:10003/js/lib/ckeditor.js:6623:37)
       at Module.<anonymous> (http://localhost:10003/js/lib/ckeditor.js:7326:24)
       at n (http://localhost:10003/js/lib/ckeditor.js:57:22)
       at http://localhost:10003/js/lib/ckeditor.js:100:20
       at http://localhost:10003/js/lib/ckeditor.js:101:10
       at t (http://localhost:10003/js/lib/ckeditor.js:47:258)
       at http://localhost:10003/js/lib/ckeditor.js:48:7
       at Script.runInContext (vm.js:133:20)
       at Object.runInContext (vm.js:311:6)
       at window._evaluate (/home/laura/Projekte/fricke/hybristools/node_modules/zombie/lib/document.js:253:75)
       in http://localhost:10003/categories,
  isOperational: true }

I know that the error is not related to CKEditor because I tried it with another rich-text editor, which gave me the exact same error (only the property name was different).

The error apparently happens while trying to set the value of the HTML property "data-cke-filler" of a br element. This is the element:

That element is inserted into the editor at the time of creation, it represents the content of the editor, which is empty at the beginning.

I tried to use zombies debugging capabilites, however, as the error occurs while the site loads I don't really get a chance to output anything useful. As far as I am aware, zombie.js should be able to handle loading this page.

So my question is: What is causing this error and how can I fix it?

Let me know if you need more information.

Thanks.

Edit:

Here is the code where I load the page (it's written in CoffeeScript):

require 'should'
Browser = require '../../support/browser'

describe 'editor page', ->

  browser = new Browser({debug: true})

  before (done) ->
    browser.debug()
    browser.visitLoggedIn('/', {name: 'tester', password: 'secret'})
      .then (done) ->
        browser.visitPage '/editor' # this is what doesn't work
      .then (done) ->
        console.log 'page loaded'
      .catch (error) ->
        console.error error

  it 'things should appear', ->
    ...

The visitLoggedIn method is a custom method that just creates necessary cookies for browsing the application as an authenticated user and visits the page using visitPage. visitPage uses zombies visit method. These work fine in all the other integration tests of this application.

---

Edit 2: So I managed to "mock" CKEdtor using this answer. This isn't exactly what I wanted, but I decided to try to work with this for now. However, now I get the exact same error! This time the error is thrown inside my own code:

# These are two functions that are run shortly after inserting the editor into the page,
# so basically while the page is still loading. 
getLanguageChoice: -> # This one is executed first
    document.getElementById('language').value

  getMandantChoice: -> # This one second
    document.getElementById('shopClient').dataset.name # The error is thrown here

This is the exact error:

TypeError: Cannot read property 'name' of undefined
    at Object.CategoriesView.getMandantChoice (http://localhost:10003/js/pages/categories/view.js:49:59)
    at http://localhost:10003/js/pages/categories/app.js:22:97
    at process._tickCallback (internal/process/next_tick.js:68:7)

This doesn't make any sense to me. Does this mean that zombie somehow can't access the values of data-* attributes? Maybe someone is knowledgeable about zombie and can provide further insight?

Answer 1

After further looking around with the new insights I gained, I found this ticket on the Github page of the project. It looks like the dataset property is not implemented in an underlying library in the used version. As I am not able to upgrade, it's just not possible to load the page like it is...

To work around this, I will refactor my code to not use the data-* property. This is luckily not tied to too much work in my case.