How to test web components in Dart?

Question

There is not much documentation regarding web-ui testing in Dart. Two methods are available: a) run through Chrome DumpRenderTree or b) a trick consisting in loading the application as is and launching the test code on top of it . For trivial cases, the first option seems a bit tedious. Therefore, the last option - which in my case does not work when it comes to loading components.

With the following file structure:

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

( all files are listed in this style )

The next test suite freezes in the second step.

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

How can I download an application component? More broadly, is there another method for testing web components?

Answer 1

For the web-ui test, you must request the shadow dom or xtag (this) of the web component that you want to test instead of the "classic" dom.
Based on TodoMVC sample code

With code:
The working version of this test is:

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

and the test version without expectAsync should be:

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

and complete the version without shadow dom:

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

For me, these 3 codes are 100% passed on Dartium with
Dart Editor Version 0.5.20_r24275
Dart SDK version 0.5.20.4_r24275

Answer 2

You can try using the karma-dart runner: https://github.com/karma-runner/karma-dart

It even has an example of web components.

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

Answer 3

Although not typical for Darth, you can use Selenium to test the user interface. I believe that some members of the Dart team used Selenium to test the UI.