gpt4 book ai didi

unit-testing - polymer 单元测试 : dom-repeat is not rendered when "ready" is called

转载 作者:行者123 更新时间:2023-12-04 04:43:36 25 4
gpt4 key购买 nike

我对自定义 polymer 组件进行了以下单元测试:

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

以及以下自定义 polymer 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 没有初始化,因为我正在使用 dom-repeat 元素。

在本地 dom 被标记之前,我要怎么做?

最佳答案

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

对于渲染:要么听dom-change来自 dom-repeat 的事件模板,或调用 render() dom-repeat 上的方法强制同步渲染。

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

用于查找节点-- this.$仅使用静态创建的元素填充(例如,不是来自 dom-ifdom-repeat 模板的元素),如 the docs 中所述.这是混淆的常见来源。

您可以使用 this.$$通过选择器查询本地 DOM 元素的便捷方法,因此您可以这样做:

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

关于unit-testing - polymer 单元测试 : dom-repeat is not rendered when "ready" is called,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31372193/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com