Question

我有一个元素，用<paper-menu>填充<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触发的tap事件没有target或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 );

  }

});

MockInteractions点击项目不会选择Web组件测试人员

0 个答案: