Тестирование дом мутации в полимере 2

Question

Я пытался провести модульное тестирование полимерного элемента с помощью WCT в течение некоторого времени. У меня проблемы с тестированием мутаций dom. Ниже приведен сценарий, который я пытаюсь проверить:

<div class="menu-wrapper">
            <template id="links" is="dom-if" if="{{isLoggedIn}}">
                <template id="menuList" is="dom-repeat" items={{menu}}>
                    <span id="{{item.name}}"><a class$="secondaryLinkButton [[item.class]]" href="{{_generateURL(rootPath,item.slug)}}">[[item.display]]</a></span>
                </template>
            </template>
</div>

Тест выглядит так:

<test-fixture id="commonHeader">
  <template>
    <common-header></common-header>
  </template>
</test-fixture>

<script>

  suite('<common-header>', function() {
    var commonHeader;

    var menus =  [
          {
            "display" : "Menu 1",
            "name"    : "Menu 1",
            "slug"    : "Menu 1"
          },
          {
            "display" : "Menu 2",
            "name"    : "Menu 2",
            "slug"    : "Menu 2"                
          },
          {
            "display" : "Menu 3",
            "name"    : "Menu 3",
            "slug"    : "Menu 3"                
          }
        ];

    var isLoggedIn = true;    
    var self = this;

    setup(function(){
      commonHeader = fixture('commonHeader');
    });

    test('header should be login', function(done) {
      commonHeader.set('isLoggedIn', true)
      commonHeader.menu = menus;
      flush(function(){
        var total = commonHeader.shadowRoot.querySelector('.menu-wrapper').querySelectorAll('span');
        console.log('total', total);
        done();
      });
    });



  })
</script>

Предположим, что все это внутри элемента общего заголовка. Когда я делаю тестирование, я не получаю сам тег тега span. Я получаю пустой массив и при попытке отладки в консоли. Я могу видеть только # документа-фрагмент. Есть идеи, как с этим справиться?

Answer 1

Из документации:

По возможности, вы всегда должны использовать методы мутации массива Polymer.

Ваша проблема может быть в

commonHeader.menu = menus;

Полимер не был уведомлен об изменении свойства массива меню, поэтому не обновлял шаблон dom-repeat. Попробуйте вставить элементы так:

commonHeader.push('menu', menus);