Я пытаюсь протестировать компонент AngularJS, используя karma, mocha, power-assert. У меня есть текстовое поле и кнопка в моем компоненте, где кнопка отключена в зависимости от длины текста в текстовом поле.
Когда я запускаю компонент в браузере, он работает отлично. Но я не могу понять, как проверить эту функцию.
Вот немного кода.
запросForm.js
function inquiryForm($scope) {
// i plan to add some logic here
}
angular.module('myApp').component('inquiryForm', {
controller: inquiryForm,
controllerAs: 'inquiryForm',
templateUrl: 'inquiryForm.html'
});
форма запроса.html
<div class="contact">
<div>Thanks for contacting us.</div>
<form>
<textarea ng-model="inquiryForm.inquiryText" name=""></textarea>
<input type="submit" value="SEND" ng-disabled="!inquiryForm.inquiryText.length">
</form>
</div>
запросFormTest.js
describe('inquiry form ', () => {
let $rootScope;
let $scope;
let $compile;
let element;
beforeEach(() => {
angular.mock.module('myApp');
inject(($injector) => {
$rootScope = $injector.get('$rootScope');
$scope = $rootScope.$new();
$compile = $injector.get('$compile');
});
});
const compileDirective = () => {
element = $compile('<inquiry-form></inquiry-form>')($scope);
$scope.$digest();
};
describe('inquiry form', () => {
beforeEach(() => {
compileDirective();
});
// this test passes
it('disables the submit button if textbox is empty', () => {
assert(element.find('input').prop('disabled'), true);
});
// this test fails
it('enables the submit button if textbox is not empty', () => {
// making some changes to DOM here
element.find('textarea').text('hello, world!');
console.log(element.find('textarea').text()); // expected: "hello, world!", actual: "hello, world!"
// since the state of scope has changed, I call digest to reflect those
$scope.$digest();
// this assert passes
assert(element.find('textarea').text(), 'hello, world!');
// this one fails.
assert(element.find('input').prop('disabled'), false);
});
});
});
Как вы можете видеть в комментариях выше, второй тест не проходит. Я предполагаю, что тест провалился, так как состояние html не было отражено в контроллере компонентов inquiryForm
. Конечно, DOM textarea обновляется, но директива ng-disabled
не срабатывает, поскольку контроллер компонента inquiryForm
не подключен к области.
Как я могу сделать этот огонь с отключенным ng с имитацией пользовательского ввода в текстовой области...
describe
dinquiry form
. Вы пытались назвать имя с помощьюname="inquiry form"
- person mattyman   schedule 11.07.2016describe
в unittest может ссылаться на объект angular js. Я пробовал это, хотя, и это не сработало. - person   schedule 12.07.2016