如何測試Dart中的Web組件？

Question

飛鏢中的web-ui測試沒有太多文檔。有兩種方法可用：a）運行Chrome的DumpRenderTree或b）包含loading the app as is and running the test code on top of it的技巧。對於微不足道的情況，第一個選項似乎有點乏味。所以後面的選項 - 在我的情況下，在加載組件時不起作用。

用下面的文件結構：

test/ 
    main_test.html 
    main_test.dart 
web/ 
    main.html 
    app.html 

（all the files are listed in this gist）

以下測試組掛在第二步驟。

main() { 
    useShadowDom = true; 

    test('Inline element is initially present.',() { 
    var story =() => expect(query('#hdr'), isNotNull); 
    Timer.run(expectAsync0(story)); 
    }); 

    test('Component is loaded.',() { 
    var story =() => expect(query('#globe'), isNotNull); 
    Timer.run(expectAsync0(story)); 
    }); 
} 

應用程序組件如何加載？更廣泛地說，是否有另一種測試Web組件的方法？

Answer 1

對於Web的用戶界面測試，你要查詢的影子DOM或您whant測試，而不是「經典」 DOM的WebComponent的的XTAG（本）。基於TodoMVC code sample

與您的代碼
：
本次測試的工作版本是：

main() { 
    useShadowDom = true; 

    test('Inline element is initially present.',() { 
    var story =() => expect(query('#hdr'), isNotNull); 
    Timer.run(expectAsync0(story)); 
    }); 

    test('Component is loaded.',() { 
    var root = query("span[is=x-app]").shadowRoot; 
    var story =() => expect(root.query('#globe'), isNotNull); 
    Timer.run(expectAsync0(story)); 
    }); 
} 

並沒有expectAsync一個測試版本應該是：

main() { 
    useShadowDom = true; 

    Timer.run(() { 
    test('Header element is initially present.',() { 
     var hdr = query('#hdr'); 
     expect(hdr, isNotNull); 
    }); 

    test('EchapApp component is loaded.',() { 
     var root = query("span[is=x-app]").shadowRoot; 
     var globe = root.query('#globe'); 
     expect(globe, isNotNull); 
    }); 
    }); 
} 

最後是一個不帶陰影的版本：

main() { 
    //useShadowDom = true; 

    Timer.run(() { 
    test('Header element is initially present.',() { 
     var hdr = query('#hdr'); 
     expect(hdr, isNotNull); 
    }); 

    test('EchapApp component is loaded.',() { 
     var root = query("span[is=x-app]").xtag; 
     var globe = root.query('#globe'); 
     expect(globe, isNotNull); 
    }); 
    }); 

} 

對我來說，這3個碼上Dartium 100個％合格與
飛鏢編輯器版本0.5.20_r24275
飛鏢SDK版本0.5.20.4_r24275

Answer 2

儘管它不是特定於Dart的，但您可以使用Selenium來測試UI。我相信Dart團隊的一些成員也使用Selenium來做UI測試。

Answer 3

您可以嘗試使用的業力鏢亞軍：https://github.com/karma-runner/karma-dart

它甚至有一個web組件的例子。

library click_counter_test; 

import 'package:unittest/unittest.dart'; 
import 'dart:html'; 
import '../web/out/xclickcounter.dart'; 

main() { 
    test('CounterComponent.increment',() { 
    var hello = new DivElement(); 
    var component = new CounterComponent.forElement(hello); 
    expect(component.count, equals(0)); 
    component.increment(); 
    expect(component.count, equals(1)); 
    }); 
}