I am trying to test an AngularJS component using karma, mocha, power-assert. I have a textarea and a button in my component, where the button is disabled based on the length of text in textarea. Here's a bit of code.
inquiryForm.js
function inquiryForm($scope, action) {
var self = this;
self.handleSubmit = function () {
action.submit(self.inquiryText);
};
}
angular.module('myApp').component('inquiryForm', {
controller: inquiryForm,
controllerAs: 'inquiryForm',
templateUrl: 'inquiryForm.html'
});
inquiryForm.html
<div class="contact">
<div>Thanks for contacting us.</div>
<form ng-submit="inquiryForm.handleSubmit()" method="post">
<textarea ng-model="inquiryForm.inquiryText" name=""></textarea>
<input type="submit" value="SEND" ng-disabled="!inquiryForm.inquiryText.length">
</form>
</div>
inquiryFormTest.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();
});
});
const compileDirective = () => {
inject(($injector) => {
$compile = $injector.get('$compile');
element = $compile('<inquiry-form></inquiry-form>')($scope);
$scope.$digest();
});
};
describe('inquiry form', () => {
beforeEach(() => {
compileDirective();
});
it('disables the submit button if textbox is empty', () => {
assert(element.find('input').attr('disabled'), 'disabled');
});
it('enables the submit button if textbox is not empty', () => {
element.find('textarea').text('hello, world!');
console.log(element.find('textarea').text()); // expected: "hello, world!", actual: "hello, world!"
$scope.$apply();
console.log(element.find('textarea').text()); // expected: "hello, world!", actual: ""
console.log(element.find('input').attr('disabled')); // expected: "false", actual: "disabled"
});
});
});
As you can see in the code above, I tried to add text to textarea using the text function. The text does indeed render if I put a console.log before $scope.$apply(). But after that, the textarea returns to its original empty state and ng-disabled does not fire.
How can I make this ng-disabled fire with mock user input in textarea...
AFAIU it seems that reference to inquiryForm.inquiryText in the html is the missing piece in this puzzle - I am not providing any reference to it in the test case.
Aucun commentaire:
Enregistrer un commentaire