web-dev-qa-db-ja.com

angular formディレクティブの単体テストで入力フィールドにビュー値を設定する

フォームを作成するディレクティブがあります：

app.directive('config', function() {
  return {
    restrict: 'E',
    scope: {
      data: '='
    },
    template: '<form name="configForm">' +
      '<input type="number" max="10" ng-model="config.item" name="configItem"/>' +
      '<div class="form-error" ng-show="configForm.$error.max">Error</div>' + 
      '</form>',
    controller: 'ConfigDirectiveController',
  };
});

私がしたいことは、ユニットテストを介して、入力が与えられるとエラーメッセージが表示されることを検証することです。 angular 1.2を使用すると、$ scope.config.itemを変更でき、ビューの値が更新され、エラーが表示されます。

私が知る限り、angular 1.3で、モデルが検証に合格しなかった場合、ビューの値は更新されません...メッセージが表示されます。

エラーメッセージが表示されるようにビュー値を設定できるように、「configItem」入力にアクセスするにはどうすればよいですか？

単体テストを表示するように編集

値が適切に設定されていることがわかりますが、エラーにはまだng-hideがタグに適用されています。ページを表示して入力値を手動で変更すると、ng-hideが削除され、10より大きい値を入力するとエラーが表示されます。

  beforeEach(inject(function($compile, $rootScope) {
      element = angular.element('<config data="myData"></config>');
      $scope = $rootScope.$new();
      $scope.myData = {};
      element = $compile(element)($scope);
    }));

    it('should warn that we have a large number', function() {
      var input = element.find('[name="configItem"]')[0];
      $scope.$apply(function() {
        angular.element(input).val('9000000001');
      });
      errors = element.find('[class="form-error ng-binding"]');
      expect(errors.length).toBe(1);
    })
angularjsunit-testingangular-directive
34
nathasm

入力ベースのディレクティブを単体テストする方法を以下に示します（わかりやすくするために多くのコードは省略されています！）重要な行は次のとおりです。

angular.element(dirElementInput).val('Some text').trigger('input');

完全な単体テストは次のとおりです。

  it('Should show a red cross when invalid', function () {

    dirElement = angular.element('<ng-form name="dummyForm"><my-text-entry ng-model="name"></my-text-entry></ng-form>');

    compile(dirElement)(scope);
    scope.$digest();

    // Find the input control: 
    var dirElementInput = dirElement.find('input');

    // Set some text!
    angular.element(dirElementInput).val('Some text').trigger('input');
    scope.$apply();

    // Check the outcome is what you expect! (in my case, that a specific class has been applied)
    expect(dirElementInput.hasClass('ng-valid')).toEqual(true);
  });
63
Ben Heymink

Angular jQueryを使用しているが、Angular jQueryなし（jqliteを使用）の場合、代わりにtriggerHandlerを使用できます。完全なAPIについては here を参照）

it('foos to the bar', function() {
  el.val('Foo').triggerHandler('input');

  // Assuming el is bound to scope.something using ng-model ...
  expect(scope.something).toBe('Foo');
});
31
OrganicPanda