引き続きES6でテストを書く。

とりあえず必要なものをnpmでインストール。

npm install power-assert --save-dev
npm install babel-plugin-espower --save-dev
npm install karma --save-dev
npm install karma-browserify --save-dev
npm install karma-fixture --save-dev 
npm install karma-html2js-preprocessor --save-dev
npm install karma-nyan-reporter --save-dev

で、karmaの設定ファイルを初期化して、

./node_modules/.bin/karma init

さらに編集する。

vim karma.conf.js

karma.conf.js

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


    // list of files / patterns to load in the browser
    files: [
        'lib/jquery.min.js',
        'test/fixtures/**/*.html',
        'test/test.js'
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
        'test/**/*.html': 'html2js',
        'test/test.js': 'browserify'
    },
    browserify: {
      debug: true,
      transform: [
        ["babelify", {plugins: ["babel-plugin-espower"]}]
      ]
    },
    reporters: ['nyan'],

あと、package.jsonに以下を入れておく。

package.json

  "scripts": {
    "test": "karma start"
  },

で、フィクスチャー用のしこみ。

mkdir test/fixtures
touch test/fixtures/index.html
vim test/fixtures/index.html

divだけ書いておく。

test/fixtures/index.html

<div id="fixture"></div>

で、以下のようなテストを書いて、

test/test.js

import assert  from 'power-assert';
import BPlusA  from '../src/BPlusA.js';
import OneForm  from '../src/OneForm.js';

describe('test b plus a', () => {
  it('1+2は3である', () => {
    const sum = BPlusA.doCalc(1, 2);
    assert(sum === 3);
  });
});


describe( 'test set mode', () => {
  before(() => {
    document.body.innerHTML = window.__html__["test/fixtures/index.html"];
  });
  after(() => {
    document.body.innerHTML = "";
  });

  it('hiddenのmodeのvalueはconfirmである', () => {
    var fixture = $("#fixture");
    fixture.append("<input type=\"hidden\" name=\"mode\" value=\"\">");
    OneForm.setMode('confirm');
    assert( 'confirm' === $('input[name=mode]').val());
  });
});

以下で実行。

npm test

結果。

 2   -__,------,
 2   -__|  /\_/\ 
 0   -_~|_( ^ .^) 
 0   -_ ""  "" 

     2 total   2 passed   0 failed   0 skipped