随机失败的聚合物网组件测试 [英] Randomly failing polymer web component test

问题描述

将Polymer与ES6类结合的另一种尝试。

Yet another attempt to marry Polymer with ES6 classes.

除了在导入的es6类的聚合物组件上随机失败的wct测试之外，它几乎可以工作（通过systemjs ）。据我所知，这是因为包含类定义的脚本在mocha执行测试后被加载。聚合物组件由两部分组成 - html和javascript（将后者编译为es5），

And it almost works except a wct test failing randomly on a polymer component with an imported es6 class (by systemjs). As far as I understand, this happens because the script, containing class definition, gets loaded after mocha executed the test. The polymer component consists of two parts - html and javascript (to compile latter to es5),

html：

<dom-module id="my-test">
   <template>hello</template>
   <script>
      System.import('elements/my-test.js');
   </script>
</dom-module>

javascript：

javascript:

import {User} from 'elements/model/user.js';

Polymer({
 is: "my-test",

 method: function(){
   console.log("method, user="+this.val);
 },

 ready: function(){
   this.user= new User(); //this.user is randomly undefined
 }
});

这似乎在浏览器中非常稳定，至少从localhost加载时是这样。但唯一可以修复测试的是延迟Polymer的预备电话：

This seems to work quite stable in the browser, at least when loaded from localhost. But the only thing which ‘fixes’ the test is delaying Polymer’s ready call:

Polymer.whenReady = function (f) {
   console.log("polymer ready");
   setTimeout(f, 100);// "fix"
   //f();
}

这意味着在某些时候所有这些都会在浏览器中失败（也许在服务时）不是来自localhost）。

which means at some point all this will fail in browser too (maybe when serving not from the localhost).

我正在考虑以某种方式获得系统寄存器的承诺并制作类似于HTMLImports.whenDocumentReady的东西，但我仍然没有清楚地了解这一切是如何运作的。

I’m thinking about getting somehow to the system-register’s promises and making something similar to HTMLImports.whenDocumentReady, but I still don’t have clear understanding of how all this works.

所以任何想法和建议都非常受欢迎！

So any ideas and suggestions are highly appreciated!

示例应用程序在github上：

The sample app is on github:

git clone https://github.com/bushuyev/test_test.git
cd test_test
git checkout tags/random_fail
npm install
bower install
gulp wct

为了使它成功而不是失败 - 在wct.conf.js中将verbose更改为true。

To make it succeed more often than fail - change verbose to true in wct.conf.js.

更新类型：如何导入系统js SFX库

推荐答案

可以使用Polymer，SystemJS和TypeScript（如ES6，但添加了聚合物友好语法）以非常好的方式一起使用，也可以使用SystemJS处理HTML导入。这确实涉及计时问题，我发布了一个小垫片，它首先等待webcomponents.js加载并捕获其ready事件（在其他代码有机会看到它之前），然后它加载Polymer，最后加载所有其他组件和TypeScript代码。然后它再次调度事件，以便Polymer完成初始化。

It's possible to use Polymer, SystemJS and TypeScript (like ES6 but with added Polymer-friendly syntax) together in a very nice way, also handling HTML imports using SystemJS. That does involve a timing issue, and I've published a small shim that first waits from webcomponents.js to load and catches its ready event (before other code gets a chance to see it), then it loads Polymer and finally all other components and TypeScript code. Then it dispatches the event again so Polymer finishes initializing itself.

这是一篇关于将技术组合的文章与上述解决方案，可下载代码和演示。

Here's an article about combining the technologies with the mentioned solution, downloadable code and a demo.

这篇关于随机失败的聚合物网组件测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！