Question

我正在尝试为use.dhadowDom设置为false的angular.dart（1.1.2）组件编写单元测试。如果useShadowDom设置为true，我似乎无法找到引用组件范围的方法。

inject((TestBed tb) async {
        Scope s = tb.rootScope.createChild({"clicked" : false});
        Element el = tb.compile("<test_component></test_component>", scope: s);

        microLeap();
        await tb.rootScope.apply();

        ShadowRoot root = await el.shadowRoot;

        // When useShadowDom: true, then use root here instead
        Element theButton = el.querySelector("#the_button");
        theButton.click();

        microLeap();
        await testBed.rootScope.apply();

        // If I do this with useShadowRoot: true, then it works perfect 
        // (true) but root is null with useShadowDom: false and if I pass 
        // element, then scope.context is just a map with the original
        // values (clicked = false).
        print((testBed.getScope(root).context as TestComponent).clicked);

        // This just prints the original values (clicked = false)
        await s.context.forEach((String key, Object val) async => print("$key : $val"));

});

然后在我的测试中：

dynamic getComponentContext(Node el, Function typeCallback, TestBed tb) {
    if(el is Element && el.childNodes != null && el.childNodes.isNotEmpty) {
        Scope s = tb.getScope(el);
        if(typeCallback(s.context)) {
            return s.context;
        }
        else {
            for(Node childNode in el.childNodes) {
                var c = getComponentContext(childNode, typeCallback, tb);
                if(c != null) {
                    return c;
                }
            }
        }
    }
    return null;
}

更新：我们找到了解决这个问题的方法，但这并不理想。我们可以获得对上下文的引用的唯一方法是递归地在树中的所有元素上调用getScope，直到找到正确的元素。这仅在组件具有将其与范围绑定的属性时才有效，因此类似胡子语法的内容仍然无法正常工作。

TabHost

使用useShadowDom进行AngularDart单元测试：false

0 个答案: