polymer 1.0 unit tests - how to bind properties to a child element?

问题

I created a "child" element that is used by my custom "parent" element. My child element tag looks like this in my "parent" element:

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

fruits is an array in my "parent" element and is not a property of my "child" element. In my "child" element I have the following:

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

How can I write a unit test for my "child" element to see if the dom-repeat is working? I want to write the test directly on the "child" element without use of "parent". I know how to write assertions against properties of the "child" element, but I don't know how to bind or pass the fruits array that it would normally listen to from the "parent", since the parent is not part of my test. How can I feed a fruits array to my "child" element?

Once I feed it the fruits array, how can I test to see if the corresponding paper-cards were created?

回答1:

You actually do have a fruits property on your child element. You set it here:

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

This says, set child-element.fruits to parent-element.fruits.

The binding here creates an (implicit) setter for fruits so changes can be observed:

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

You can initialize your child element using an array literal in markup:

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

Or by setting the property in JavaScript:

myChildEl.fruits = myFruits;

I think you should be able to check the cards that were created by doing something like:

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

来源：https://stackoverflow.com/questions/32360098/polymer-1-0-unit-tests-how-to-bind-properties-to-a-child-element

标签

unit-testing

polymer