聚合物 1.0 单元测试 - 如何将属性绑定到子元素？答案

【问题标题】：polymer 1.0 unit tests - how to bind properties to a child element?聚合物 1.0 单元测试 - 如何将属性绑定到子元素？
【发布时间】：2015-09-02 17:59:19
【问题描述】：

我创建了一个“子”元素，供我的自定义“父”元素使用。我的子元素标记在我的“父”元素中如下所示：

<child-element fruits="{{fruits}}"></child-element>

fruits 是我的“父”元素中的一个数组，而不是我的“子”元素的属性。在我的“子”元素中，我有以下内容：

<template is="dom-repeat" items="[[fruits]]">
  <paper-card>[[item.flavor]]</paper-card>
</template>

如何为我的“子”元素编写单元测试以查看 dom-repeat 是否有效？我想直接在“子”元素上编写测试而不使用“父”。我知道如何针对“子”元素的属性编写断言，但我不知道如何绑定或传递它通常会从“父”侦听的 fruits 数组，因为父不是我的测试的一部分.如何将水果数组提供给我的“子”元素？

一旦我给它提供了 fruits 数组，我如何测试是否创建了相应的纸卡？

【问题讨论】：

【解决方案1】：

您实际上确实在您的子元素上有一个fruits 属性。你在这里设置：

<child-element fruits="{{fruits}}"></child-element>

这就是说，将 child-element.fruits 设置为 parent-element.fruits。

这里的绑定为fruits 创建了一个（隐式）setter，因此可以观察到变化：

<template is="dom-repeat" items="[[fruits]]">

您可以在标记中使用数组字面量来初始化您的子元素：

<child-element fruits='[{"flavor": "apple"}, {"flavor": "blueberry"}]'>

或者通过在 JavaScript 中设置属性：

myChildEl.fruits = myFruits;

我认为您应该能够检查通过执行以下操作创建的卡片：

var cards = Polymer.dom(myChildEl.root).querySelectorAll('paper-card');

【讨论】：