Zombie.js 无法访问包含 DOM 个元素的数据集 属性
Zombie.js unable to access dataset property of DOM elements
我有一个包含富文本编辑器的页面。为此,我使用了 CKEditor。您向它传递一个 div 元素,它会将编辑器加载到该元素中。
现在我想为该页面编写集成测试。为此,我正在使用 zombie.js 和版本 4.2.1(旧的,我知道,但我坚持使用它)。但是,我在尝试加载页面时遇到错误。该问题显然是在尝试将编辑器加载到 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
使用僵尸 visit
方法。这些在该应用程序的所有其他集成测试中工作正常。
编辑 2:
所以我设法 "mock" CKEdtor 使用 this answer。这不是我想要的,但我决定暂时尝试使用它。但是,现在我得到了完全相同的错误!这次错误是在我自己的代码里面抛出的:
# 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)
这对我来说没有任何意义。这是否意味着僵尸无法访问 data-* 属性的值?也许有人对僵尸很了解并且可以提供进一步的见解?
在进一步查看我获得的新见解后,我在项目的 Github 页面上找到了 this ticket。看起来数据集 属性 未在所用版本的基础库中实现。由于我无法升级,所以无法像现在这样加载页面...
为了解决这个问题,我将重构我的代码以不使用数据-* 属性。幸运的是,这与我的工作量无关。
我有一个包含富文本编辑器的页面。为此,我使用了 CKEditor。您向它传递一个 div 元素,它会将编辑器加载到该元素中。
现在我想为该页面编写集成测试。为此,我正在使用 zombie.js 和版本 4.2.1(旧的,我知道,但我坚持使用它)。但是,我在尝试加载页面时遇到错误。该问题显然是在尝试将编辑器加载到 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
使用僵尸 visit
方法。这些在该应用程序的所有其他集成测试中工作正常。
编辑 2: 所以我设法 "mock" CKEdtor 使用 this answer。这不是我想要的,但我决定暂时尝试使用它。但是,现在我得到了完全相同的错误!这次错误是在我自己的代码里面抛出的:
# 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)
这对我来说没有任何意义。这是否意味着僵尸无法访问 data-* 属性的值?也许有人对僵尸很了解并且可以提供进一步的见解?
在进一步查看我获得的新见解后,我在项目的 Github 页面上找到了 this ticket。看起来数据集 属性 未在所用版本的基础库中实现。由于我无法升级,所以无法像现在这样加载页面...
为了解决这个问题,我将重构我的代码以不使用数据-* 属性。幸运的是,这与我的工作量无关。