Angularjs unit testing - ng-disabled not working when adding text to textarea -
i trying test angularjs component using karma, mocha, power-assert. have textarea , button in component, button disabled based on length of text in textarea.
when run component in browser works perfectly. can't figure out how test functionality.
here's bit of code.
inquiryform.js
function inquiryform($scope) { // plan add logic here } angular.module('myapp').component('inquiryform', { controller: inquiryform, controlleras: 'inquiryform', templateurl: 'inquiryform.html' });
inquiryform.html
<div class="contact"> <div>thanks contacting us.</div> <form> <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(); $compile = $injector.get('$compile'); }); }); const compiledirective = () => { element = $compile('<inquiry-form></inquiry-form>')($scope); $scope.$digest(); }; describe('inquiry form', () => { beforeeach(() => { compiledirective(); }); // test passes it('disables submit button if textbox empty', () => { assert(element.find('input').prop('disabled'), true); }); // test fails it('enables submit button if textbox not empty', () => { // making changes dom here element.find('textarea').text('hello, world!'); console.log(element.find('textarea').text()); // expected: "hello, world!", actual: "hello, world!" // since state of scope has changed, call digest reflect $scope.$digest(); // assert passes assert(element.find('textarea').text(), 'hello, world!'); // 1 fails. assert(element.find('input').prop('disabled'), false); }); }); });
as can see in comments above, second test fails. guessing test has failed since state of html has not been reflected component controller inquiryform
. sure dom of textarea being updated, ng-disabled
directive not trigger since component controller inquiryform
not connected scope.
how can make ng-disabled fire mock user input in textarea...
use naming form below:
<form name="inquiry form" ng-submit="inquiryform.handlesubmit()" method="post">
Comments
Post a Comment