Upgrading Old Polymer Elements to Core Elements

I made it through every single chapter in Patterns in Polymer last night. Except one.

I finally have a super test build for the book project. Since Patterns in Polymer is written simultaneously in JavaScript and Dart, my super test build needs to run tests for each chapter in both Dart and JavaScript. After last night, the super test build runs JavaScripts tests for every chapter save for the internationalization chapter.

There are three reasons that I could not get the i18n chapter tested last night. First, I had written no tests when I originally wrote the chapter (bad developer). The eee-polymer-tests generator / dependency manager is capable of generating a simple test, but... The second reason that I could not get the chapter under test is that I am relying on <core-ajax> elements to load JSON localization files. Last, but not least, I am actually relying on <polymer-ajax> elements (the predecessor to <core-ajax>) to load the 110n files.

In other words, I have my work cut out for me to get this tested.

The approach I take is to get the Polymer library updated while still using the old <polymer-ajax>, then try eee-polymer-tests' default test, then upgrade to the new <core-ajax>. Finally, if all goes well, I will try to add some legitimate tests.

My bower.json does not restrict Polymer versions (to enable easy updates to the latest Polymer for testing):

{
  "name": "i18n",
  // ...
  "dependencies": {
    "polymer": "Polymer/polymer",
    "bootstrap": "~3.1.0",
    "i18next": "~1.7.2",
    "polymer-elements": "~0.2.0"
  }
}

Running bower update does not go smoothly, mainly because polymer-elements is so darn old. But, whenever I run across an incompatibility, I opt for the newer instance:

Unable to find a suitable version for platform, please choose one:
    1) platform#0.2.4 which resolved to 0.2.4 and is required by core-component-page#0.2.4, polymer#0.2.4
    2) platform#^0.4.0 which resolved to 0.4.1 and is required by core-component-page#0.4.1, polymer#0.4.1

Eventually, I get everything installed and up to date. Amazingly, when I fire the internationalized <hello-you> element up in the browser, it still works perfectly:



OK, so step #1 is done. Next, I try eee-polymer-tests' simple test. I add eee-polymer-tests to the NPM package.json dependencies:

{
  "name": "i18n",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-watch": "~0.5.3",
    "eee-polymer-tests": "eee-c/eee-polymer-tests"
  }
}

Then I run npm install and instruct the generator to create a test for <hello-you>. That too works:

karma start                                                       
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 ebljUvRurILtOe32-8Gq with id 2242723
Chrome 37.0.2062 (Linux): Executed 1 of 1 SUCCESS (0.093 secs / 0.085 secs)
WARN [web-server]: 404: /locales/en/translation.json
WARN [web-server]: 404: /locales/fr/translation.json
WARN [web-server]: 404: /locales/es/translation.json

The test simply checks that a shadow DOM is present if the <hello-you> element is inserted. It is not much of a test, but it does tell me that Polymer is loading properly for this element, which is especially good to know since the element was written so long ago.

Before writing a real test, this is a good time to upgrade from <polymer-ajax> to <core-ajax>. After removing polymer-ajax from the dependencies in bower.json, I tell bower to replace it with core-ajax:

$ bower install Polymer/core-ajax -S
bower core-ajax#*               cached git://github.com/Polymer/core-ajax.git#0.4.1
bower core-ajax#*             validate 0.4.1 against git://github.com/Polymer/core-ajax.git#*

The -S option saves the dependency in bower.json:

{
  "name": "i18n",
  // ...
  "dependencies": {
    "polymer": "Polymer/polymer",
    "bootstrap": "~3.1.0",
    "i18next": "~1.7.2",
    "core-ajax": "Polymer/core-ajax#~0.4.1"
  }
}

I delete bower_component and re-install to ensure that I am rid of any leftover cruft from the previously very old dependency. But after doing so, the element still works:



And my simple test still passes.

That will suffice as a stopping point for tonight. Some of the book text will need to be updated after these changes, so will get to that now. More importantly, I can add the last chapter to my super build—even if it is only covered by a very simple test. Up tomorrow, I will do something about that very simple test—I think that I can write some useful tests for this chapter.


Day #187

‹prev | My Chain | next›