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

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 事件的 return 值，但这不起作用。我想到的单元测试是这样的：

test('_onSomethingHappened', function() {

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

});

问题是，当我这样做时，它说没有事件被传递给侦听器，因此测试失败。有没有一种方法可以构建此测试以使其工作？有没有办法说"assert that a JS .fire event was executed"？

Answer 1

在测试装置的 fire 方法上使用 Web Component Tester, you could use a 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 and Polymer Starter Kit's test/my-list-basic.html 作为起点可能会有所帮助。

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

Unit testing Polymer listener that uses this.fire

javascript

unit-testing

polymer

polymer-1.0