[Front-End General] CodePen 上で Mocha のテストを実行する方法

小ネタ。

[markdown]
> * [Mocha – the fun, simple, flexible JavaScript test framework](https://mochajs.org/#running-mocha-in-the-browser)

ライブラリは CDN 経由で読み込む。

“`prettyprinted
https://cdnjs.cloudflare.com/ajax/libs/mocha/3.1.0/mocha.min.css
https://cdnjs.cloudflare.com/ajax/libs/mocha/3.1.0/mocha.min.js
https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.min.js
“`

テスト結果の表示エリアを確保する。

“`html:HTML

“`

普通にテストを書いて、`mocha.setup(‘bdd’)` と `mocha.run()` で表示できる。

“`javascript:JavaScript
mocha.setup(‘bdd’);
var assert = chai.assert;
var expect = chai.expect;
var should = chai.should();
// Tests
describe(‘Calculation of the decimal fraction’, function() {
var x = 0.2 * 3;
var y = ((0.2 * 10) * 3) / 10;
it(‘should return 0.6 when 0.2 * 3’, function() {
x.should.equal(0.6);
});
it(‘should return 0.6 when ((0.2 * 10) * 3) / 10’, function() {
y.should.equal(0.6);
});
});
mocha.run();
“`

See the Pen Running Mocha in the browser by DriftwoodJP (@DriftwoodJP) on CodePen.

## 補遺

> * [4 ways to unit test JS in Codepen by BROWNERD on CodePen](http://codepen.io/brownerd/post/4-ways-to-unit-test-js-in-codepen)
> * [CodePen – JS | Testing | Mocha – test](http://codepen.io/elvirasantos/full/ZGLGWG)
[/markdown]