Question

我有一个像以下那样设置的Polymer元素：

Polymer({

  is: 'some-element',


  properties: {
    //properties
  },

  listeners: {
    'something-happened': '_onSomethingHappening'
  },
  someFunction: function() {},

  anotherFunction: function() { // something-happened listener is executed here},

  _onSomethingHappening: function(e) {
      this.fire('it-happened', {e.someInfo});
  }
})

我已对所有功能进行了单元测试，但我需要测试_onSomethingHappening事件。我尝试捕获this.fire事件的返回值，但这不起作用。我想到的单元测试是这样的：

test('_onSomethingHappened', function() {

    var ev = some-element._onSomethingHappened();
    assert(typeof ev, 'object');

});

问题是，当我这样做时，它表示没有事件传递给侦听器，因此测试失败。有没有办法构建这个测试以使其工作？有没有办法说“断言JS .fire事件被执行”？

Answer 1

使用Web Component Tester，您可以在测试夹具的fire方法上使用SinonJS spy，并声明已使用特定参数调用它。

的test.html：

<test-fixture id="basic">
  <template>
    <my-list></my-list>
  </template>
</test-fixture>

<script>
  describe('my-list', function() {
    var list;

    beforeEach(function() {
      list = fixture('basic');
    });

    it('fires "foo" event with {bar: xxx}', function() {
      sinon.spy(list, 'fire');

      var e = {someInfo: 100};
      list._onSomethingHappened(e);
      expect(list.fire).to.have.been.calledWith('foo', {bar: e.someInfo});
    });
  });
</script>

或者，您可以测试元素是否发出了事件。

describe('my-list', function() {
  ...
  it('emits "foo" event with {bar: xxx}', function() {
    list._onTestFoo = sinon.spy();
    list.listen(list, 'foo', '_onTestFoo');

    var e = {someInfo: 100};
    list._onSomethingHappened(e);
    expect(list._onTestFoo).to.have.been.called;
    expect(list._onTestFoo.args[0][0].detail).to.deep.equal({bar: e.someInfo});
  });
});

Polymer Test Guide和Polymer Starter Kit的test/my-list-basic.html可能会有所帮助。

单元测试使用this.fire的Polymer侦听器

1 个答案: