しばらくの間、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>
これらすべてが common-header 要素内にあると仮定します。テストを行っているとき、スパンタグ自体を取得していません。空の配列を取得し、コンソールでデバッグしようとすると。#document-fragment しか見えません。これを処理する方法はありますか?