javascript - 你如何测试需要加载 light dom 的元素？

Question

我有一个元素：

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

和一个测试夹具：

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

我不确定在 light dom 初始化后如何运行我的测试。我试过听附加的事件，但它永远不会触发，因为在调用fixture() 之前我无法注册。我也尝试过同步测试，但测试在触发附加事件之前运行。

 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

将测试包装在 setTimeout 中将允许加载 dom。

 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);
        }