Testing Polymer Web Components
For the first time in a long time, I find myself working with something completely new. Web Components will change the way we build applications. But the browser support and completed specs will take time to implement. In the meanwhile, we can use various projects, like polymer, to shim the functionality of web components into today’s latest browsers.
Citing Addy Osmani’s latest article, FIRST, we need to test our components.
I started with the
yo polymer generator. It uses bower while I prefer npm/browserify and it uses grunt
while I prefer gulp. But it does the job setting up the scaffold to get you started fairly well–except for testing.
I found the default setup incapable of running my tests. I never quite figured out why, but I always got the same error:
Ultimately, I blame PhantomJS as it also times out using Testem:
So, my solution for TAP output uses Testem with Chrome (
testem ci -l Chrome) which runs fairly quickly and
dumps the results to the console. When I want to see it in the browser or debug, I run the
page as if it were an application (requires a slight reconfiguration of the Gruntfile.js).
I learned that much of the “windup” of a polymer component in Chrome happens asynchronously, so I often write a mocha before-all hook like this:
I also learned that while adding components to the test harness works easy enough, removing them throws errors if you don’t also disconnect the listeners. Many of my tests have a mocha after-all hook that looks like this:
I glossed over a few details to keep this short and get to the harder to figure out bits. If you need me to cover other areas, let me know. Also, let me know if this helped you with your testing efforts.