dipendenze mocking test unità polimeriche

Question

Im appena iniziando su polimero. Sto cercando di testare un elemento personalizzato che ha dipendenze e mi piacerebbe falso/deridere questi fuori. Ho trovato la raccomandazione di Scott Miles su come prendere in giro l'implementazione core-ajax. Pensavo di poter seguire facilmente quel modello, ma questo funziona solo finché il mio elemento non importa l'elemento che sta per essere deriso (core-ajax in questo caso). Se lo importa, allora quando il test tenta di eseguire ottengo

'Uncaught NotSupportedError: Impossibile eseguire' registerElement 'su' Documento ': Registrazione fallita per tipo' core-ajax '. Un tipo con quel nome è già registrato. '

Se potessi fare qualcosa come document.unregister l'elemento core-ajax e importarlo di nuovo nel mio test, Id essere un dev molto più felice !!! Polymer è fantastico, ma se non riesco a testarlo, presenta dei rischi importanti (almeno durante la creazione di un'app che dovrà essere mantenuta/modificata)

Come state lavorando a questo problema? Ho scavato nel repository di elementi Polymer e PolymerLab e la maggior parte di essi non ha test. Finora ho; non ho trovato molti riferimenti su come farlo.

Grazie per l'aiuto!

Santiago

raccomandazione

Scotts' era:

Invece di importare core-ajax/core-ajax.html, creare il proprio elemento core-ajax.

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

Ovviamente, questo è solo un esempio, l'implementazione effettiva dipende dal comportamento di derisione desiderato.

Questo è solo un modo per risolverlo, ce ne sono molti altri. Mi interessa sapere cosa trovi (in) conveniente.

Answer 1

Puoi provare a registrarlo in modo imperativo con js o estendere ogni singolo elemento che stai testando e sovrascrivere le sue proprietà o metodi che vuoi prendere in giro. penso che sia proprio questo. E 'come il mio google-map elemento personalizzato, ho importare il google-mappa e cambiare roba in giro in questo modo:

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

Sono ancora non so se ne valeva la pena professionalmente (i può finire non lo si utilizza) , ma ne è valsa la pena intellettualmente. ho imparato alcune cose belle. dato che sto estendendo google-map, viene registrato una sola volta e una sola volta.

EDIT:
nel mio caso ho usato l'evento pronti, perché non ho potuto manipolare la mappa di per sé senza che sia almeno pronto. ma puoi scegliere il callback dell'evento dai metodi del ciclo di vita.
L'elenco è here.
PS.:Sì, non ho usato il binding dei dati perché non potevo. L'API di google map si stava lamentando del fatto che fosse NaN, quindi ho dovuto scriverlo.

Answer 2

Questa domanda è un po 'vecchia. Ho pensato di fornire un aggiornamento poiché questa è una situazione abbastanza comune.

Polimero CLI è l'approccio consigliato per il test dell'unità Elementi polimerici. La libreria sottostante che usa per il test si chiama web-component-tester (WCT). WCT ha il supporto per gli elementi stub.Fondamentalmente, se uno dei tuoi test si basa su un altro elemento per restituire i dati, puoi creare uno stub di quell'elemento che restituisce sempre dati coerenti.

JS nel codice unit test per specificare l'elemento stub:

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

Elemento da testare:

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

In fase di esecuzione di test, il modello contenuto potrebbe essere abbattuti come:

<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