UIの検証のためのユニットテスト

Question

2つの入力変数が2つのスコープ変数にバインドされた非常に単純なアングルフォームと、データベースの入力データを送信するコントローラ関数を呼び出す送信ボタンを想像してください。

私の質問はです。ユニットテストがこのスキームに適用される場合はです。たとえば、UIの入力検証をテストすることは可能でしょうか？

エンドツーエンドテスト（例：Selenium）に適用する必要がありますので、私の推測はノーです。

私は適切なテストを見つけるために苦労しています。例えば、入力フィールドの中でいくつかの文字をテストできないのでしょうか？

ユニットテストはコントローラメソッドとサービスのテストのためだけだと思いますか？

Answer 1

マニュアルを入力している場合（入力[番号]などのデフォルトの検証ルールのうち、検証作業を確認する必要があります）。

デフォルトの検証を使用している場合でも、ユーザーが無効なデータを入力した後でも入力値が正しいことを確認できます。

例：カスタム検証のための

describe('check default validation', function() { 
    var $scope, form; 
    beforeEach(module('exampleDirective')); 
    beforeEach(inject(function($compile, $rootScope) { 
    $scope = $rootScope; 
    var element = angular.element(
     '<form name="form">' + 
     '<input ng-model="model.somenum" name="somenum" integer />' + 
     '</form>' 
    ); 
    $scope.model = { somenum: null } 
    $compile(element)($scope); 
    form = $scope.form; 
    })); 

    describe('input type number should not accept string values', function() { 
    it('should pass with integer', function() { 
     form.somenum.$setViewValue('3'); 
     $scope.$digest(); 
     expect($scope.model.somenum).toEqual('3'); 
     expect(form.somenum.$valid).toBe(true); 
    }); 
    it('should not pass with string', function() { 
     form.somenum.$setViewValue('a'); 
     $scope.$digest(); 
     expect($scope.model.somenum).toBeUndefined(); 
     expect(form.somenum.$valid).toBe(false); 
    }); 
    }); 
}); 

例：

var scope, form; 

beforeEach(function() { 
    module('my-module'); 
    module('templates'); 
}); 

beforeEach(inject($rootScope, $controller, $templateCache, $compile) { 
    scope = $rootScope.$new() 

    ctrl = $controller('MyController'), { 
     "$scope": scope 
    } 

    templateHtml = $templateCache.get('path/to/my/template.html') 
    formElem = angular.element("<div>" + templateHtml + "</div>") 
    $compile(formElem)(scope) 
    form = scope.form 

    scope.$apply() 
} 

it('should not allow an invalid `width`', function() { 
    expect(form.$valid).toBeTruthy(); 
    form.number.$setViewValue('BANANA'); 
    expect(form.number.$valid).toBeFalsy() 
});