Question

我正在使用Polymer。我有简单的过滤功能：

_queryFilter: function(query){
  return function(field){
    if (!query) return true;
    if (!field) return false;
    return (field.name && ~field.name.indexOf(query));
  };
}

这是元素：

  <input type="text" placeholder="filter" value="{{filterVal::input}}">

  <template is="dom-repeat" items="{{fields}}" filter="{{_queryFilter(filterVal)}}">
    {{item.name}}
  </template>

我想以这种方式进行单元测试：给出固定的'fields'数组，给'query'并检查输出哪个函数会给出。怎么做？

Answer 1

Web Component Tester（WCT）用于测试Polymer元素。要测试模板转发器的过滤器功能，Polymer Testing Guide：

有两个相关点

https://www.polymer-project.org/1.0/tools/tests.html#test-fixtures

使用测试夹具：


定义测试夹具模板并为其提供ID。

在测试脚本中定义一个变量以引用模板。

在setup（）方法中实例化一个新的灯具实例。

https://www.polymer-project.org/1.0/tools/tests.html#test-dom-mutations

如果您的元素模板包含模板转发器（flush）或条件模板（dom-repeat），或者您的测试涉及本地DOM突变，请始终将测试包装在dom-if中。在某些情况下，聚合物懒惰地执行这些操作以提高性能。 flush确保发生异步更改。测试函数应该使用一个参数done来表示它是异步的，它应该在done()的末尾调用flush。

假设：

<dom-module id="x-foo">
  <template>
    <input type="text" placeholder="filter" value="{{filterVal::input}}">
    <ul>
      <template is="dom-repeat" items="{{fields}}" filter="{{_queryFilter(filterVal)}}">
        <li class="name">{{item.name}}</li>
      </template>
    </ul>
  </template>
  <script>...</script>
</dom-module>

您的test.html看起来像这样：

<test-fixture id="basic">
  <template>
     <x-foo></x-foo>
  </template>
</test-fixture>

<script>
  suite('<x-foo>', function() {
    var list, listItems;

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

    test('filters fields', function(done) {
      list.fields = [
        {name: 'foo'},
        {name: 'bar'}
      ];
      list.filterVal = 'f';

      flush(function() {
        listItems = Polymer.dom(list.root).querySelectorAll('li.name');
        assert.equal(1, listItems.length);
        assert.equal('foo', listItems[0].textContent);
        done();
      });
    });
  });
</script>

_queryFilter()的单元测试可能如下所示：

test('_queryFilter() performs filtering', function() {
  var filter = list._queryFilter('o');
  var passedFilter = function(field) {
    return filter(field) !== 0;
  };
  assert.isTrue(passedFilter({name: 'foo'}));
  assert.isFalse(passedFilter({name: 'bar'}));
});

我建议使用Polymer Starter Kit，其中已经包含了几个使用WCT搭建的测试元素（例如app/test/my-list-basic.html）。

聚合物。如何单元测试过滤功能

1 个答案: