When I try to solve problems, I keep things as simple as possible. When I am creating problems, I don't mind a little complexity. With that in mind, I start trying to test a Polymer.dart tonight.
I have a nice little
<ice-code-editor> custom element, thanks to Polymer. With two simple options, I can embed a slick editor that superimposes Three.js code on top of a nifty preview:
The underlying Dart code in the ICE Code Editor is pretty complex. Among other things, there is an HTTP request for the code to be used and js-interop to work with the actual code editor.
Regardless of the underlying complexity involved, I have two obvious ways to test. I can test the published interface—the attributes of the custom element and the corresponding instance variables in the backing class. Additionally, I can test the resultant HTML changes once my Polymer element has rendered. I think the former is likely the easier of the two—especially with this code—but there is only one way to be sure.
To make things easier to access from the test directory, I move my template and backing code into
lib/polymer:➜ ice-code-editor git:(polymer) ✗ tree lib/polymer lib/polymer ├── ice_code_editor_element.dart └── ice_code_editor.html 0 directories, 2 filesThanks to the magic of Dart Pub, this will allow me to access those as
packages/ice_code_editor/polymer/ice_code_editor.html regardless of where I am in the package.In
test/polymer, I create a test page that will try to use the custom <ice-code-editor> element:<html>
<head>
<link rel="import" href="packages/ice_code_editor/polymer/ice_code_editor.html">
<script src="packages/polymer/boot.js"></script>
<script src="packages/unittest/test_controller.js"></script>
<script src="packages/browser/interop.js"></script>
<script type="application/dart" src="test.dart"></script>
</head>
<body>
<ice-code-editor src="embed.html" line_number="0"></ice-code-editor>
</body>
</html>
Hopefully that will load the necessary test and application code, then create an embedded version of the custom element to be tested.When I load it up with a dummy test in
test.dart, however, I get the following error in the console:XMLHttpRequest cannot load file:///home/chris/repos/ice-code-editor/test/polymer/packages/ice_code_editor/polymer/ice_code_editor.html. Cross origin requests are only supported for HTTP.Bother.
I am unsure how I am to get around this since most Dart testing—at least
dart:html testing—uses local file:// based tests. This particular error is coming from the guts of the Polymer.dart code, so I tend to doubt that I can find an easy workaround.Without any other obvious options tonight, I move the test page context and test code into
web/test, then access the page over pub serve, the dummy server built into Pub. With that, I get a passing test:
That is not quite a long term solution for testing, however. I do not believe that
pub serve was intended to be used in unit testing. If I want to test like this, I may have to write or use a simple test server to do something like this. Unless I am missing a more obvious solution.Regardless, I have more questions than answers on my hands right now, which is where I like to be when learning new stuff. So in that regards, my start-with-the-complex strategy has been wildly successful. Yay?
Day #890
