Модульное тестирование для проверки UI

Question

Представьте себе очень простое Форма Angular с двумя полями ввода, привязанными к двум переменным области видимости, и кнопкой отправки, которая вызывает функцию контроллера для отправки входных данных в базе данных.

Мой вопрос: , если к этой схеме могут применяться модульные испытания. Можно ли, например, проверить проверку входных данных?

Я думаю, что нет, так как я думаю, что это должно быть применено до конца тестирования (например, Selenium).

Я изо всех сил пытаюсь найти подходящий тест: например, как я могу проверить, не допускают ли некоторые символы в поле ввода?

Имею ли я право думать, что модульное тестирование предназначено только для тестирования методов контроллера и служб?

Answer 1

Если вы делаете что-то вручную (из правил проверки по умолчанию, таких как input [number], то вы должны проверить работу проверки).

Если вы используете проверку по умолчанию, вы все равно можете проверить правильность введенного ввода после того, как пользователь вводит некоторые недопустимые данные.

Примеры:

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() 
});