Sunday, March 29, 2015

My First web-component-tester Test


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":[]}'
        );
      });
    });
Amazingly, that works:
$ 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