Thursday, January 3, 2013

Testing UI Events in Dart

‹prev | My Chain | next›

I have finally moved on to updating the events chapter in Dart for Hipsters. I do not think too much has changed in Dart since I wrote that chapter, but I do need to figure out how to test it.

I think that this chapter will also require browser-based unit tests. For many, if not all, of the tests, I could probably get away with faking the various Element, Event, and EventListenerList classes. Such tests would allow me to verify that the code compiles and runs—I could even use dart_analyzer to ensure a certain amount of propriety. But it is important that I verify that the event API in Dart does not change out from under me, so "real" tests it is.

I already know how to do this to a certain extent. I start with an empty HTML document that will source my test suite:
<html>
<head>
  <title>Events Tests</title>
  <script type="application/dart" src="test.dart"></script>

  <script type="text/javascript">
    // start dart
    navigator.webkitStartDart();
  </script>
</head>

<body>
<h1>Test!</h1>

</body>
</html>
That test.dart will then import the various test libraries that will describe the code in my chapter:
import 'package:unittest/html_enhanced_config.dart';

import 'simple.dart' as Simple;

main () {
  useHtmlEnhancedConfiguration();

  Simple.run();
}
I do not really need the "enhanced" test reporter, but I do love pretty reports.

The simple.dart library imports both the unittest and dart:html libraries. It also defines the run() method that will hold my tests:
library basics_snippet;

import 'dart:html';
import 'package:unittest/unittest.dart';

run() {
  group("[simple]", (){
    test('click event', (){
      // Tests here...
    });
  });
}
The first code sample that I need to test adds a click handler to an element on a page:
var el = document.query('#clicky-box');
el.on.click.add((event) {
  el.style.border = "5px solid orange";
});
The question then becomes how do I simulate a click event in Dart and how do I verify the result? Verifying the result seems a simple matter of checking the element's style. It turns out that the Element class supports a click() method for doing just what I need. So I write my test as:
    test('click event', (){
      document.body.append(
        new Element.html('<div id="clicky-box">Click Me</div>')
      );

      var el = document.query('#clicky-box');
      el.on.click.add((event) {
        el.style.border = "5px solid orange";
      });

      el.click();

      expect(el.style.border, contains('orange'));
    });
With that, I have the first code snippet in my events chapter under test:


Nice. That was easier than I expected.


Day #619

No comments:

Post a Comment