I have an element that populates a <paper-menu> with a <template dom-repeat>.
I want to test that once I add something in the <paper-menu>, I can select it and that it updates a property as expected.
<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');
},
I can not test the behavior properly. I want to mock a tap event on an item of the menu and ensure custom-filter-changed is fired.
If I select an element with element.$.customLabels.select('red'), the custom-filter-changed event is fired as expected.
If I select and element with MockInteractions.tap( Polymer.dom( element.root ).querySelector( 'paper-icon-item[value="red"]' ) ), the element gets taped (I hooked on-tap in the paper-item as a test) but element doesn't get selected.
I noticed that the tap event fired by MockInteractions.tap doesn't have target or srcElement and the path is different than if I actually click on the element.
I want to use MockInteractions.tap be mimic as closely as possible a real user action.
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 );
}
});