Standardizing My Polymer Testing Strategy with Generators

Now that I have a nifty Polymer test generator in eee-polymer-tests, it is time to put it to use. The next oldest chapter in Patterns in Polymer is the parent-child chapter which explores communication strategies between parent and child custom elements.

It turns out that I already have tests for this chapter. Furthermore, it turns out that they are complete rubbish. I have tests that are waiting 1500ms:

  it('updates the parent', function() {
    waits(1500);
    runs(function(){
      expect(el.shadowRoot.textContent).toContain('Count: 1');
    });
  });

Hopefully I had a good reason for that, but it is still raises a red flag. You know what else raises a red flag? All tests failing:

karma start --single-run
Chrome 37.0.2062 (Linux) [parent/child] updates the parent FAILED
        TypeError: Cannot read property 'call' of undefined
            at HTMLElement.webkitCreateShadowRoot (/home/chris/repos/polymer-book/book/code-js/parent_child/scripts/polymer.min.js:34:7402)
            at Object.defineProperties.createShadowRoot.value [as createShadowRoot] (/home/chris/repos/polymer-book/book/code-js/parent_child/scripts/polymer.min.js:34:7641)
...
Chrome 37.0.2062 (Linux) [parent/child] updates the child FAILED
        TypeError: Cannot read property 'call' of undefined
            at HTMLElement.webkitCreateShadowRoot (/home/chris/repos/polymer-book/book/code-js/parent_child/scripts/polymer.min.js:34:7402)
            at Object.defineProperties.createShadowRoot.value [as createShadowRoot] (/home/chris/repos/polymer-book/book/code-js/parent_child/scripts/polymer.min.js:34:7641)
...
Chrome 37.0.2062 (Linux): Executed 2 of 2 (2 FAILED) ERROR (3.385 secs / 3.163 secs)

If I had to guess, I would say that the version of Polymer in use here is so old that it no longer works with Chrome. Rather than try to troubleshoot, I start fresh, which is what eee-polymer-tests does nicely. First, I delete everything related to old tests (they're still in git if I need them):

$ rm -rf node_modules karma.conf.js test bower.json bower_components

I add eee-polymer-tests to the list of NPM dependencies for this element's package.json:

{
  "name": "parent-events",
  "description": "Exploring communication between parent and child custom elements",
  "repository": {
    "type": "git",
    "url": "https://github.com/eee-c/patterns-in-polymer"
  },
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-watch": "~0.5.3",
    "eee-polymer-tests": "eee-c/eee-polymer-tests"
  }
}

A quick npm install and I am ready to test... almost:

$ npm install
npm WARN package.json parent-events@ No README data
/
> eee-polymer-tests@0.0.1 postinstall /home/chris/repos/polymer-book/book/code-js/parent_child/node_modules/eee-polymer-tests
> ./generator.js

What is the name of the Polymer element being tested? x-parent

Generating test setup for: x-parent
[WARN] There is no elements subdirectory for Polymer elements. Tests will fail!
Done!

The Polymer test generator can be re-run with: ./node_modules/eee-polymer-tests/generator.js <x-element-name>

It turns out the code in this chapter is so old that, not only was the previous installed Polymer too old to work, I had not even adopted my convention of placing custom element code in the elements directory. Crazy!

Thanks to Bower's API, installing a fresh eee-polymer-tests will take care of installing the latest Polymer. I have to manually move the custom element definitions into the proper location. Once that is done, I still fail:

$ karma start --single-run
INFO [karma]: Karma v0.12.23 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 37.0.2062 (Linux)]: Connected on socket 6n0eubWSCoKotAYxEOhX with id 21476441
WARN [web-server]: 404: /base/elements/x-parent.html
Chrome 37.0.2062 (Linux) <x-parent> element content has a shadow DOM FAILED
        TypeError: undefined is not a function
            at waitForPolymer (/home/chris/repos/polymer-book/book/code-js/parent_child/test/PolymerSetup.js:20:15)
            at Object.<anonymous> (/home/chris/repos/polymer-book/book/code-js/parent_child/test/PolymerSetup.js:25:3)
        Expected null not to be null.
        Error: Expected null not to be null.
            at Object.<anonymous> (/home/chris/repos/polymer-book/book/code-js/parent_child/test/XParentSpec.js:23:33)
Chrome 37.0.2062 (Linux): Executed 1 of 1 (1 FAILED) ERROR (0.035 secs / 0.029 secs)

At first, I focus on the stacktrace. But eventually, I notice the warning message from the test server that there is no x-parent.html Polymer definition file. In fact, I had named it parent.html instead of x-parent.html. I do not know why I would have done this—the actual element name is <x-parent>.

Looks like I need to add another check to eee-polymer-tests' generator script. Once I resolve this by renaming the element, the dummy test passes. And, indeed the other tests (which did need the timeout after all), also pass when I add them back in:

karma start --single-run
INFO [karma]: Karma v0.12.23 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 37.0.2062 (Linux)]: Connected on socket bPbsoJmY6CEp5lr1HACY with id 22145708
Chrome 37.0.2062 (Linux): Executed 3 of 3 SUCCESS (3.08 secs / 3.074 secs)

Aside from some non-standard code locations, it seems that the overall approach in this chapter still works (phew!). Interestingly, I now have another chapter standardized on the same code structure, testing configuration, naming conventions, and the latest version of Polymer—all thanks to eee-polymer-tests and its generator. I have some updates to the chapter in order, but only filenames.


Day #174

‹prev | My Chain | next›