JAsmine-jqueryテスト

前言
レイアウトが乱れている場合は、を参照してください.https://www.zybuluo.com/bornkiller/note/30734. フロントエンドテストフレームワークはkarmaを推奨し、断言ライブラリはjasmine断言ライブラリを推奨し、jasmine-ajax、jasmine-jqueryの拡張に合わせて、比較的完全なフロントエンドテストを実現することができる.jqueryに関するテストシーンは多くないかもしれませんが、備えはあります.
AMDモジュールの宣言
sampleモジュールを宣言し、emphasizeはDOM操作を行い、getContentはバックグラウンドからデータを取得します.仕様定義はrequirejsのAMDに従って実現すればよい.

// ./modules/jquery/sample.js
define(['jquery'], function($) {
  var sample = {};
  sample.emphasize = function() {
      $('h3:first').addClass('title-emphasize');
      $('p:first').addClass('content-emphasize');
  };

  sample.getContent = function() {
      $.getJSON('/api/content')
          .done(function(data) {
              $('h3:first').text(data.title);
              $('p:first').text(data.content);
          })
  };
  return sample;
});

ビュー定義
karmaデフォルトindex.htmlファイルbodyの内部は空で、テストを容易にすることを目的としています.ただし、DOM操作を行うモジュールはDOMに依存するため、viewを再定義し、テスト時に導入する必要があります.ここでは定義が簡単です.

love story
Love is complicated

モジュールテストjasmine.getFixtures().fixturesPathビューロード相対パスjasmine.getFixtures().loadビューコンテンツを現在のページにロードするように構成

define(['sample'], function(sample) {
    describe('just jquery test sample', function () {
        beforeEach(function () {
          jasmine.getFixtures().fixturesPath = '/base/views/';
          jasmine.getJSONFixtures().fixturesPath = '/base/configs';
        });

        beforeEach(function () {
          jasmine.getFixtures().load('sample.html');
          jasmine.Ajax.install();
        });

        it('just check view load', function () {
          expect($('h3:first')).toHaveClass('title');
          expect($('p:first')).toHaveClass('content');
        });

        it('just check sample module emphasize', function() {
            sample.emphasize();
            expect($('h3:first')).toHaveClass('title-emphasize');
            expect($('p:first')).toHaveClass('content-emphasize');
        });

        it('just check data load', function() {
            sample.getContent();
            expect(jasmine.Ajax.requests.mostRecent().url).toBe('/api/content');
            jasmine.Ajax.requests.mostRecent().response({
                "status": 200,
                "contentType": "application/json",
                "responseText": '{"title": "inception", "content": "youth is not a time of life"}'
            });
            expect($('h3:first')).toContainText('inception');
            expect($('p:first')).toContainText('youth is not a time of life');
        });

        afterEach(function () {
          jasmine.Ajax.uninstall();
        });
    });
});

思索をめぐらす
完全なAjaxリクエストを下図に示します.テストの観点から,サーバ応答を排除する必要があり,データテスト杭を構築して干渉することはできず,ユニットテストの基本原則を破壊した.同時に、この操作については、要求が正しく発行されたかどうか、データが戻った後にコールバック関数が所望の機能を実行したかどうかのみが気になる.したがって、個人的な感覚は、コールバック関数をspyに有効にするのではなく、最終的なページ表現を判定すべきである.この例では、とに対応する内容が含まれているかどうかをテストします.
連絡先
Email: [email protected]