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'));
});
Nice. That was easier than I expected.
Day #619
No comments:
Post a Comment