Unit test polymer related dependencies

Question

Im just starting with polymer. Im trying to unit test a custom item that has dependencies and I would like to fake / mock them. I found Scott Miles' recommendation on how to mock the core-ajax implementation. I thought I could easily follow this pattern, but this only works until my element imports the element that will mock (kernel-ajax in this case). If it imports it, then when the test tries to run, I get

'Uncaught NotSupportedError: Failed to execute' registerElement 'in' Document ': Registration error for type' core-ajax '. A type with this name is already registered. ''

If I could do something like document.unregister the core-ajax element and import it again into my test, Id would be a lot happier dev !!! The polymer is awesome, but if I cannot unit test it, then it poses serious risks (at least when creating an application that needs to be saved / modified).

How do you guys work on this? I dug repos on Polymer and PolymerLab, and most of them were flawed. So far I have not found many links on how to do this.

Thanks for the help!

Santiago

Scotts Recommendation:

Instead of importing core-ajax / core-ajax.html, create your own core-ajax element.

<polymer-element name="core-ajax" attributes="response"> <script> Polymer('core-ajax', { attached: function() { this.response = ['a', 'b', 'c']; } }); </script> </polymer-element> 

Obviously, this is just an example, the actual implementation depends on the desired mocking behavior.

This is just one way to solve it, there are many others. I am interested to know what you find (at) convenient.

Answer 1

This question is a little old. It is clear that I would provide an update, as this is a fairly common situation.

Polymer CLI is the recommended approach to unit testing of polymer elements. The main library that he uses for testing is called the web tester component (WCT). WCT supports stub elements. Basically, if one of your tests relies on another element to return data, you can create a stub for this element that always returns consistent data.

JS in unit test code to indicate a stub element:

 setup(function() { replace('paper-button').with('fake-paper-button'); }); 

Item to be tested:

 <dom-module id='x-el'> <template> <paper-button id="pb">button</paper-button> </template> </dom-module> 

In the test version of the content template, it will be crossed out as:

 <dom-module id='x-el'> <template> <fake-paper-button id="pb">button</fake-paper-button> </template> </dom-module> 

https://www.polymer-project.org/1.0/docs/tools/tests#create-stub-elements

Answer 2

You can try to register it imperatively using js or extend each individual element you are testing and override its properties or methods that you want to make fun of. I think that is exactly the case. This is similar to my google-map user element, I import the google map and change things like this:

 <polymer-element name="core-gmaps" attributes="lat long mapzoom markerlat markerlong markertitle" extends="google-map"> <template> <style> :host{ width: 100%; } #vivaMap { display: block; height: 100%; width: 100%; } </style> <google-map id="vivaMap" latitude="0" longitude="0" zoom="18"> <google-map-marker id="vivaMarker" title="" latitude="0" longitude=""></google-map-marker> </google-map> </template> <script> Polymer("core-gmaps",{ ready: function(){ var map = this.$.vivaMap; map.latitude = Number(this.getAttribute('lat')); map.longitude = Number(this.getAttribute('long')); map.zoom = Number(this.getAttribute('mapzoom')); var mapMarker = this.$.vivaMarker; mapMarker.latitude = Number(this.getAttribute('markerlat')); mapMarker.longitude = Number(this.getAttribute('markerlong')); mapMarker.title = this.getAttribute('markertitle'); /*map.addEventListener('google-map-ready', function(e) { console.log('Map loaded!'); });*/ } }); </script> </polymer-element> 

I'm still not sure if it was professional (I can not use it), but he was completely worthy intellectually. learned some nice things. since I am expanding the google map, it is registered once and only once.

EDIT:
in my case, I used the finished event because I could not manipulate the map as such without at least being ready. but you can choose an event callback from the lifecycle methods.
The list is here . PS.: Yes, I did not use data binding because I could not. The google api map complained that it was NaN, so I had to drop it.