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

Question

我刚开始学习 Polymer。我正在尝试对具有依赖关系的自定义元素进行单元测试，并希望能够伪造/模拟这些依赖项。

我发现 Scott Miles 建议如何模拟 core-ajax 实现。我认为我可以轻松地遵循这个模式，但只要我的元素导入了即将被模拟的元素（在本例中是 core-ajax），那么当测试尝试运行时，就会出现“未捕获的 NotSupportedError: 在 'Document' 上执行 'registerElement' 失败：类型“core-ajax”注册失败。已经注册了该名称的类型。”

如果我能做一些像 document.unregister 核心-ajax 元素并在我的测试中再次导入它的事情，我会成为一个更快乐的开发者！

Polymer 是很棒的，但如果我不能对它进行单元测试，那么它就会带来重大风险（至少在构建需要维护/更改的应用程序时是如此）。

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

感谢您的帮助！

Santiago

Scott 的建议是：

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

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

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

这只是其中一种解决方法，还有许多其他方法。我很想听听你认为哪个方便（不方便）。

- sesteva

---

重复的包含错误真是让人头疼。目前还不确定如何解决这个问题。 - David

引用的解决方案来自https://dev59.com/4oHba4cB1Zd3GeqPNSjo - dskrvk

Answer 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

- Kayce Basques

---

你能提供一个 fake-paper-button 的样例吗？ - abendigo

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

我仍然不确定从职业角度来看它是否值得（我可能最终不会使用它），但从智力上来说完全值得。学到了一些好东西。由于我正在扩展谷歌地图，因此只需注册一次。

编辑：
在我的情况下，我使用了ready事件，因为如果没有至少准备好，我无法直接操作地图。但是您可以从生命周期方法中选择事件回调。
列表在这里。
附言：是的，我没有使用数据绑定，因为我不能。谷歌地图API抱怨它是NaN，所以我必须将其转换。

- Caio Wilson