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

Popular posts from this blog

sql - invalid in the select list because it is not contained in either an aggregate function -

How to start daemon on android by adb -