Question

使用Polymer 1. *和WCT，在测试我的元素<sp-veteran></sp-veteran>时，我无法在._getSpComboBox()函数中删除方法._getItems()和ready。我得到Error thrown outside of test function: this._getSpComboBox(...)._getItems is not a function。

由于它处于就绪功能，我需要使用WCT api stub而不是sinon.stub，因为后者要求我抓住fixture()之前我不能做的元素

有什么建议吗？

原始代码：

  _getSpComboBox: function() {
    return Polymer.dom(this.$.veteran.root).querySelector('sp-combo-box');
  },

  ready: function() {
    if (this.editMode) {
      this._getSpComboBox()._getItems();
    }
    this.$.veteranNoAjax.read();
    this._setStyle();
  }

试验：

<test-fixture id="sp-veteran">
  <template>
    <h2>edit veteran in edit mode</h2>
    <sp-app>
      <sp-toast></sp-toast>
      <sp-veteran edit-mode></sp-veteran>
    </sp-app>
  </template>
</test-fixture>

  before(() => {
      replace('sp-app').with('fake-sp-app');

      stub('sp-ajax', {read: ()=> entitiesMock});
      const _getItems = ()=> entitiesMock;
      stub('sp-veteran', {_getSpComboBox: ()=> _getItems});

Answer 1

不幸的是，在Polymer1中准备好测试是一种痛苦，或者至少我还没有找到一种没有奇怪副作用的简单方法。在您附加了存根/间谍之后调用就绪方法总是一种选择，但正如我所提到的，它可能会导致一些奇怪的问题。这在Polymer2中得到了缓解，因为你的元素首次调用了connectedCallback来调用ready，所以你可以创建元素然后绑定你的间谍并手动添加以触发它，只是不要忘记删除之后。

对于Polymer元素中的DOM操作，您应该使用附加的生命周期，这将解决您上面提到的用于测试的问题，但它也为您节省了一个奇怪的潜在用法案例。由于ready仅针对元素的实例运行一次，因此如果稍后重新使用该元素，则ready语句中的任何逻辑都不会重新运行，而是如果您将逻辑放在附加生命周期中（如果该元素是从DOM中移除然后在另一个位置再次添加它将重新运行它的逻辑来获取它的新孩子。

存根元素在就绪功能中无效

1 个答案: