Testing JavaScript

name: inverse
layout: true
class: center, middle, inverse
---
# Testing JavaScript
## Shuhei Kagawa
---
layout: false

## アジェンダ
1. 背景
2. E2E テスト
3. 単体テスト
4. Rails でのテスト
---
## 背景

- JavaScript の量は増えるばかり。
- JavaScript が壊れると、サイトが壊れているように見える。
- サーバサイドのテストコードだけじゃ不安。
- コントロールしにくい性質（動的）。
- さまざまなブラウザ。

---
## E2E テスト

手動のテストをコード化する感じ。

アプリ全体の機能が壊れないか、ざっくりみることができる。

---

## 環境

### CasperJS

- (Java|Coffee)Script でテストを書く。シームレスにクライアントのスクリプトと連携できる。
- 環境構築が簡単。バイナリ入れるだけ。
- Windows にも比較的簡単に導入できる。

### Capybara

- Ruby でテストを書く。慣れれば簡単。コールバック地獄にならない。
- Capybara driver を変えれば、そのまま Selenium などでも使える。
- ヘッドレスブラウザなら Capybara Webkit よりも、PhantomJS を使う Poltergeist がおすすめ（名前が中二病・・・）。

---

## しかし遅い

CI には良いけど・・・ .red[遅すぎる！！！]

あまり細かいケースをたくさん書くと、開発しながら実行できない。

もっと速くて、細かいテストができないか？

---

## そこで単体テスト

HTML/JS をブラウザで開くだけ。

アプリケーションサーバを動かす必要がない。

```js
describe('Array', function () {
    describe('#indexOf()', function () {
        it('should return -1 when the value is not present', function () {
            expect([1, 2, 3].indexOf(5)).to.eq(-1);
            expect([1, 2, 3].indexOf(0)).to.eq(-1);
        });

it('should return the correct index when the value is present', function () {
            expect([1, 2, 3].indexOf(1)).to.eq(0);
            expect([1, 2, 3].indexOf(3)).to.eq(2);
        });
    });
});
```

こんな感じで書くと・・・

---

![Mocha HTML Reporter](./img/reporter-html.png)

---
class: center, middle, inverse

# 爆速！

---

## テストフレームワーク

### Jasmine

- テストランナー、アサーション、モックのオールインワン。
- IE でも問題なく動く。おすすめ。

### Mocha + Chai (or Expect.js)

- 後発でシンプル。テストランナーとマッチャーは別。
- `Object.defineProperty` を多用しているので、IE 8 以前で動かない。
- 文法に欠陥 `expect(superman).to.be.spiderman // Pass!`

### QUnit

- jQuery のテストのために作られた。ちょっとレガシー。

---
## モック

[Sinon.JS](http://sinonjs.org/) で、テストそのものに関係ないオブジェクトや関数をモックできる。

AJAX も！

```js
var server;
before(function () { server = sinon.fakeServer.create(); });
after(function () { server.restore(); });

it('calls callback with deserialized data', function () {
    var callback = sinon.spy();
    getTodos(42, callback);

// This is part of the FakeXMLHttpRequest API
    server.requests[0].respond(
        200,
        { 'Content-Type': 'application/json' },
        JSON.stringify([{ id: 1, text: 'Provide examples', done: true }])
    );

assert(callback.calledOnce);
});
```

---

## マルチブラウザテストツール

マルチブラウザでテストするツールがいろいろ。

- [Testem](https://github.com/airportyh/testem)
- [Karma](http://karma-runner.github.io/)

アプリケーションサーバと別に動作するツールがはやり。テスト用のサーバを立てて実行、結果を表示。TDD にも CI にも。

アプリフレームワーク/テストフレームワーク関係なく使える。

---

## CoffeeScript

テストだけは CoffeeScript にしても。書きやすい・・・。

```js
describe('Foo', function () {
    describe('#bar', function () {
        it ('works like a charm', function () {
          expect(true).to.be.true
        });
    });
});
```

```coffee
describe 'Foo', ->
    describe '#bar', ->
        it 'works like a charm', ->
          expect(true).to.be.true
```

---

## View のテスト

ミニマムの Fixture で View もテスト。
外部ファイル読み込むライブラリあるが、良くない面も。大きくなりがち。
CoffeeScript でマルチラインテキスト。

```js
function useFixture(html) {
    var fixture;
    beforeEach(function () {
        fixture = $(html).appendTo('body');
    });
    afterEach(function () {
        fixture.remove();
    });
}

describe('doSomething', function () {
    useFixture('<div class="somewhere">');

it('actually does something', function () {
        doSomething();
        expect($('.somewhere .something').length > 0).to.be.true;
    });
});
```

---

## JavaScript の管理

テストするには、テスト対象のオブジェクト/関数にアクセスする必要がある。

- 全てグローバルだとやばい...
- closure の中だと、アクセスできない

```js
// どうやってテストする？
jQuery(function ($) {
    function enlarge(selector) {
        $(selector).addClass('large');
    }
    enlarge('.something');
});
```

適度な露出が必要・・・。

---

## Namespace

```js
var M3 = {};
M3.Utils = M3.Utils || {};

(function ($) {
    function enlarge(selector) {
        $(selector).addClass('large');
    }
    M3.Utils.enlarge = enlarge;
})(jQuery);

jQuery(function ($) {
  M3.Utils.enlarge('.something');
});
```

```js
describe('M3.Utils.enlarge', function () {
    useFixture('<div class="ear">');

it('adds large class', function () {
        M3.Utils.enlarge('.ear');
        expect($('.ear').hasClass('large')).to.be.true;
    });
});
```

---

## ちなみに Rails だと・・・

Assets Pipeline あるので、特殊。

### Unit Testing: Konacha

- `rake konacha:run` TDD, CI 向き
- `rake konacha:serve` デバッグ向き
- thin 使わないと、ハングする

（Teaspoon というのの方がいいかも。未調査。）

### E2E Testing: Capybara + Poltergeist

メリットは Rails の test env が使えること。できないと、テスト環境用意して・・・となる。

---
class: center, middle, inverse

## おわり