聚合物单元测试嘲笑依赖关系

我刚开始聚合物。我试图单元测试有依赖关系的自定义元素，我想假冒/模拟这些。我发现了Scott Miles关于如何模拟core-ajax实现的建议。我认为我可以很容易地遵循这种模式，但只有当我的元素没有导入要被嘲笑的元素（在这种情况下为核心ajax）时，这才会起作用。如果确实导入它，那么当测试尝试运行时，我得到聚合物单元测试嘲笑依赖关系

'未捕获的NotSupportedError：未能在'Document'上执行'registerElement'：类型'core-ajax'的注册失败。具有该名称的类型已被注册。

如果我可以做一些像document.unregister core-ajax元素，并在我的测试中再次导入它，Id是一个更快乐的开发！聚合物很棒，但如果我不能单元测试它，那么它会带来很大的风险（至少在构建需要维护/更改的应用程序时）

你们是如何解决这个问题的？我一直在挖掘Polymer和PolymerLab元素回购，并且大多数都缺乏测试。到目前为止，我还没有找到如何做到这一点的很多参考。

感谢您的帮助！

圣地亚哥

斯科特的建议是：

代替进口核心AJAX /核心ajax.html的，创建自己的核心AJAX元素。

<polymer-element name="core-ajax" attributes="response"> 
<script> 
    Polymer('core-ajax', { 
    attached: function() { 
     this.response = ['a', 'b', 'c']; 
    } 
}); 
</script> 
</polymer-element>

很明显，这只是一个例子，实际的实现取决于期望的模拟行为。

这只是解决它的一种方法，还有很多其他的方法。我很想听听你方便的地方。

来源

2014-09-29 sesteva

同上。双重错误包括痛苦。不知道如何解决这个问题呢。 – David 2014-10-29 15:29:47

被引用的解决方案是从https://stackoverflow.com/questions/24531473/how-do-i-mock-polymer-core-ajax-for-unit-testing – dskrvk 2016-04-12 22:34:52

您可以尝试使用js命令注册它，或者扩展您正在测试的每个单个元素，并覆盖您想要模拟的属性或方法。我认为这只是它。这就像我的谷歌地图自定义元素，我导入谷歌地图和改变的东西左右，像这样：

<polymer-element name="core-gmaps" attributes="lat long mapzoom markerlat markerlong markertitle" extends="google-map"> 
    <template> 
     <style> 
     :host{ 
      width: 100%; 
     } 
     #vivaMap { 
      display: block; 
      height: 100%; 
      width: 100%;    
     } 
     </style> 
     <google-map id="vivaMap" latitude="0" longitude="0" zoom="18"> 
      <google-map-marker id="vivaMarker" title="" latitude="0" longitude=""></google-map-marker> 
     </google-map> 
    </template> 
    <script> 

    Polymer("core-gmaps",{ 
    ready: function(){ 

     var map = this.$.vivaMap; 
     map.latitude = Number(this.getAttribute('lat')); 
     map.longitude = Number(this.getAttribute('long')); 
     map.zoom = Number(this.getAttribute('mapzoom')); 

     var mapMarker = this.$.vivaMarker; 
     mapMarker.latitude = Number(this.getAttribute('markerlat')); 
     mapMarker.longitude = Number(this.getAttribute('markerlong')); 
     mapMarker.title = this.getAttribute('markertitle'); 
     /*map.addEventListener('google-map-ready', function(e) { 
      console.log('Map loaded!'); 
     });*/ 
    } 
    }); 
    </script> 
</polymer-element>

我仍然不知道，如果它是值得的专业（我可能最终不使用它），但在智力上完全值得。学到了一些好东西。因为我扩展谷歌地图它只获得一次注册。

编辑：
在我的情况下，我使用的准备情况，因为我不能操纵在地图本身没有它至少准备。但您可以从生命周期方法中选择事件回调。
列表是here。
附注：是的，我没有使用数据绑定，因为我不能。谷歌地图API是抱怨它是NaN所以我不得不施放它。

来源

2014-12-03 18:25:51

这个问题有点老了。我想提供一个更新，因为这是一个很常见的情况。

聚合物CLI是单元测试聚合物单元的推荐方法。它用于测试的底层库称为Web组件测试器（WCT）。 WCT支持存根元素。基本上，如果你的一个测试依赖于另一个元素来返回数据，你可以创建一个总是返回一致数据的元素的存根。

JS在单元测试码用于指定存根元件：

setup(function() { 
    replace('paper-button').with('fake-paper-button'); 
});

元进行测试：

：

<dom-module id='x-el'> 
    <template> 
    <paper-button id="pb">button</paper-button> 
    </template> 
</dom-module>

在测试运行时，内容模板将作为被冲压出

<dom-module id='x-el'> 
    <template> 
    <fake-paper-button id="pb">button</fake-paper-button> 
    </template> 
</dom-module>

https://www.polymer-project.org/1.0/docs/tools/tests#create-stub-elements

来源

2016-06-15 16:55:30

你能提供一个什么假纸按钮的例子会看起来像？ – abendigo 2016-06-29 14:24:54

聚合物单元测试嘲笑依赖关系

回答

相关问题