Wie testen Sie Elemente, die das Laden der Lichtstärke erfordern?

Question

Ich habe ein Element:

<dom-module id="ens-page-router"> 

    <template> 

     <iron-pages attr-for-selected="url"> 
      <content select="ens-page"></content> 
     </iron-pages> 

    </template> 

    <script> 
     Polymer({ 
      is: 'ens-page-router', 
      attached: function(){ 
       //using async because the pages url will be undefined otherwise 
       this.async(function(){   
        var pages = this.getContentChildren() 
        var ironPages = this.$$('iron-pages'); 


        pages.forEach(function(elem){ 
         page(elem.url, function(){ 
          ironPages.select(elem.url); 
         }); 
        }); 

        page(); 
       }); 
      } 
     }); 
    </script> 

</dom-module> 

und eine Testaufnahme:

<test-fixture id='underTest'> 
     <template> 
      <ens-page-router> 
       <ens-page url="/derp"> 
        <div>derp</div> 
       </ens-page> 
       <ens-page url="/foo/bar"> 
        <div>foo bar</div> 
       </ens-page> 
      </ens-page-router> 
     </template>  
    </test-fixture> 

Ich bin nicht sicher, wie mein Test, nachdem das Licht dom initialisiert wurde ausgeführt. Ich habe versucht, das angehängte Ereignis anzuhören, aber es wird nie ausgelöst, da ich mich vor dem Aufruf von fixture() nicht registrieren kann. Ich habe auch versucht, synchron zu testen, aber der Test wird ausgeführt, bevor das angehängte Ereignis ausgelöst wird.

describe("<ens-page-router>", function(){ 
     var underTest; 
     var ironPages; 
     var selectSpy; 
     var routes = {}; 

     //stub page.js 
     var fakePage = function(path, callback){ 
      if(callback){ 
       routes[path] = callback; 
      }else if(path){ 
       routes[path](); 
      } 

     beforeEach(function(){ 
      page = fakePage; 
      underTest = fixture('underTest'); 
      ironPages = underTest.$$('iron-pages'); 
      selectSpy = sinon.spy(ironPages, "select"); 
     }); 

     it('should select the derp page', function(){ 
      page('/derp'); 

      assert(selectSpy.calledWith("/derp")); 
     }); 
}); 

Answer 1

Das Einbinden des Tests in einem setTimeout ermöglicht das Laden des Doms.

it('should select derp as the current page', function(done){  
      waitForDom(function(){ 
       page('/derp'); 

       assert(selectSpy.calledWith("/derp")); 
       done(); 
      }); 
     }); 

function waitForDom(callback){ 
      setTimeout(callback, 1); 
     }