聚合物单元测试模拟依赖项答案

【问题标题】：polymer unit test mocking dependencies聚合物单元测试模拟依赖项
【发布时间】：2016-06-16 00:55:30
【问题描述】：

我刚开始研究聚合物。我试图对具有依赖关系的自定义元素进行单元测试，我想伪造/模拟这些元素。我找到了 Scott Miles 关于如何模拟 core-ajax 实现的建议。我以为我可以轻松地遵循该模式，但这仅适用于我的元素不导入即将被模拟的（在本例中为 core-ajax）元素。如果确实导入了它，那么当测试尝试运行时，我会得到 p>

'Uncaught NotSupportedError: 无法在'Document' 上执行'registerElement': 'core-ajax' 类型的注册失败。已注册具有该名称的类型。

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

你们是如何解决这个问题的？我一直在研究 Polymer 和 PolymerLab 元素 repo，其中大多数都缺乏测试。到目前为止，我还没有找到太多关于如何做的参考。

感谢您的帮助！

圣地亚哥

Scotts 的建议是：

创建自己的 core-ajax 元素，而不是导入 core-ajax/core-ajax.html。

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

显然，这只是一个示例，实际实现取决于所需的模拟行为。

这只是解决它的一种方法，还有很多其他方法。我很想听听您觉得什么方便（不方便）。

【问题讨论】：

同上。双重包含的整个错误是痛苦的。尚不确定如何解决此问题。
引用的解决方案来自stackoverflow.com/questions/24531473/…

标签： unit-testing polymer

【解决方案1】：

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

Polymer CLI 是对 Polymer 元素进行单元测试的推荐方法。它用于测试的底层库称为 web-component-tester (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

【讨论】：

你能提供一个假纸按钮的例子吗？

【解决方案2】：

您可以尝试使用 js 强制注册它或扩展您正在测试的每个元素并覆盖您想要模拟的属性或方法。我认为仅此而已。就像我的 google-map 自定义元素一样，我导入 google-map 并像这样更改内容：

<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>

我仍然不确定它在专业上是否值得（我可能最终不会使用它），但在智力上完全值得。学到了一些好东西。因为我正在扩展 google-map，所以它只注册一次。

编辑：
在我的情况下，我使用了 ready 事件，因为我无法在地图本身没有准备好的情况下操作它。但您可以从生命周期方法中选择事件回调。
列表为here。
PS.：是的，我没有使用数据绑定，因为我不能。 google map api 抱怨它是 NaN，所以我不得不投射它。

【讨论】：