Question

我想对使用webcomponents.js polyfill。

的网络组件进行单元测试

我的组件是用es6 + scss制作的，并且使用构建任务，我将es6转换为es5，将scss处理为css并在html文件中插入两个结果文件，以便在我的应用程序中使用我的组件{{ 1}} functionnality。以下是自定义元素声明的组件类的示例：

HTML Import

此时我做了一个测试任务，可以启动class my-component extends HTMLElement { createdCallback() {...} ... //other component methods //getter/setter get colors() { return this._color; } set colors(val) { this._color = val; } }服务器，使用Karma转换UT并使用babel运行UT。

我的所有测试都通过了Chrome，但在IE11中，访问getter / setter或方法的所有测试都失败了......

示例：

Jasmine

此UT将在Chrome中传递，但在IE中，它将失败并显示describe... beforeEach(function() { this.component = document.createElement(COMP_NAME); } it("should return an array", function() { expect(this.component.colors).toEqual(jasmine.any(Array)); }); });

我的诊断是polyfill需要一些时间来创建组件。在我的测试中，我将在完全创建组件之前访问该组件的getter（这就是我未定义的原因......）我试图用

推迟测试

Expected undefined to equal <jasmine.any(Array)>

但这项工作有时候，有时候不会......

有人可以告诉我如何解决这个问题吗？作为旁注，所有组件都不会发生这种情况。似乎只有一个有许多方法/访问器和一些逻辑来运行onCreate ...

Answer 1

您是否尝试在beforeEach函数中使用'whenDefined'？

beforeEach(function(done) {
  this.component = document.createElement(COMP_NAME);
  customElements.whenDefined(COMP_NAME).then(done)
}

然后测试将在组件升级后运行。

在不使用polyfill（如chrome）的浏览器中，它会毫不拖延地升级。

请参阅https://developers.google.com/web/fundamentals/web-components/customelements#api_reference

如何对polyfilled webcomponents自定义元素

1 个答案: