3

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

  }

});
4

0 回答 0