Yak Boxed Development

Last night I found that I could not test my Polymer code under PhantomJS. Today I put all of the JavaScript code sample in Patterns in Polymer under test. It turns out to be really, really slow to restart Chrome for every chapter. Who knew?!

So tonight, I revisit the problems with running Karma Polymer tests on PhantomJS. Rather than time-boxing this, I will yak-box it. I will shave no more than 7 yaks in an effort to get this working.

I am still working with the same setup that I identified way back when I started researching Polymer. The only difference is that I am now using Bower to install Polymer and other dependencies. The means that the files setting in karma.conf.js has changed to:

    files: [
      'test/PolymerSetup.js',
      {pattern: 'elements/**', included: false, served: true},
      {pattern: 'bower_components/**', included: false, served: true},
      'test/**/*Spec.js'
    ]

And the PolyerSetup.js file now loads in the polyfilled platform accordingly:

// ...
var script = document.createElement("script");
script.src = "/base/bower_components/platform/platform.js";
document.getElementsByTagName("head")[0].appendChild(script);
// ...

Yak #1

My smoke test passes in Chrome, but fails PhantomJS with:

PhantomJS 1.9.7 (Linux) ERROR
        ReferenceError: Can't find variable: Window
        at /home/chris/repos/polymer-book/play/svg/js/bower_components/platform/platform.js:30

I fixed that last night by declaring a Window function:

function Window(){};

Well “fix” is a strong word…

Yak #2

I am now getting a different error:

PhantomJS 1.9.7 (Linux) ERROR
        TypeError: 'undefined' is not an object (evaluating 'a.prototype')
        at /home/chris/repos/polymer-book/play/svg/js/bower_components/platform/platform.js:29

My problem here is that this is a minified version of the library and line 29 is very long and contains many a.prototype references.

So I try setting debug flags in PolymerSetup.js before the polyfilled platform is loaded:

function Window(){};
Platform = {
  flags: {
   debug: true,
   log: 'bind,ready'
  }
};

That has absolutely no effect.

Yak #3

So I install Polymer from source in the hopes that I can use an unminified version of the library:

➜  repos  mkdir polymer_local; cd polymer_local
➜  polymer_local  git clone https://github.com/Polymer/tools.git
Cloning into 'tools'...
...
➜  polymer_local  ./tools/bin/pull-all.sh
...

Looking through the various repositories, I can find absolutely no indication of where an unminified version of the platform is, so it seems that I need to build it.

Yak #4

Eventually, I find that the Grunt file in platform-dev looks like it builds. So I move into that directory, npm install the dependencies and try one of the Grunt tasks that looks promising:

➜  platform-dev git:(master) npm install
...
➜  platform-dev git:(master) grunt build-lite
Running "concat:lite" (concat) task
File "build/platform-lite.concat.js" created.

Done, without errors.

Now I need to figure out how to use that file in my existing tests.

Yak #5

Here, I cheat and copy this directly on top of the bower installed version:

➜  platform git:(master) ✗ mv platform.js platform.js.orig
➜  platform git:(master) ✗ cp ~/repos/polymer_local/components/platform-dev/build/platform-lite.concat.js platform.js

With that, I finally have a more useful error message:

PhantomJS 1.9.7 (Linux) ERROR
        TypeError: 'undefined' is not a function (evaluating 'importer.loaded.bind(importer)')
        at /home/chris/repos/polymer-book/play/svg/js/bower_components/platform/platform.js:1106

Yak #6

That turns out to be a simple lack of Function.prototype.bind in PhantomJS. The workaround comes from MDN, which has a polyfilled version of this method. I add that to the beginning of PolymerSetup.js:

function Window(){};
if (!Function.prototype.bind) {
  Function.prototype.bind = function (oThis) {
    // ...
  };
}

With that, I get:

PhantomJS 1.9.7 (Linux) ERROR
        ReferenceError: Can't find variable: PolymerExpressions
        at undefined:29

Yak #7

Unfortunately, that one has me stumped.

Ah well, I may not have managed to get this working, but I was finally able to figure out how to install a non-minified version of Polymer. Thanks to source maps, that is not usually necessary, but there are the odd occasions (like this) where it comes in handy.

Day #1,026

‹prev | My Chain | next›