无法在 WCT 中存根私有元素

Question

使用 Polymer 1 和 Web 组件测试器...在 chrome 上的阴暗 dom 中进行测试。

在 WCT 中，尝试用 stub('sp-toast', { display: ()=> {} }); 存根 spToast.display() 但我在 Attempted to wrap undefined property display as function 时出错......我做错了什么？

我尝试对其进行存根的原因是因为当测试运行代码库时我得到 spToast.display is not a function。

原代码：

 showAgeWarning: function() {
    var spApp = Polymer.dom(document).querySelector('sp-app');
    var spToast = Polymer.dom(spApp.root).querySelector('sp-toast');

    var msg = "foo"
    spToast.display('information', msg);
  },

测试代码：

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

    setup(function() {
      replace('sp-app').with('fake-sp-app');
      replace('sp-ajax').with('fake-sp-ajax');
      stub('sp-value-dropdown', { setInvalidState: (state)=> {} });
      myEl = fixture('sp-veteran');
    });

  test('it should validate the veteran', function() {
      var spApp = Polymer.dom(myEl.root).querySelector('sp-app');
      var spToast = Polymer.dom(spApp.root).querySelector('sp-toast');
      sinon.stub(spToast, 'display');

Answer 1

当你得到 Attempted to wrap undefined property display as function 时，这意味着它不能替换（还）不存在的方法。

如果你在测试中确实得到了 var spToast = Polymer.dom(spApp.root).querySelector('sp-toast') 的值，而你的测试不会给 display 一个值，你可以直接设置它，la spToast.display = function() {}; 那么你应该可以在上面设置一个间谍或者你有什么需要的。

把它们放在一起，你可以

test('it should validate the veteran', function() {
      var spApp = Polymer.dom(myEl.root).querySelector('sp-app');
      var spToast = Polymer.dom(spApp.root).querySelector('sp-toast');
      spToast.display = function() {};
      sinon.spy(spToast, 'display');
      // Trigger the side effect that would lead to `display` being called
      assert.equal(
        spToast.display.calledOnces,
        true
      );
});

无法在 WCT 中存根私有元素

Can not stub private element in WCT

polymer

polymer-1.0

sinon

web-component-tester