testing dom mutation in polymer 2

Question

I have been trying to unit test a polymer element using WCT for some time. I am having issues when it comes to testing dom mutations. Below is the scenario which I am trying to test:

<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 looks like this:

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

Assume all of this is inside common-header element. When I am doing the testing I am not getting span tag itself. I get an empty array and when I try to debug in the console. I can see only #document-fragment. Any idea how to handle this?

score 0 · Answer 1 · answered Aug 06 '18 at 15:13

0

From the documentation:

Whenever possible you should always use Polymer's array mutation methods.

Your problem might be in

commonHeader.menu = menus;

And Polymer not being notified that the menu array property has changed, thus not updating the dom-repeat template. Try pushing the elements like so:

commonHeader.push('menu', menus);

answered Aug 06 '18 at 15:13

AmmoPT

958
1
9
16

I tried that as well, so that changes are observable but with no success. Also, some of the applications mentioned on polymerjs site like shop app and even there they just assign the array value directly. So,not sure what is the issue. – Manit Aug 07 '18 at 09:13
The shop app does indeed use the array mutation methods to insert and remove items from the cart, as can be seen [here](https://github.com/Polymer/shop/blob/master/src/shop-cart-data.html#L67). Still if you've already tried that it must not be it. Have you tried commenting out the dom-if wrapping the dom-repeat just to try and isolate the problem? That dom-if might be preventing the dom-repeat from rendering properly. – AmmoPT Aug 07 '18 at 10:34
yes I tried just with a dom-repeat in place - doesn`t work. Also, tried to make use of render() but that also doesn`t work out. I am missing something basic where I am not sure what that "basic" is :-/ – Manit Aug 07 '18 at 12:22
Hmm... It might have something to do with how the templates work. From the documentation "Outside of a Polymer-managed template. Use the wrapper element:" can be seen [here](https://www.polymer-project.org/2.0/docs/devguide/templates#dom-if). Try changing both the dom-if and dom-repeat templates to the second syntax. – AmmoPT Aug 07 '18 at 14:00

testing dom mutation in polymer 2

1 Answers1