Failing to Test Angular + Polymer

Gah! Finally got the 1.1 edition of Patterns in Polymer out the door and there is still much to do on it. Most of that will have go on the back burner until I return from FITC next week, but I must keep the chain unbroken. So...

Tonight, I try to write a test for angular-bind-polymer, which is all the more relevant after discovering that much of the overhead with which I had burdened that AngularJS directive is no longer needed. Since this is an Angular directive test, Karma is the way to go for testing.

I run through karma init accepting defaults, save for file loading “globs” that make my code in the top-level of the repository and the tests in the test subdirectory:

What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> "*.js"
> test/*Spec.js
> 

In order to test that this Angular directive works with Polymer, I will have to install Polymer as a development dependency. So I modify the Bower package bower.json configuration file, so that Polymer is listed in devDependencies:

{
  "name": "angular-bind-polymer",
  "version": "0.0.2",
  // ...
  "dependencies": {
    "angular": "~1.2.16"
  },
  "devDependencies": {
    "polymer": "Polymer/polymer"
  }
}

After a quick bower update, I am ready to go.

Except not quite. I need to add a few more dependencies:

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

And even then I am not seeing any of the angualar functions. Bother.

I eventually track this down to the lack of angular-mocks. I never remember that this is an inviolate requirement for testing AngularJS code—I see the name “mock” and assume that it is just for mocks and spies. Ah well, I update bower.json again:

{
  "name": "angular-bind-polymer",
  "version": "0.0.2",
  // ...
  "dependencies": {
    "angular": "~1.2.16"
  },
  "devDependencies": {
    "polymer": "Polymer/polymer",
    "angular-mocks": "~1.2.16"
  }
}

With that, I have my tests running… but failing. I am unsure if this is due to Polymer load order, Angular load order, or something else. But that seems like a good puzzle for another day.




Day #41

‹prev | My Chain | next›