Next up in my research-while-awaiting-copy-edits checklist is the web-component-tester. This is probably the most requested topic about which folks have inquired as they read through this blog and the resulting Patterns in Polymer, so this is a great time to investigate.
For better or worse, I use Karma and Jasmine in the book. When I first got started with testing Polymer elements, there were no testing solutions (well Polymer.dart had some, but nothing in JavaScript land). Over time, the solutions that popped up or were suggested did not sit right with me for one one reason or another. Hopefully web-component-tester (wct) will break that trend and, based on the project README, I have every expectation that it will.
I have Java available in my command line
$PATH:$ java -version java version "1.7.0_75" OpenJDK Runtime Environment (IcedTea 2.5.4) (7u75-2.5.4-1~trusty1) OpenJDK 64-Bit Server VM (build 24.75-b04, mixed mode)So I should be able to install the tool with the usual global node.js NPM install:
npm install -g web-component-tester > ws@0.5.0 install ... > sauce-connect-launcher@0.9.3 postinstall ... > wct-sauce@1.2.0 postinstall ... > wct-local@1.3.1 postinstall ... ----- selenium-standalone installation finished ----- ... /home/chris/local/node-v0.10.20/bin/wct -> /home/chris/local/node-v0.10.20/lib/node_modules/web-component-tester/bin/wct /home/chris/local/node-v0.10.20/bin/wct-st -> /home/chris/local/node-v0.10.20/lib/node_modules/web-component-tester/bin/wct-st web-component-tester@2.2.6 /home/chris/local/node-v0.10.20/lib/node_modules/web-component-tester ...I am using Bower to install Polymer—my
bower.json for this sample project is:{
"name": "wct_example",
"dependencies": {
"polymer": "Polymer/polymer"
}
}Since there is no configuration (e.g. via .bowerrc), Polymer and the associated webcomponentjs package gets installed in the bower_components directory. I am testing a favorite from Patterns in Polymer, <x-pizza>, whose definition resides in the elements subdirectory. I adapt the setup in the sample wct page accordingly:<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- <script src="../../webcomponentsjs/webcomponents.min.js"></script> -->
<script src="../bower_components/webcomponentsjs/webcomponents.min.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<link rel="import" href="../elements/x-pizza.html">
</head>
<body>
<x-pizza id="fixture"></x-pizza>
<script>
// Tests will go here...
</script>
</body>
</html>I am unsure why the sample given on the project page uses the "../../webcomponentsjs/webcomponents.min.js" location for the webcomponents library. In my sample, that resides outside of the project directory entirely. Regardless, if this file is stored in test/index.html, then the "../bower_components/webcomponentsjs/webcomponents.min.js" location works for me. Additionally, I <link> import the <x-pizza> element definition and establish it as a fixture for my tests.Next up, I write a simple test of
<x-pizza>. To start, I would simply like to assert that it starts with no toppings: suite('<x-pizza>', function() {
test('starts with no toppings', function() {
assert.equal(
document.getElementById('fixture').pizzaState,
'{"firstHalfToppings":[],"secondHalfToppings":[],"wholeToppings":[]}'
);
});
});$ wct test/index.html Starting Selenium server for local browsers Selenium server running on port 35270 Web server running on port 33741 and serving from /home/chris/repos/polymer-book/play/web-component-tester chrome 41 Beginning tests via http://localhost:33741/js/test/index.html?cli_browser_id=0 chrome 41 Tests passed firefox 36 Beginning tests via http://localhost:33741/js/test/index.html?cli_browser_id=1 firefox 36 Tests passed Test run ended with great success chrome 41 (1/0/0) firefox 36 (1/0/0)I realize that was a very simple test, but I am extremely happy with how easy it was to get wct setup and to run my first test. I do not have a strong opinion on Jasmine vs. Mocha/Chai—they are fairly interchangeable in my mind. So all in all, this seems a nice win for testing—especially since wct hides any Polymer/ready waiting. The proof will come with more complicated tests, on which I start tomorrow.
Day #13
No comments:
Post a Comment