How to test web components in Dart?

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?

score 3 · Accepted Answer · edited Feb 18 '14 at 16:08

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

score 1 · Answer 2 · edited Feb 18 '14 at 16:08

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

score 0 · Answer 3 · answered Jun 24 '13 at 18:10

0

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.

answered Jun 24 '13 at 18:10

Allan

83
5

How to test web components in Dart?

3 Answers3