Question

我对我的定制聚合物组件进行了以下单元测试：

＆＃13;

<head>
  <meta charset="UTF-8">
  <title>survey</title>

  <script src="../bower_components/webcomponentsjs/webcomponents.js"></script>
  <script src="/web-component-tester/browser.js"></script>
  <script src="../bower_components/test-fixture/test-fixture-mocha.js"></script>

  <link rel="import" href="../bower_components/polymer/polymer.html">
  <link rel="import" href="../bower_components/test-fixture/test-fixture.html">
  <link rel="import" href="../bower_components/iron-test-helpers/iron-test-helpers.html">
  <link rel="import" href="../views/components/survey.html">

</head>

<body>
  <test-fixture id="Network">
    <template>
      <survey></survey>
    </template>
  </test-fixture>
  <script>
    describe('<survey>', function() {
      var survey;


      describe('network', function() {
        beforeEach(function(done) {
          survey = fixture('Network');
        })
        it('should work', function() {
          expect(survey.$.dog).to.exist;
        });

      });
    });
  </script>

＆＃13;

以下自定义聚合物survey组件：

＆＃13;

<link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">

<dom-module id="survey">
<template>
  <h3 class="text-center">Tell us about yourself!</h3>
  <div class="form-group">
    <label>I'm a...</label>
    <array-selector id="imaSelector" items="{{ima}}" selected="{{imaSelected}}" multi toggle></array-selector>
    <template is="dom-repeat" id="imaList" items="{{ima}}">
      <div class="checkbox">
        <paper-checkbox id="{{item.id}}" on-iron-change="toggleIma">{{item.name}}</paper-checkbox>
      </div>
    </template>
  </div>
</template>
</dom-module>
<script>
  Polymer({
    is: 'survey',
    properties: {
      ima: {
        type: Array,
        value: function() {
          return [ {
            name: 'House Cat',
            id: 'houseCat'
          }, {
            name: 'Basic Dog',
            id: 'dog'
          }, {
            name: 'Swimming Fish',
            id: 'fish'
          }];
        }
      },
    
    },
    toggleIma: function(e) {
      var item = this.$.imaList.itemForElement(e.target);
      if (item) {
        this.$.imaSelector.select(item.id);
      }
    }

  })
</script>

＆＃13;

此测试将失败，因为本地dom未初始化，因为我使用的是dom-repeat元素。

在本地dom盖章之前我该怎么办？

Answer 1

这有两个部分。等待异步渲染，并找到节点。

对于渲染：要么从dom-change模板中侦听dom-repeat事件，要么调用render()上的dom-repeat方法强制进行同步渲染。

在单元测试中，您可能只想调用render()。

要查找节点 - this.$仅填充静态创建的元素（例如，不是dom-if或dom-repeat模板中的元素），如the docs中所述。这是混淆的常见原因。

您可以使用this.$$便捷方法通过选择器查询本地DOM元素，因此您可以执行以下操作：

survey.$.imaList.render();
expect(survey.$$(#dog)).to.exist;

Answer 2

您可以返回Promise而不是立即期待某事：

it('should work', function() {
    return expect(survey.$.dog).should.eventually.exist();
});

有关详细信息，请参阅http://mochajs.org/#asynchronous-code。

Answer 3

这似乎是聚合物问题。问题是我试图使用this.$选择器来引用动态创建的节点。但是，聚合物文档明确指出this.$仅包含静态创建的节点，而不包括动态创建的节点。

请参阅此链接中的注释。这是0.5版本，但我假设这在1.0版本中是相同的。如果有任何其他已知的解决方案，而不是链接中提到的解决方案，我很乐意听到它们。

https://www.polymer-project.org/0.5/docs/polymer/polymer.html#automatic-node-finding

请注意最终解决方案，如下所示：

＆＃13;

  
describe('network', function() {
  beforeEach(function(done) {
    survey = fixture('Network');
    flush(function(){
        done()
    });
  })
  it('should work', function() {
    expect(survey.querySelector('#dog')).to.exist;
  });
});

＆＃13;

请注意，需要flush()才能确保加载dom。 https://www.polymer-project.org/0.5/articles/unit-testing-elements.html#wct-specific-helpers

聚合物单元测试：当＆＃34;准备好时，不会呈现dom-repeat＆＃34;叫做

3 个答案: