MochaとChaiを使用してフロントエンドアプリケーションのテストを開始する方法

警告：この投稿は古く、現在の最先端技術を反映していない可能性があります

モカは素晴らしくて用途の広いテストツールです。世の中には多くのテストフレームワークがありますが、その人気と使いやすさからモカを選びました。

まず、ブラウザでテストを実行する方法を見てみましょう。ダウンロード

それぞれのmocha.js、chai.js、chai-jquery.jsファイルをサイトのtest /サブフォルダーに配置します。

index.htmlファイルを選択してロードし、BDDテストスタイルを使用するようにMochaをセットアップし、テストルールをホストするtest.web.jsというファイルをロードします。

<script src="test/vendor/mocha.js" data-build-exclude="true"></script>
<script src="test/vendor/chai.js" data-build-exclude="true"></script>
<script src="test/vendor/chai-jquery.js" data-build-exclude="true"></script>
<script data-build-exclude="true">
  mocha.setup('bdd');
  expect = chai.expect;
</script>
<script src="test/test.web.js" data-build-exclude="true"></script>

あなたの体の中に、div＃mochaを入れてください：

<div id="mocha"></div>

test / test.web.jsファイルはゲームの主要部分であり、テストルールをホストします。

describe('Array', function(){
  describe('#indexOf()', function(){
    it('should return -1 when the value is not present', function(){
      [1,2,3].indexOf(5).should.equal(-1);
      [1,2,3].indexOf(0).should.equal(-1);
    })
  })
})
describe(‘After this’, function() {
it(‘should be logged in’, function(done) {
expect($(’#the-main-div’)).to.exist;
done();
});
});

これらのテストは、ブラウザコンソールを開いて入力することにより、ブラウザ内で実行できるようになりました。mocha.run()。

これは、テストの実行中に画面の変化を確認したり、コンソールメッセージを読んだりできるので便利です。

使用するPhantomJS-ヘッドレスWebKitの実装-ターミナルでテストを実行できます。欠点は、PhantomJSがコードを実行する実際の環境ではないことですが、問題の自動検出には適しています。

どうやるか？ PhantomJSをダウンロードしてインストールします。グローバルを使用してMochaをインストールしますnpmインストール：npm install -g mocha。このパッケージをダウンロードするhttps://github.com/Backbonist/front-tests、そしてそれをプロジェクトディレクトリに置きます。たとえば、test /の下に置きます。

次に、を呼び出してテストを実行できますphantomjs run-mocha.js http://test-site.com

このアプローチの問題は、テストが実行される実際の環境で実行されるテストをプログラムで実行できないことです。プロトタイプを作成し、一般に公開する前に開発する場合、これは実際には問題ではありませんが、本番環境では、テストするたびにブラウザーからテストスイートを実行する必要はありません。すべてのブラウザでね？Testemこのために作られています。これは単なるテストランナーであり、テストフレームワークに依存しないため、Mocha、Jasmine、QUnit、または使用しているものを実行できます。

$ npm install testem -g
アプリのテストディレクトリに移動し、次のように入力します$ testem
指定された場所でブラウザを開いて、テストを実行します。

テストは、起動して任意のブラウザで実行するか、起動してtestemにテストを実行するように指示できます。

$ testem -l Chrome,Safari

また、CI（継続的インテグレーション）モードでtestemを使用することもできます。

$ testem ci

これにより、ブラウザが指定したテストが自動的に起動し、TAPという名前の形式で出力されます。これは、人間が読み取り可能であり、継続的インテグレーションサーバーに入力してプロセスを自動化できます。

ブラウザのテスト

あなたはおそらくChromeまたはFirefoxであなたのサイトを開発するでしょう：彼らの開発者ツールは素晴らしいです、そして彼らはあなたがプロセスをスピードアップするのを助けます。

Google Chromeには、ウェブサイトのテストに使用できる個別のバージョンがあります。安定した通常のバージョン、およびChromeCanary。

Canaryは、通常のGoogleChromeと並べて実行できるブラウザです。その利点は、Chromiumソースにコミットされているものの更新を毎日取得し、メインの安定したChromeチャネルに送信される11週間前に新機能にアクセスできることです。ファイルのバグ必要に応じて。デフォルトのブラウザとして設定することもできます。

Mozillaには独自のものがありますFirefoxNightlyこれはChromeカナリアと同じことを行います。毎日更新がブラウザに届きます。

あなたは使用したいかもしれませんChromeDevチャネル、およびFirefoxオーロラこれは、カナリア/ナイトリーよりも「最先端の」バージョンではありません。

Safariをテストするには、WebKitナイトリービルド。 WebKitを使用する場合、基本的には、基盤となるエンジンの更新バージョンを使用してSafariを実行しています。

フロントエンドテストの概要

MochaとChaiを使用してフロントエンドアプリケーションのテストを開始する方法

ブラウザのテスト

その他のdevtoolsチュートリアル：