随机失败的聚合物网组件测试

时间:2015-08-06 18:06:26

标签: javascript polymer-1.0 systemjs es6-module-loader

将Polymer与ES6类结合的又一次尝试。

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

HTML:

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

的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的现成电话:

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

这意味着在某些时候所有这一切都将在浏览器中失败(可能不是从本地主机服务)。

我正在考虑以某种方式获取系统寄存器的承诺并制作类似于HTMLImports.whenDocumentReady的东西,但我仍然不清楚它是如何工作的。

所以任何想法和建议都受到高度赞赏!

示例应用程序位于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。

更新类型:How to import system js SFX library

1 个答案:

答案 0 :(得分:1)

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

这里有an article about combining the technologies提到的解决方案,可下载的代码和演示。