angular-formly basic unit-testing

angular-formly-unit-testing.js

describe('basic angular-formly testing', function () {
  var scope,
    form,
    directiveHTML,
    formEl,
    name,
    customAsyncValidatorSpy,
    customValidatorSpy;

  //you need to indicate your module in a test
  beforeEach(module('angularFormlyTesting'));

  beforeEach(inject(function ($rootScope, $controller, $compile, $q) {
    scope = $rootScope.$new();

    scope.model = {};

    var validators = {
      customAsyncValidator: function ($viewValue, $modelValue, scope) {
        var value = $viewValue || $modelValue;
        return $q(function (resolve, reject) {
          resolve();
        });
      },
      customValidator: function ($viewValue, $modelValue, scope) {
        var value = $viewValue || $modelValue;
        return true;
      }
    };

    customAsyncValidatorSpy = spyOn(validators, 'customAsyncValidator').and.callThrough();
    customValidatorSpy = spyOn(validators, 'customValidator').and.callThrough();

    scope.fields = [{
      key: 'name',
      type: 'input',
      templateOptions: {
        label: 'Name Label',
        pattern: '[0-9]+',
        /* HTML5 pattern does not include forward slashes in regex  */
        required: true
      },
      validators: {
          customAsyncValidator: {
            expression: validators.customAsyncValidator
          },
          customValidator: {
            expression: validators.customValidator
          }
        }
    }];

    directiveHTML =
      '<form novalidate>' +
      '<formly-form form="form" model="model" fields="fields"></formly-form>' +
      '</form>';

    formEl = $compile(directiveHTML)(scope);
    scope.$digest();

    form = scope.form;
    name = form[form.$name + '_input_' + 'name' + '_0'];

  }));

  describe('form and fields construction', function() {
    it('should have compiled input text', function () {
      expect(formEl.find('input').length).toBe(1);
    });

    it('should have name model on the form', function () {
      expect(name).toBeDefined();
    });

    it('should have empty scope model', function () {
      expect(scope.model).toEqual({});
    });
  });

  describe('form and fields validations', function() {
    it('should have an invalid form when init', function () {
      expect(form.$valid).toBe(false);
    });

    it('input name should give required error priority over the pattern error', function () {
      expect(name.$error.required).toBeDefined();
      expect(name.$error.pattern).not.toBeDefined();
    });

    it('input name should not have required error', function () {
      name.$setViewValue('some value');
      expect(name.$error.required).not.toBeDefined();
      expect(name.$error.pattern).toBeDefined();
    });

    it('input name should passed all the error validation', function () {
      name.$setViewValue(12232323242323);
      expect(name.$error.required).not.toBeDefined();
      expect(name.$error.pattern).not.toBeDefined();
    });

    it('form should have no errors and will be $valid', function () {
      name.$setViewValue(12232323242323);
      expect(form.$valid).toBe(true);
    });
  });

  describe('custom validators', function() {
    it('customAsyncValidator should not have been called', function () {
      name.$setViewValue('some value');
      expect(customAsyncValidatorSpy).not.toHaveBeenCalled();
      expect(customValidatorSpy).not.toHaveBeenCalled();
    });

    it('customAsyncValidator validator should have been called', function () {
      name.$setViewValue(12232323242323);
      expect(customAsyncValidatorSpy).toHaveBeenCalled();
      expect(customValidatorSpy).toHaveBeenCalled();
    });

    it('customValidator with the correct $viewValue arg', function () {
      name.$setViewValue(12232323242323);
      expect(customValidatorSpy.calls.mostRecent().args[0]).toEqual(12232323242323);
    });

    it('$modelValue arg of customValidator should have the same value as scope.model', function () {
      name.$setViewValue(12232323242323);
      var $modelValue = customValidatorSpy.calls.mostRecent().args[1];
      expect($modelValue).toEqual(scope.model.name);
    });

  });

});