How to test web components in Dart? - unit-testing

Question

There isn't much documentation insofar on web-ui testing in Dart. Two methods are available : a) run through Chrome's DumpRenderTree or b) a trick that consists of loading the app as is and running the test code on top of it. For trivial cases, the first option seems to be a bit tedious. So the latter option -- which in my case, doesn't work when it comes to load components.
With the following file structure:
test/
main_test.html
main_test.dart
web/
main.html
app.html
(all the files are listed in this gist)
The following test set hangs on 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 could the app component be loaded? More broadly, is there another method of testing web components?

Answer 1

For web-ui test you have to query the shadow dom or the xtag (this) of the webcomponent that you whant to test instead of the "classic" dom.
Based on TodoMVC code sample
With your code:
A 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 a 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 finaly a 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 this 3 codes are 100% pass 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 a web components example.
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 it is not Dart specific, you can use Selenium for testing the UI. I believe some members of the Dart team have used Selenium as well to do UI testing.