Chrome Extensionのテストにjasmineを使う

イライラ駆動開発として久しぶりにChrome Extensionを作成しました。
その際に testing frameworkとしてjasmineを使おうとしたのですが
ググってみると「最新のjasmineをダウンロードしてアレとコレをコピーして使え」みたいな記事ばっかりで
npmでinstallしてサクッとできるようになんないのかと試行錯誤してみました。
理想はrubyのgemspecとかGemfileみたいなイメージ。
 

npmでjasmineをinstallする

npmではdevDependenciesで管理すればとりあえずinstallできます。

// package.json

  "devDependencies": {
    "jasmine": "~2.4.0",
  }

あとは npm install すればok。

SpecRunner.html を用意する

npm で install すると node前提なのか知りませんが、SpecRunner.html
(これをブラウザで開けばtest実行してくれるhtml)が用意されていません。
ブラウザでテスト実行したい場合は自分で用意する必要があります。
githubからjasmineの最新版をダウンロードするとSpecRunner.htmlがありますのでこれを元に作成します。
background.js のテストを行う場合、こんな感じです。

# spec/SpecRunner.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Jasmine Spec Runner v2.4.1</title>

  <link rel="shortcut icon" type="image/png" href="../node_modules/jasmine-core/images/jasmine_favicon.png">
  <link rel="stylesheet" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">

  <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
  <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
  <script src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>

  <script src="helpers/mock.js"></script>

  <!-- include source files here... -->
  <script src="../js/background.js"></script>

  <!-- include spec files here... -->
  <script src="backgroundSpec.js"></script>

</head>

<body>
</body>
</html>

これを手動で用意するのが残念ですね。

mock.js

Chrome ExtensionはChromeAPIを利用しますので必要に応じてmockを作成する必要があります。

// spec/helpers/mock.js
chrome = {
  commands: {
    onCommand: {
      addListener: function() {
      }
    }
  },
  browserAction: {
    onClicked: {
      addListener: function() {
      }
    }
  }
};

テスト書いて実行

ここまで来たら、テストを書いて実行するだけ。
実行はとりあえずブラウザでSpecRunner.htmlを開いて実行します。
(consoleによる実行は後で試す。)
f:id:rochefort:20160303030045p:plain

jasmineについて

context(describe)のnestだとかrspecっぽい記法だとかで
rspecユーザならすんなりテスト書けるとかと思います。
まぁでも power-assert 使えばよかったかなと、少し後悔(次はpower-assert使おう)。