javascriptの自動テスト化して楽をする！(まだβ版のjasmine-standalone-2.0.0を使ってるよ）導入編


### まずはJasmineでjavasciprtテスト	

#### 導入

```bash
cd /usr/loca/src/
git clone git://github.com/pivotal/jasmine.git
```

#### テスト用ディレクトリに移動

```bash
cd テスト用ディレクトリ（どこでもOK）
```

#### テスト用ディレクトリにjasmineを配置

```bash
sudo cp /usr/local/src/jasmine/dist/jasmine-standalone-2.0.0-alpha.zip ./
unzip jasmine-standalone-2.0.0-alpha.zip -d jasmine
````

展開したら次の様になります。

```ディレクトリ構成
jasmine
|- SpecRunner.html ・・・テストページ
|- lib ・・・jasmineライブラリ
|- spec ・・・テストケース
|- src ・・・テスト用ソース
```

### テスト実施

#### テストページ

```SpecRunner.html

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Jasmine Spec Runner v2.0.0-alpha</title>

  <link rel="shortcut icon" type="image/png" href="lib/jasmine-2.0.0-alpha/jasmine_favicon.png">
  <link rel="stylesheet" type="text/css" href="lib/jasmine-2.0.0-alpha/jasmine.css">

  <script type="text/javascript" src="lib/jasmine-2.0.0-alpha/jasmine.js"></script>
  <script type="text/javascript" src="lib/jasmine-2.0.0-alpha/jasmine-html.js"></script>
  <script type="text/javascript" src="lib/jasmine-2.0.0-alpha/boot.js"></script>

  <!-- include source files here... -->
<!--
  <script type="text/javascript" src="src/Player.js"></script>
  <script type="text/javascript" src="src/Song.js"></script>
-->

  <!-- include spec files here... -->
<!--
  <script type="text/javascript" src="spec/SpecHelper.js"></script>
  <script type="text/javascript" src="spec/PlayerSpec.js"></script>
-->

  <script type="text/javascript" src="spec/test.js"></script>
  <script type="text/javascript">
    (function() {
      var jasmineEnv = jasmine.getEnv();
      jasmineEnv.updateInterval = 1000;

      var htmlReporter = new jasmine.HtmlReporter();

      jasmineEnv.addReporter(htmlReporter);

      jasmineEnv.specFilter = function(spec) {
        return htmlReporter.specFilter(spec);
      };

      var currentWindowOnload = window.onload;

      window.onload = function() {
        if (currentWindowOnload) {
          currentWindowOnload();
        }
        execJasmine();
      };

      function execJasmine() {
        jasmineEnv.execute();
      }

    })();
  </script>

</head>

<body>
</body>
</html>
```

#### テストケース作成

とりあえず、変数に入ってる値がint型の123である事をテストします

```spec/test.js
describe("Player", function() {
  var aa;

  //事前処理
  beforeEach(function() {
    aa = 123;
  });

  //テストケース
  it("A処理のバリデーションチェック", function() {
    expect(aa).toEqual(123);  
  });
});
```

#### WEBrickを立ち上げます

```bash
ruby -rwebrick -e 's = WEBrick::HTTPServer.new(:Port=>39999, :DocumentRoot=>Dir.pwd, :CGIInterpreter=>"/usr/local/bin/ruby -Eutf-8:utf-8");trap("INT"){s.shutdown};s.start'
```

ブラウザで
http://localhost:39999/SpecRunner.htmlにアクセスすればテスト結果を見る事ができます。
正常時なはずなので
1 spec, 0 failures, 1 pending spec
と表示されているはずです。

#### エラー時の挙動確認

```spec/test.js
describe("Player", function() {
  var aa;

  //事前処理
  beforeEach(function() {
    aa = '123';
  });

  //テストケース
  it("A処理のバリデーションチェック", function() {
    expect(aa).toEqual(123);    
  });
});
```

#### エラー確認の為に、再度WEBrickを立ち上げます

```bash
ruby -rwebrick -e 's = WEBrick::HTTPServer.new(:Port=>39999, :DocumentRoot=>Dir.pwd, :CGIInterpreter=>"/usr/local/bin/ruby -Eutf-8:utf-8");trap("INT"){s.shutdown};s.start'
```

ブラウザで
http://localhost:39999/SpecRunner.htmlにアクセスすればテスト結果を見る事ができます。
正常時なはずなので
1 spec, 1 failure
と表示されているはずです。

これで、jasmineでのテスト入門は完了です。
次はjenkinsとの連動して、テスト自動化してみますー。

### その他
マッチャ一覧
http://nacika.com/entry/2013/01/03/055820/