Skip to content

Instantly share code, notes, and snippets.

@taichi
Last active February 7, 2018 00:09
Show Gist options
  • Save taichi/4482819 to your computer and use it in GitHub Desktop.
Save taichi/4482819 to your computer and use it in GitHub Desktop.

Revisions

  1. taichi revised this gist Jan 29, 2013. No changes.
  2. taichi revised this gist Jan 16, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion testing_javascript.md
    Original file line number Diff line number Diff line change
    @@ -144,7 +144,7 @@ Jasmineのruns/waitsForのペアは、趣味の問題かもしれないけど、

    ### テストランナーは何を使うか

    * [testacular](http://vojtajina.github.com/testacular/)
    * [testacular](https://github.com/testacular/testacular)
    * [testem](https://github.com/airportyh/testem)
    * [yeti](http://yeti.cx/)
    * [js-test-driver](https://code.google.com/p/js-test-driver/)(非推奨)
  3. taichi revised this gist Jan 10, 2013. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions testing_javascript.md
    Original file line number Diff line number Diff line change
    @@ -147,17 +147,17 @@ Jasmineのruns/waitsForのペアは、趣味の問題かもしれないけど、
    * [testacular](http://vojtajina.github.com/testacular/)
    * [testem](https://github.com/airportyh/testem)
    * [yeti](http://yeti.cx/)
    * [js-test-driver](https://code.google.com/p/js-test-driver/)

    * [js-test-driver](https://code.google.com/p/js-test-driver/)(非推奨)
    僕としてはガッツリコントリビュートしているtestacularを推しておきますけども、testemも悪く無いと思いますよ、ええ。

    ファイルの変更を検知してテストが実行される事に慣れると、
    開発におけるテンポ感が根底から変化しますので、どちらかを使うとよろしいかと思います
    開発におけるテンポ感が根底から変化しますので、どれかを使うとよろしいかと思います
    Gruntjsのwatchタスクからガチャガチャやっても出来るかと思います。

    testacular や testemを使うと、テスティングフレームワークのレポーターが拡張されていて、
    ブラウザによるテストであるにも関わらずjunitフォーマットのレポートが出せたりTAPフォーマットで標準出力出来たりする
    JunitフォーマットのテストレポートがあるとJenkinsさんが良い感じに働いてくれるですよ
    ブラウザによるテストであるにも関わらずJUnitフォーマットのレポートが出せたりTAPフォーマットで標準出力出来たりする
    JUnitフォーマットのテストレポートがあるとJenkinsさんが良い感じに働いてくれるですよ

    testacularなら、Jasmine, Mocha, QUnitでコードカバレージ取れる。
    mochaはコードカバレージ取る機能あるけど残りの2つには無いからねぇ。
  4. taichi revised this gist Jan 9, 2013. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions testing_javascript.md
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,5 @@
    # javascript におけるユニットテストについて (2013/01)
    ここの所、数か月おきにjsのユニットテストってどうやるのが良いのか悩んでいる気がするので、
    一つ情報集約の為にメモ書きをしておきます。
    ここの所、数か月おきにjsのユニットテストってどうやるのが良いのか悩んでいる気がするので、一つ情報集約の為にメモ書きをしておきます。

    何かちゃんと文章書いておけば、それに対する反応が集まって、オレサマハッピー的な展開を望んでいます。

  5. taichi revised this gist Jan 9, 2013. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions testing_javascript.md
    Original file line number Diff line number Diff line change
    @@ -157,8 +157,8 @@ Jasmineのruns/waitsForのペアは、趣味の問題かもしれないけど、
    Gruntjsのwatchタスクからガチャガチャやっても出来るかと思います。

    testacular や testemを使うと、テスティングフレームワークのレポーターが拡張されていて、
    ブラウザによるテストであるにも関わらず、junitフォーマットのレポートが出せたり、
    TAPフォーマットで標準出力出来たりする。
    ブラウザによるテストであるにも関わらずjunitフォーマットのレポートが出せたりTAPフォーマットで標準出力出来たりする。
    JunitフォーマットのテストレポートがあるとJenkinsさんが良い感じに働いてくれるですよ。

    testacularなら、Jasmine, Mocha, QUnitでコードカバレージ取れる。
    mochaはコードカバレージ取る機能あるけど残りの2つには無いからねぇ。
  6. taichi revised this gist Jan 9, 2013. 1 changed file with 7 additions and 0 deletions.
    7 changes: 7 additions & 0 deletions testing_javascript.md
    Original file line number Diff line number Diff line change
    @@ -156,4 +156,11 @@ Jasmineのruns/waitsForのペアは、趣味の問題かもしれないけど、
    開発におけるテンポ感が根底から変化しますので、どちらかを使うとよろしいかと思います。
    Gruntjsのwatchタスクからガチャガチャやっても出来るかと思います。

    testacular や testemを使うと、テスティングフレームワークのレポーターが拡張されていて、
    ブラウザによるテストであるにも関わらず、junitフォーマットのレポートが出せたり、
    TAPフォーマットで標準出力出来たりする。

    testacularなら、Jasmine, Mocha, QUnitでコードカバレージ取れる。
    mochaはコードカバレージ取る機能あるけど残りの2つには無いからねぇ。


  7. taichi revised this gist Jan 9, 2013. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions testing_javascript.md
    Original file line number Diff line number Diff line change
    @@ -147,6 +147,7 @@ Jasmineのruns/waitsForのペアは、趣味の問題かもしれないけど、

    * [testacular](http://vojtajina.github.com/testacular/)
    * [testem](https://github.com/airportyh/testem)
    * [yeti](http://yeti.cx/)
    * [js-test-driver](https://code.google.com/p/js-test-driver/)

    僕としてはガッツリコントリビュートしているtestacularを推しておきますけども、testemも悪く無いと思いますよ、ええ。
  8. taichi revised this gist Jan 8, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion testing_javascript.md
    Original file line number Diff line number Diff line change
    @@ -35,7 +35,7 @@
    ### テストスタイル
    xUnit気味なのか、BDD気味なのかってのは、単にキーワード的な違いでしかないのでは?と思っている。
    describe/it スタイルとsuite/test スタイルは見た目上の違いしか無いよね。
    僕としては__describe__はタイピングし辛いので、余り好きではない。
    僕としてはdescribeはタイピングし辛いので、余り好きではない。

    ### アサーションスタイル
    サーバサイドをnodeに限定するつもりはなくて、僕の場合は恐らくnodeでプロトタイピングしたらjavaで作り直す位の事はする訳です。
  9. taichi revised this gist Jan 8, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion testing_javascript.md
    Original file line number Diff line number Diff line change
    @@ -35,7 +35,7 @@
    ### テストスタイル
    xUnit気味なのか、BDD気味なのかってのは、単にキーワード的な違いでしかないのでは?と思っている。
    describe/it スタイルとsuite/test スタイルは見た目上の違いしか無いよね。
    僕としては_describe_はタイピングし辛いので、余り好きではない。
    僕としては__describe__はタイピングし辛いので、余り好きではない。

    ### アサーションスタイル
    サーバサイドをnodeに限定するつもりはなくて、僕の場合は恐らくnodeでプロトタイピングしたらjavaで作り直す位の事はする訳です。
  10. taichi revised this gist Jan 8, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion testing_javascript.md
    Original file line number Diff line number Diff line change
    @@ -35,7 +35,7 @@
    ### テストスタイル
    xUnit気味なのか、BDD気味なのかってのは、単にキーワード的な違いでしかないのでは?と思っている。
    describe/it スタイルとsuite/test スタイルは見た目上の違いしか無いよね。
    僕としては'describe'はタイピングし辛いので、余り好きではない
    僕としては_describe_はタイピングし辛いので、余り好きではない

    ### アサーションスタイル
    サーバサイドをnodeに限定するつもりはなくて、僕の場合は恐らくnodeでプロトタイピングしたらjavaで作り直す位の事はする訳です。
  11. taichi created this gist Jan 8, 2013.
    158 changes: 158 additions & 0 deletions testing_javascript.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,158 @@
    # javascript におけるユニットテストについて (2013/01)
    ここの所、数か月おきにjsのユニットテストってどうやるのが良いのか悩んでいる気がするので、
    一つ情報集約の為にメモ書きをしておきます。

    何かちゃんと文章書いておけば、それに対する反応が集まって、オレサマハッピー的な展開を望んでいます。

    ## そもそも何を探しているのか
    単体テストというか、ユニットテストというか、そういうアレを書く為のフレームワークを探しています。
    覚える事が少なくて強力なやつ。

    機能テストというか、e2eテストいうか、そういうアレの事は別途考える必要がありますので、今回はスコープ外とします。

    ## テスティングフレームワーク
    * [Jasmine](http://pivotal.github.com/jasmine/)
    * [Mocha](http://visionmedia.github.com/mocha/)
    * その他の皆様
    * [QUnit](http://qunitjs.com/)
    * [Nodeunit](https://github.com/caolan/nodeunit)
    * [Vows](http://vowsjs.org/)
    * [Buster.JS](http://docs.busterjs.org/en/latest/)

    結局の所、[今はJasmineが一番人気っぽい](http://dailyjs.com/2012/12/24/javascript-survey-results/)けどエッジな人々を観測していると、どうもmocha推しが増えている様な気がする。
    そういうボンヤリした問題意識が僕の頭の中にうっすらとあってモヤモヤしているので良くない。
    自分にとって納得いくようにキチンと整理してしまおうと言うのが、この文章の意図である訳です。

    ## 選択する時に考えた事

    ### テスト対象はサーバかブラウザか、その両方か。
    テスト対象のコードが、どの様なランタイムで動くのか?ってのは結構大事な事で、
    それが違ったくらいで、テストコードの書き方が変わったりだとか作法に大幅なズレがあると辛いなぁ…と思う訳ですよ。
    僕はテストがしたいんであって、テスティングフレームワークを覚えたいんでは無いのでね。

    つまり、nodeとブラウザの両方で余り変な細工せずともちゃんと動いて欲しいのです。

    ### テストスタイル
    xUnit気味なのか、BDD気味なのかってのは、単にキーワード的な違いでしかないのでは?と思っている。
    describe/it スタイルとsuite/test スタイルは見た目上の違いしか無いよね。
    僕としては'describe'はタイピングし辛いので、余り好きではない

    ### アサーションスタイル
    サーバサイドをnodeに限定するつもりはなくて、僕の場合は恐らくnodeでプロトタイピングしたらjavaで作り直す位の事はする訳です。
    隣に座ってる若いのはRubyistだし、今の一番弟子はPythonistaだし、変に凝り固まると老害呼ばわりされかねず、それは恐ろしい。

    #### assert
    APIセットが非常に小さく覚えるべき事柄が少ないのが良いですね。

    - nodejsのassertライブラリ

    ```javascript
    var actual = doSomething();
    assert(2 > actual && actual < 13);
    ```

    - chai.jsのassert API にあるoperatorメソッド

    ```javascript
    var actual = doSomething();
    assert.operator(actual, '>', 2);
    assert.operator(actual, '<', 13);
    ```

    テストコードのアサート部分にコードを書いた人間の意図が十分に残らない可能性があるし、
    言語機能を十分に理解していなければ適切なアサートコードを書く事は出来ません。
    APIを覚えなくても良い代わりにイディオムの様なものを沢山覚えるか捻り出す必要があります。

    #### should/expect
    可読性が上がるらしいです。僕にはその原理が良く分からないのですよね。

    - Jasmineの場合、これしか選べません。

    ```javascript
    var actual = doSomething();
    expect(actual).toBeGreaterThan(2);
    expect(actual).toBeLessThan(13);
    ```

    - should.js

    ```javascript
    var actual = doSomething();
    actual.should.be.above(2);
    actual.should.be.below(13);
    ```

    - chai.js の expect API

    ```javascript
    var actual = doSomething();
    expect(actual).to.be.above(2);
    expect(actual).to.be.below(13);
    ```

    expectから必ず始めるってのは、確かに分かり易い感はありますね。
    しかしもってAPIが膨大にあって、そのボキャブラリをどれだけ抑えれば良いのか分からないのが嫌な感じがします。
    言語機能を使うのではなく、妥当なAPIを使うべきとのスタンスはどうも応用性が低いのではないかなぁ…と思います。
    所で、入力補完がそれ程上手く効く訳でもないのにJasmineのアサートメソッド名は長過ぎやしませんか?

    shouldの黒魔術感は半端無いですね。 この記法はRSpec由来でしょうか…

    ### モックライブラリ
    簡単でそれなりに強力なものが入ってるのがJasmine。
    [sinon.js](http://sinonjs.org/)を使うのがMocha。

    - Jasmineのspy

    ```javascript
    var whatAmI = jasmine.createSpy('whatAmI');
    whatAmI("I", "am", "a", "spy");

    expect(whatAmI).toHaveBeenCalledWith("I", "am", "a", "spy");
    ```

    - sinon.js

    ```javascript
    var whatAmI = sinon.spy();
    whatAmI("I", "am", "a", "spy");

    assert(whatAmI.calledWith("I", "am", "a", "spy"));
    ```

    基礎的な部分だけ何となく眺めても違いが良く分からない程度にはJasmineのSpy APIは強力です。
    加えて、[sinon.jsとjasmineを接合するライブラリ](https://github.com/froots/jasmine-sinon)もあります。

    ### 非同期処理のテスト
    javascriptでコードを書く以上、非同期処理とかコールバックとかpromiseとかコントロールフローとか、
    何かそういうアレソレから逃れる事は出来ない訳で、そういうコードを上手くテストする事が望まれる訳です。

    - [Jasmineで非同期処理のテスト](http://d.hatena.ne.jp/hagino_3000/20111009/jasmine)
    - Mocha で非同期処理のテストは、Jasmineに比べると理解し易い。

    ```
    describe('User', function() {
    describe('#save()', function() {
    it('should save without error', function(done) {
    var user = new User('Luna');
    user.save(done);
    });
    });
    });
    ```

    つまり、テストメソッドに引数として入ってくるdoneを呼べばそれでよろしいって話です。
    Jasmineのruns/waitsForのペアは、趣味の問題かもしれないけど、僕にとっては凄く分り辛いですね。

    ### テストランナーは何を使うか

    * [testacular](http://vojtajina.github.com/testacular/)
    * [testem](https://github.com/airportyh/testem)
    * [js-test-driver](https://code.google.com/p/js-test-driver/)

    僕としてはガッツリコントリビュートしているtestacularを推しておきますけども、testemも悪く無いと思いますよ、ええ。

    ファイルの変更を検知してテストが実行される事に慣れると、
    開発におけるテンポ感が根底から変化しますので、どちらかを使うとよろしいかと思います。
    Gruntjsのwatchタスクからガチャガチャやっても出来るかと思います。