Karma Testing CSS in Polymer (Thwarted)

Up tonight, a bit of CSS testing. I don't know that I have ever tested code whose primary purpose was manipulating CSS, but how hard can it be?

The testing will apply to the newly minted <apply-author-styles> element. I will use the familiar combination of Karma and Jasmine to run the tests.

I start from a fixture page. In my test I will use a sample Polymer element, <x-foo>, and assert that various page classes should apply:

<polymer-element name="x-foo">
  <template>
    <apply-author-styles></apply-author-styles>
    <button id=test>Test</button>
  </template>
</polymer-element>

I start by forcing my HTML files in Karma to be treated as HTML source files, not fixtures (which would be available in the __html__ top-level lookup):

// ...
    preprocessors: null,

    files: [
      'test/PolymerSetup.js',
      {pattern: 'apply-author-styles.html', included: false, served: true},
      {pattern: 'apply_author_styles.js', included: false, served: true},
      {pattern: 'bower_components/**', included: false, served: true},
      'test/**/*Spec.js',
      {pattern: 'test/*.html', included: false, served: true}
    ],
    // ...

Then, in the PolymerSetup.js file that I still use for my Polymer testing, I load the definition for this test Polymer element in addition to loading <apply-author-styles>:

// ...

// 2. Load component(s)
var link = document.createElement("link");
link.rel = "import";
link.href = "/base/apply-author-styles.html";
document.getElementsByTagName("head")[0].appendChild(link);

var fixtureLink = document.createElement("link");
fixtureLink.rel = "import";
fixtureLink.href = "/base/test/x-foo.html";
document.getElementsByTagName("head")[0].appendChild(fixtureLink);

I keep forgetting that I am using Jasmine 2.0 nowadays and it takes me a while to remember how to install that. I need to add it to my NPM package.json file:

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

And then run npm install. How could I possibly forget to configure and run a server-side package manager when configuring a client-side testing framework? It is completely obvious.

Ahem.

Finally, I am able to write a test:

describe('<apply-author-styles>', function(){
  var container, el;

  beforeEach(function(){
    container = document.createElement("div");
    el = document.createElement("x-foo");
    container.appendChild(el);
    document.body.appendChild(container);

  });

  afterEach(function(){
    document.body.removeChild(container);
  });

  describe('styles of elements using is', function(){
    it('should apply page CSS from <style> tags', function(){
      // ???
    });
  });
});

Unfortunately, I wind up stuck trying to test my specific element at this point. One of the main features of <apply-author-styles> is that it ignores styles that are not hard-coded in the original HTML document. Unfortunately, getting access to the original source document that is used to hold Karma tests—and to change it for a particular test run—seems difficult. At best.

I may have to alter my approach. Tomorrow.



Day #96

‹prev | My Chain | next›