Karma × PhantomJs × karma-html2js-preprocessor

以前、karma-html2js-preprocessorを利用して、このようなエントリを書きました。

Karmaでkarma-html2js-preprocessorを使ってHTMLを読み込んでテストする - CLOVER

この時は、以下の組み合わせで環境、コードを用意してテストを書いたのでした。

Babel
Browserify
Karma（ランチャーはChrome）
karma-html2js-preprocessorでHTMLからのDOMを利用
コード自体にはjQueryを利用
テストコードは、Mocha＋Chai

今回、Karmaのランチャー部をPhantomJsに置き換えてみたいと思います。

KarmaとPhantomJsを組み合わせるには、karma-phantomjs-launcherを利用します。

Karma - Browsers

GitHub - karma-runner/karma-phantomjs-launcher: A Karma plugin. Launcher for PhantomJS.

準備

まずは、必要なnpmモジュールをインストール。

## Babel
$ npm install --save-dev babelify babel-preset-es2015
$ npm install --save babel-polyfill

## Browserify
$ npm install --save-dev browserify watchify

## Mocha, Chai
$ npm install --save-dev mocha chai

## Karma
$ npm install --save-dev karma karma-browserify karma-chai karma-mocha

## Karma & PhantomJs
$ npm install --save-dev karma-phantomjs-launcher
$ npm install --save-dev phantomjs-prebuilt

## Karma Html2Js Preprocessor
$ npm install --save-dev karma-html2js-preprocessor

## jQuery
$ npm install --save jquery

「karma-phantomjs-launcher」と「phantomjs-prebuilt」を入れておくところが、ポイントです。

あとはBabelの設定と

$ echo '{ "presets": ["es2015"] }' > .babelrc

Karmaの設定。

$ ./node_modules/karma/bin/karma init

Karmaの設定で変えたところは、このあたりです。

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['browserify', 'mocha', 'chai'],

    browserify: {
      transform: ['babelify']
    },

    // PhantomJs
    phantomjsLauncher: {
      // Have phantomjs exit if a ResourceError is encountered (useful if karma exits without killing phantom)
      exitOnResourceError: true
    },

    // list of files / patterns to load in the browser
    files: [
      'src/**/*.js',
      'test/**/*-test.js',
      'html/**/*.html'
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      'src/**/*.js': ['browserify'],
      'test/**/*-test.js': ['browserify'],
      '**/*.html': ['html2js']
    },

phantomjsLauncherの設定を入れています。リソースエラー時に、PhantomJsをexitする設定のようですが…。

あと、今回は自動生成時に選択したのですが、ブラウザをPhantomJsにしています。

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['PhantomJS'],

テストの実行は、「test:karma」となるようにpackage.jsonに定義します。

  "scripts": {
    "test:karma": "karma start",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

コードの用意

コード自体は、元ネタのエントリと同じものを利用します。

テスト対象のコード。
src/click-add.js

import "babel-polyfill";

import $ from "jquery";

export function bindClick() {
    $("#button").bind("click", () => {
        $("#messages").append("<div class='added-message'>Hello Karma!!</div>");
    });
};

テストコード。
test/click-add-test.js

import "chai";
import $ from "jquery";

const should = chai.should();

import { bindClick } from "../src/click-add.js";

describe("click-add test", () => {
    it("click triple from HTML file.", () => {
        document.body.innerHTML = __html__["html/index.html"];

        bindClick();

        let button = document.getElementById("button");
        Array.from(Array(3), (v, k) => k + 1).forEach(i => button.click());

        let messages = document.getElementsByClassName("added-message");
        messages.should.to.have.lengthOf(3);

        let messageTexts = Array.from(messages).map(e => e.textContent);
        messageTexts
            .should
            .deep
            .equal(["Hello Karma!!", "Hello Karma!!", "Hello Karma!!"]);
    });
});

HTMLファイル。
html/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Karma Test Code</title>
</head>
<body>
  <div id="messages"></div>
  <input id="button" type="button" value="クリック！！">
</body>
</html>

実行

それでは、テストを実行してみます。

$ npm run test:karma

> karma-html2js-preprocessor-with-phantomjs@1.0.0 test:karma /path/to/karma-html2js-preprocessor-with-phantomjs
> karma start

17 05 2016 15:55:30.347:INFO [framework.browserify]: registering rebuild (autoWatch=true)
17 05 2016 15:55:33.752:INFO [framework.browserify]: 734545 bytes written (2.66 seconds)
17 05 2016 15:55:33.755:INFO [framework.browserify]: bundle built
17 05 2016 15:55:33.758:WARN [karma]: No captured browser, open http://localhost:9876/
17 05 2016 15:55:33.764:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
17 05 2016 15:55:33.774:INFO [launcher]: Starting browser PhantomJS
17 05 2016 15:55:34.372:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket /#Jwo3hVD3Av7kX5_aAAAA with id 57482169
PhantomJS 2.1.1 (Linux 0.0.0): Executed 1 of 1 SUCCESS (0.04 secs / 0.009 secs)

とりあえず、うまくいきましたっと。

ChromeからPhantomJsに変えると、動かすのにちょっとハマったりするかな？と思っていましたが、このくらいの内容ならそれほどでもないみたいでした。
使えそうなところでは、導入したいなぁと思います。

CLOVER🍀

That was when it all began.

Karma × PhantomJs × karma-html2js-preprocessor

準備

コードの用意

実行