I was able to test CSS styling last night, making
getComputedStyle()
my new best friend. Seriously, I have wanted to do just this kind of testing before, but never knew it was possible. Which begs the question, is it possible in Dart?Presumably, it is. Especially since
getComputedStyle()
is part of core dart:html. Even better, getComputedStyle()
in Dart is available on any Element, so no need to run it through the top-level window
version.As yesterday, I am testing some Bootstrap styles applied to a custom Polymer element for a chapter in Patterns in Polymer. More precisely, I am using Polymer.dart for the Dart version of this chapter.
The setup for testing this creates the
<pricing-plan>
elements that should use Bootstrap styles: var _el;
group("styles", (){
setUp((){
_el = createElement('''
<pricing-plans>
<pricing-plan type="primary">plan content</pricing-plan>
</pricing-plans>
''');
document.body.append(_el);
});
// Test goes here...
});
The type="primary"
attribute will generate a Bootstrap panel-primary class that results in a panel with a blue heading like the one on the right:To test this, I need the same computed style as from last night's JavaScript test. I need grab the
<pricing-plan>
element, then query for the panel heading, and finally ask for the computed style: test("come from external sources", (){
var primary_el = _el.query('pricing-plan'),
heading_el = primary_el.shadowRoot.query('.panel-heading'),
style = heading_el.getComputedStyle();
expect(style.backgroundColor, 'rgb(66, 139, 202)');
});
The expectation is then that the panel's background color will be default Bootstrap primary blue. But this turns out not to work:CONSOLE MESSAGE: FAIL: styles come from external sources Expected: 'rgb(66, 139, 202)' Actual: 'rgba(0, 0, 0, 0)' Which: is different.Interesting, I note that the smoke test web page is making XHR requests for Bootstrap:
XHR finished loading: GET "http://localhost:8080/packages/bootstrap_example/assets/bootstrap.min.css".This occurs even though Bootstrap is being imported with
@import
in the Polymer definition:<link rel="import" href="../../../packages/polymer/polymer.html"> <polymer-element name="pricing-plan"> <template> <div class="col-md-{{size}}"><!-- ... --></div> <style> @import '/packages/bootstrap_example/assets/bootstrap.min.css'; </style> </template> <script type="application/dart" src="pricing_plan.dart"></script> </polymer-element>I presume this is the Polymer transformer doing this. Since I cannot change it, I need a workaround. Like running
pub serve
:$ pub serve Loading source assets... Loading polymer transformers... Serving bootstrap_example web on http://localhost:8080 Serving bootstrap_example test on http://localhost:8081The tests are kindly served up from 8081, so I point
content_shell
there:$ content_shell --dump-render-tree http://localhost:8081 CONSOLE MESSAGE: unittest-suite-wait-for-done CONSOLE MESSAGE: PASS: styles come from external sources CONSOLE MESSAGE: PASS: [defaults] name is "Plan" CONSOLE MESSAGE: PASS: [defaults] can embed code CONSOLE MESSAGE: CONSOLE MESSAGE: All 3 tests passed. CONSOLE MESSAGE: unittest-suite-success CONSOLE WARNING: line 213: PASSSo yay! Aside from the tiny XHR curveball with the
@import
CSS, it is just as easy to test styles in Polymer.dart as in the JavaScript version.Day #203
No comments:
Post a Comment