Page Objects Testing Still Viable with Polymer

Well, it was pretty easy to upgrade the Dart version of my Page Objects testing code. What about the JavaScript version?

Both the Dart and JavaScript versions are 2 months old—2 whole months! Everything must be broken by now, right? It turned out that, despite numerous changes to Polymer.dart in the interim, very little needed to change to get the tests passing—and most of that was due to my adopting a pre-release version of Polymer.dart that was ultimately abandoned. So hopefully the JavaScript version of the code will be just as easy.

I am using the Page Object testing pattern, but the actual tests are performed with Karma and Jasmine. Since I have yet to update anything, it still works fine:

$ karma start
INFO [karma]: Karma v0.12.1 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 36.0.1985 (Linux)]: Connected on socket fGH6ETvI7bhvtg90F-ge with id 84692123
Chrome 36.0.1985 (Linux): Executed 2 of 2 SUCCESS (0.159 secs / 0.126 secs)

Let's see if I can break it.

I am installing and maintaining the Polymer library with Bower. It's been 2 months, so no doubt there is a new best practice for this sort of thing, but I'll stick with it for now. My bower.json simply points to any version of Polymer:

{
  "name": "page_objects",
  // ...
  "dependencies": {
    "polymer": "Polymer/polymer",
    "angular-mocks": "~1.2.16"
  }
}

I have no idea why I have angular-mocks listed as a dependency in there. According to bower ls it is not installed so I remove it. Speaking of bower ls, it reports plenty of shiny updates:

$ bower ls
page_objects#0.0.0 /home/chris/repos/polymer-book/book/code-js/page_objects
└─┬ polymer#0.2.2 (0.3.4 available)
  ├─┬ core-component-page#0.2.2 (latest is 0.3.4)
  │ ├── core-action-icons#0.2.2 (latest is 0.2.4)
  │ ├── platform#0.2.2
  │ └── polymer-ui-action-icons#0.2.2 (latest is 0.3.0)
  └── platform#0.2.2 (latest is 0.3.4)

Desirous of the promise of shiny new, I bower update:

$ bower update
...
polymer#0.3.4 bower_components/polymer
├── core-component-page#0.3.4
└── platform#0.3.4

core-component-page#0.3.4 bower_components/core-component-page
├── platform#0.3.4
└── polymer#0.3.4

platform#0.3.4 bower_components/platform

And… my tests still run! And as an added bonus, they still pass:

$ karma start
INFO [karma]: Karma v0.12.1 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 36.0.1985 (Linux)]: Connected on socket gh74mOQPT1Npy4xGt31j with id 25071706
Chrome 36.0.1985 (Linux): Executed 2 of 2 SUCCESS (0.187 secs / 0.152 secs)

If I were only doing this for an application, I might leave well enough alone. But, since this is for a book (Patterns in Polymer—buy it today!), I need to keep both code library and testing library as up-to-date as possible.

Now bear with me here… the code library is installed with a package manager as is the testing framework. But, even though they are both written in JavaScript, I need to use two different package managers to install them. Again it's been 2 months so the best of class for both package managers has probably changed, but I need to use both package managers. Unless that's changed too.

That reminds me of a joke:

"What is Bower?" "A package manager" "How do I install it?" "Use npm" "What's npm?" "A package manager" "...."

— AOL keyword Jakob (@BlueBoxTraveler) April 9, 2014

But seriously, JavaScript is awesome. The package manage that is managing the testing framework is npm. Naturally, it has its own package file, package.json, which looks like this currently:

{
  "name": "page_objects",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-watch": "~0.5.3",
    "karma-jasmine": "~0.2.0",
    "karma-chrome-launcher": ">0.0"
  }
}

And, unless I am mistaken, this is already the latest version of karma-jasmine. Has this really not been updated since April? That seems scary. The underlying Jasmine project has a new (minor) revision and has had dozens of changes since the last karma-jasmine update. It may be time to adopt Mocha as the current testing library best practice. I will leave that until tomorrow.

All that's left tonight is to fire it up in the browser and check for problems—of which I find none. I can add toppings, which show up as JSON inside a <pre> tag:



Cool! There aren't even any console messages. Both my Page Objects testing approach and the (admittedly simple) Polymer element still work perfectly two months down the line. I call it a night here. Up tomorrow: Mocha.


Day #140

‹prev | My Chain | next›