LoginSignup
7
7

More than 5 years have passed since last update.

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

Last updated at Posted at 2013-04-21

まずはJasmineでjavasciprtテスト

導入

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

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

cd テスト用ディレクトリ(どこでもOK)

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

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を立ち上げます

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を立ち上げます

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/

7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
7