javascript - Zombie.js 无法访问 DOM 元素的数据集属性

Question

我有一个包含富文本编辑器的页面。为此，我使用了 CKEditor。您将一个 div 元素传递给它，它会将编辑器加载到该元素中。

现在我想为该页面编写集成测试。为此，我正在使用版本为 4.2.1 的 zombie.js(旧的，我知道，但我坚持使用它)。但是，我在尝试加载页面时遇到错误。问题显然是在尝试将编辑器加载到 div 元素时发生的。这是相关的输出:

[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 }

我知道错误与 CKEditor 无关，因为我用另一个富文本编辑器尝试过，它给了我完全相同的错误(只是属性名称不同)。

错误显然是在尝试设置 br 元素的 HTML 属性“data-cke-filler”的值时发生的。这是元素:

该元素在创建时插入到编辑器中，它代表编辑器的内容，开始时为空。

我尝试使用 zombies 调试功能，但是，由于在站点加载时发生错误，我真的没有机会输出任何有用的信息。据我所知，zombie.js 应该能够处理加载此页面。

所以我的问题是:是什么导致了这个错误，我该如何解决？

如果您需要更多信息，请告诉我。

谢谢。

编辑:

这是我加载页面的代码(它是用 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', ->
    ...

visitLoggedIn 方法是一种自定义方法，它只创建必要的 cookie，以便作为经过身份验证的用户浏览应用程序并使用 visitPage 访问页面。 visitPage 使用 zombie visit 方法。这些在该应用程序的所有其他集成测试中工作正常。

---

编辑 2:所以我设法使用 this answer 来“模拟”CKEdtor .这不是我想要的，但我决定暂时尝试使用它。但是，现在我得到了完全相同的错误!这次错误是在我自己的代码中抛出的:

# 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

这是确切的错误:

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)

这对我来说没有任何意义。这是否意味着 zombie 无法访问 data-* 属性的值？也许有人对 zombie 很了解并且可以提供进一步的见解？

Answer 1

在进一步了解我获得的新见解后，我发现了 this ticket在项目的 Github 页面上。看起来数据集属性未在所用版本的基础库中实现。由于我无法升级，因此无法像现在这样加载页面...

为了解决这个问题，我将重构我的代码以不使用 data-* 属性。幸运的是，在我的案例中，这与太多工作无关。