聚合物單元測試：DOM重複不渲染時「準備」被稱爲

我有我的自定義聚合物組分以下的單元測試：聚合物單元測試：DOM重複不渲染時「準備」被稱爲

<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>

而下面的定製聚合物survey成分：

<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>

由於我使用的是dom-repeat元素，因此本地dom未初始化，所以此測試將失敗。

我要如何才能在當地dom蓋章？

來源

2015-07-12 taylorstine

你可以返回一個Promise，而不是立即期待的東西：

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

更多信息請參見http://mochajs.org/#asynchronous-code。

來源

2015-07-12 20:34:37

這似乎是一個聚合物問題。問題是我試圖使用this.$選擇器來引用動態創建的節點。但是，聚合文檔明確指出，this.$將僅包含靜態創建的節點，而不是動態創建的節點。

請參閱此鏈接中的註釋。這是爲0.5版本，但我認爲這是在1.0版本相同。如果還有其他解決方案比鏈接中提到的解決方案，我很樂意聽到他們。

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

注意最終的解決方案，看起來是這樣的：


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

注意，需要flush()，以確保DOM被加載。 https://www.polymer-project.org/0.5/articles/unit-testing-elements.html#wct-specific-helpers

來源

2015-07-13 00:59:10 taylorstine

這有兩個部分。等待異步渲染，並找到節點。

對於渲染：從dom-repeat模板偵聽dom-change事件，或者調用dom-repeat上的render()方法強制進行同步渲染。

在單元測試中，您可能只想致電render()。

用於找到node-- this.$僅填充靜態創建的元素（未，例如，從一個或dom-ifdom-repeat模板元素），如在the docs說明。這是一個混亂的頻繁來源。

可以使用this.$$方便的方法來查詢通過選擇本地的DOM元素，所以你可以做這樣的事情：

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

來源

2015-12-04 19:50:52 DocDude

聚合物單元測試：DOM重複不渲染時「準備」被稱爲

回答

相關問題