angularjs - validacion - Establecer el valor de vista como un campo de entrada en una prueba unitaria de una directiva de forma angular

validar formulario angular 5

Question

Tengo una directiva que crea un formulario:

app.directive(''config'', function() {
  return {
    restrict: ''E'',
    scope: {
      data: ''=''
    },
    template: ''<form name="configForm">'' +
      ''<input type="number" max="10" ng-model="config.item" name="configItem"/>'' +
      ''<div class="form-error" ng-show="configForm.$error.max">Error</div>'' + 
      ''</form>'',
    controller: ''ConfigDirectiveController'',
  };
});

Lo que quiero hacer es validar a través de una prueba unitaria que el mensaje de error aparecerá con alguna entrada. Con angular 1.2 podría modificar $ scope.config.item y actualizaría el valor de la vista y mostraría el error.

Tan cerca como puedo decir, con 1.3 angular, si el modelo no pasa la validación, el valor de la vista no se actualiza ... así que tengo que modificar el valor de la vista para asegurarme de que aparezca el mensaje de error.

¿Cómo puedo acceder a la entrada "configItem" para poder establecer el valor de la vista y asegurar que aparezca el mensaje de error?

Editado para mostrar la prueba unitaria

Veo que el valor está configurado correctamente, pero el error todavía tiene un ng-hide aplicado a la etiqueta. Cuando estoy viendo la página y cambiando manualmente el valor de entrada, ng-hide se eliminará y se mostrará el error si ingreso algo superior a 10.

  beforeEach(inject(function($compile, $rootScope) {
      element = angular.element(''<config data="myData"></config>'');
      $scope = $rootScope.$new();
      $scope.myData = {};
      element = $compile(element)($scope);
    }));

    it(''should warn that we have a large number'', function() {
      var input = element.find(''[name="configItem"]'')[0];
      $scope.$apply(function() {
        angular.element(input).val(''9000000001'');
      });
      errors = element.find(''[class="form-error ng-binding"]'');
      expect(errors.length).toBe(1);
    })

Answer 1

Así es como he estado probando por unidad mis directivas basadas en insumos (¡Se omite un montón de código para mayor claridad!) La línea importante que buscas es:

angular.element(dirElementInput).val(''Some text'').trigger(''input'');

Aquí está la prueba unitaria completa:

  it(''Should show a red cross when invalid'', function () {

    dirElement = angular.element(''<ng-form name="dummyForm"><my-text-entry ng-model="name"></my-text-entry></ng-form>'');

    compile(dirElement)(scope);
    scope.$digest();

    // Find the input control: 
    var dirElementInput = dirElement.find(''input'');

    // Set some text!
    angular.element(dirElementInput).val(''Some text'').trigger(''input'');
    scope.$apply();

    // Check the outcome is what you expect! (in my case, that a specific class has been applied)
    expect(dirElementInput.hasClass(''ng-valid'')).toEqual(true);
  });

Answer 2

La respuesta anterior es correcta si está usando Angular con jQuery pero para Angular sin jQuery (usando jqlite) puede usar triggerHandler en triggerHandler lugar (vea here la API completa)

it(''foos to the bar'', function() {
  el.val(''Foo'').triggerHandler(''input'');

  // Assuming el is bound to scope.something using ng-model ...
  expect(scope.something).toBe(''Foo'');
});