How to test the content of a visual Custom Element in Polymer by using web-component-tester?

[Patrick H.]

Hi everybody,

I'm struggling by testing a component I've created. All the test examples in the wild are very small and do not show how more complex tests can be made.

My element is a <context-menu> which accepts one attribute (items). items is a array which contains objects with two keys (pageKey, name) representing the unique key for a page and a human readable name to show in the visual part.

Here's the element definition itself: https://gist.github.com/silentHoo/0390a6f15eab6dbe0612

Here's the testsuite for it: https://gist.github.com/silentHoo/730251e96e7c9b79eb82

I would add other test methods to also check, if the given items array is properly rendered in the DOM. But when I try to use document.querySelector('context-menu').shadowRoot.querySelector('paper-items') I'll always get the default values I've put statically into the custom elements definition. Even when I use Polymer.flush().

Is there any problem with the data binding in my <template>, which creates the document fragment? Does this data binding cause the problems?

Any hint in any direction would be helpful for me.

[Ian MacLeod]

Ah! So it looks like you're getting bitten by observers here :(

Even though you're calling deliverChanges on your element, that's unfortunately not enough. deliverChanges will trigger any of the element's observers, but none external to it (those will still run at the end of the current microtask). I.e. the element's internal state updated, but the template's observers haven't fired yet, so the DOM is still stale.

Polymer.flush should have worked, however! Wild guess though: did you forgot to put Mocha into async mode when calling it? Either way, I'd recommend using WCT's flush helper as it's a little more terse, and is extra careful to work around some IE10 bugs.

Making that change to your setup function causes the tests to pass for me: https://gist.github.com/nevir/a12ff247a2a3371735ca/revisions

I'll see if I can work some better examples into WCT and our other documentation!

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/0301df8e-ee3b-4f73-8856-8059d8c77eb0%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.