lundi 11 juillet 2016

Angularjs unit testing - ng-disabled not working when adding text to textarea

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