3

私はこのようなフォームを装飾しています:

angular.module('Validation').directive('form', function() {
  return {
    restrict: 'E',
    link: function(scope, element) {
      var inputs = element[0].querySelectorAll('[name]');

      element.on('submit', function() {
        for (var i = 0; i < inputs.length; i++) {
          angular.element(inputs[i]).triggerHandler('blur');
        }
      });
    }
  };
});

今、私はこのディレクティブをテストしようとしています:

describe('Directive: form', function() {
  beforeEach(module('Validation'));

  var $rootScope, $compile, scope, form, input, textarea;

  function compileElement(elementHtml) {
    scope = $rootScope.$new();
    form = angular.element(elementHtml);
    input = form.find('input');
    textarea = form.find('textarea');
    $compile(form)(scope);
    scope.$digest();
  }

  beforeEach(inject(function(_$rootScope_, _$compile_) {
    $rootScope = _$rootScope_;
    $compile = _$compile_;

    compileElement('<form><input type="text" name="email"><textarea name="message"></textarea></form>');
  }));

  it('should trigger "blur" on all inputs when submitted', function() {
    spyOn(input, 'trigger');
    form.triggerHandler('submit');
    expect(input.trigger).toHaveBeenCalled(); // Expected spy trigger to have been called.
  });
});

しかし、テストは失敗します。

このディレクティブをテストする正しい Angular の方法は何ですか?

4

3 に答える 3

1

これはおそらく、テスト中に「submit」イベントを発生させることに関係しています。

angularチームは、これを行うのに役立つかなりファンキーなクラスを作成しました。これは、多くのエッジケースをカバーしているようです-https://github.com/angular/angular.js/blob/master/src/ngScenario/browserTrigger.jsを参照してください

このヘルパーは ngScenario のものですが、単体テストで使用して、PhantomJS などのヘッドレス ブラウザーでいくつかのイベントを発生させる問題を克服しています。

これを使用して、フォームが送信されたときにアクションを実行する非常によく似たディレクティブをテストする必要がありました。こちらのテストをご覧ください https://github.com/jonsamwell/angular-auto-validate/blob/master/tests/config/ngSubmitDecorator. spec.js (38 行目を参照)。

開発テストの目的でヘッドレス ブラウザを使用しているため、これを使用する必要がありました。このタイプのブラウザーでイベントをトリガーするには、イベントをトリガーしている要素も dom にアタッチする必要があるようです。

また、フォーム ディレクティブは angular が既に持っているディレクティブであるため、このディレクティブを装飾するか、このディレクティブに新しい名前を付ける必要があります。form ディレクティブの代わりに ngSubmit ディレクティブを装飾することをお勧めします。オープンソースの検証モジュールでこれを行ったので、実際にはこれの非常に良い例があります。これにより、非常に良いスタートが切れるはずです。

ディレクティブのソースはこちら

指令テストはこちら

于 2014-07-02T20:39:12.480 に答える