[Karma] html2jsとng-html2jsが競合した話

問題編

問題発生の状況はだいたいこんな感じです。

• AngularJS 1.3 で開発
• Karma でテスト
• ユニットテスト中で HTML を読み込む必要性

karma でユニットテストで HTML といえば karma-html2js-preprocessorです。
これは karma の最新版では組み込まれているので、何も考えずに使えるはず。

とりあえずサンプルコードを書いてみます。window.__html__ の中身が出力されるはず。

sample.spec.js

'use strict';

describe('Controller: sampleController', function () {
    var sampleCtrl, scope;
    beforeEach(module('sampleApp', function() {
        console.log(window.__html__);
    }));
    beforeEach(inject(function ($controller, $rootScope) {
        scope = $rootScope.$new();
        sampleCtrl = $controller('sampleController', {
            $scope: scope
        });
    }));
    it('should ...', function () {
		hogehoge();
    });
});

ログへの出力は次の通り。

undefined

使えませんでした。やれやれだぜ。

解決編

勘の良い皆様にはタイトル見た瞬間からおわかりかと思いますが、テストの都合で karma-ng-html2js-preprocessor を入れていたことが原因でした。 パッケージを削除して終了。

・・・というわけにも行かないのが辛いところで、テストで使うために ng-html2js を入れてるんだから、ng-html2js を削除したらテストが動かなくなるのがこの世の摂理っていうもんです。どうやらこの問題を解決するためにはもっと踏み込む必要がある。karma-ng-html2js-preprocessor の中身を見てみましょう。

karma-ng-html2js-preprocessor/lib/index.js

// PUBLISH DI MODULE
module.exports = {
  'preprocessor:ng-html2js': ['factory', require('./html2js')],
  // TODO(vojta): remove this in 0.11
  'preprocessor:html2js': ['factory', require('./html2js')]
};

karma-ng-html2js-preprocessor が自分自身をプリプロセッサとして出力する際に、　ng-html2js と html2js 両方の名前で出力するため、本来の html2js を上書きしてしまっていたことが原因だったようです。// TODO(vojta): remove this in 0.11 とか書いてあるので、そのうち消えるのでしょう。 気付いた時点で消してくれ。

現時点(2015/04/16)での暫定的な解決策は以下のどっちか。

• node_modules/karma-ng-html2js-preprocessor/lib/index.js から'preprocessor:html2js': ['factory', require('./html2js')]を消す
• ng-html2jsを使わないで頑張る

どっちでも動くようになりました。が、 node_modules の中身の変更なんて普通は同期しないですし、暫定的に ng-html2js を使わない方向で進めることにします（マジか）。