<paper-menu>aに a を設定する要素があり<template dom-repeat>ます。
<paper-menu>に何かを追加すると、それを選択できること、および期待どおりにプロパティが更新されることをテストしたいと思います。
<paper-menu id="customLabels" attr-for-selected="value" multi on-iron-select="updateCustomFilter" on-iron-deselect="updateCustomFilter">
<template is="dom-repeat" items="{{customLabels}}">
<paper-icon-item id="{{item.value}}" value$="{{item.value}}" role="menuitem">
<iron-icon icon="label" item-icon style$="{{_setStyle(item.color)}}" invert"></iron-icon><span>{{item.value}}</span>
</paper-icon-item>
</template>
</paper-menu>
...
updateCustomFilter: function(){
this.customFilter = this.$.customLabels.selectedValues;
this.fire( 'custom-filter-changed');
},
動作を適切にテストできません。メニューのアイテムでタップイベントをモックして、確実に発生させたいですcustom-filter-changed。
で要素を選択するとelement.$.customLabels.select('red')、custom-filter-changedイベントは期待どおりに発生します。
を選択して要素を選択するとMockInteractions.tap( Polymer.dom( element.root ).querySelector( 'paper-icon-item[value="red"]' ) )、要素はテープで留められますが (テストとしてペーパーアイテムにオンタップで接続しました)、要素は選択されません。
MockInteractions.tap によって起動されたタップ イベントにはターゲットまたは srcElement がなく、実際に要素をクリックした場合とはパスが異なることに気付きました。
MockInteractions.tap実際のユーザー アクションにできる限り近い模倣を使用したいと考えています。
test('select custom label', function( done ){
element.$.customLabels.addEventListener('dom-change', function( event ){
element.addEventListener( 'custom-filter-changed', customFilterChanged );
// MockInteractions.focus( Polymer.dom( element.root ).querySelector( 'paper-icon-item[value="red"]' ) );
// MockInteractions.tap( Polymer.dom( element.root ).querySelector( 'paper-icon-item[value="red"]' ) );
element.$.customLabels.select('red');
element.$.customLabels.removeEventListener( 'dom-change', customFilterChanged );
});
// add element to the paper-menu
element.customLabels = [{
color: 'red',
value: 'red'
}];
function customFilterChanged( event ) {
assert.equal( element.customFilter.length, 1 );
assert.equal( element.customFilter[0], 'red' );
done();
element.removeEventListener( 'custom-filter-changed', customFilterChanged );
}
});