javascript - pruebas - ¿Cómo realizar la prueba unitaria de forma angularjs?

pruebas unitarias angular 6

Question

He estado aprendiendo AngularJS y las cosas han ido bastante bien con respecto a las pruebas de unidad, pero he llegado a un punto un poco complicado.

Supongamos que tengo un formulario simple, por ejemplo:

<form name="form">
    <input type="text" name="number" ng-pattern="/^d+$/">
</form>

Si estuviera probando algo como un controlador, sé que lo escribiría algo como esto (usando Jasmine + Karma):

beforeEach(module(''some.module''));

beforeEach(inject(/* services */) {
    /* inject necessary services */
});

it(''should be invalid when given bad input'', function () {
    form.number = ''Not a number'';
    expect(form.number.$valid).toBeFalsy();
    expect(form.$valid).toBeFalsy();
});

Pero no sé qué servicios necesito inyectar, y no he tenido suerte en encontrar documentación sobre pruebas de unidad en la guía de forms o en la documentación de ng-form .

¿Cómo una unidad prueba una forma en Angular?

Answer 1

Alternativamente, si está utilizando WebPack con karma-webpack , puede incluir la plantilla con require , sin la necesidad del paquete karma-ng-html2js-preprocessor :

describe("MyCtrl''s form", function () {
    var $scope,
        MyCtrl;

    beforeEach(angular.mock.module("my.module"));

    beforeEach(inject(function (_$rootScope_, _$controller_, _$compile_) {
        $scope = _$rootScope_.$new();

        // Execute the controller''s logic
        // Omit the '' as vm'' suffix if you are not using controllerAs
        MyCtrl = _$controller_("MyCtrl as vm", { $scope: $scope });

        // Compile the template against our scope to populate form variables
        var html = require("./my.template.html"),
            template = angular.element(html);

        _$compile_(template)($scope);
    }));

    it(''should be invalid when given bad input'', function () {
        MyCtrl.form.number.$setViewValue(''Not a number'');
        expect(MyCtrl.form.number.$valid).toBeFalsy();
        expect(MyCtrl.form.$valid).toBeFalsy();
    });
});

HTML:

<form name="vm.form">
    <input type="text" name="number" ng-pattern="/^d+$/">
</form>

Answer 2

Aquí hay una manera de hacer una prueba unitaria con una forma angular sin tener que compilar una plantilla de controlador. Funciona bien para mí en mi uso limitado.

describe(''Test'', function() {

  var $scope, fooController;

  beforeEach(function($rootScope, $controller, formDirective) {

    $scope = $rootScope.$new();
    fooController = $controller(''fooController'', {$scope: $scope});

    // we manually create the form controller
    fooController.form = $controller(formDirective[0].controller, {
      $scope: $scope,
      $element: angular.element("<form></form>"),
      $attrs: {}
    });

  });

  it(''should test something'', function() {
    expect(fooController.form.$valid).toBeFalsy();
  });

});

Answer 3

No estoy convencido de que esta sea la mejor manera de probar en unidad algo así, pero con la ayuda de esta respuesta para probar directivas angulares personalizadas y algunos experimentos, descubrí una forma de probar el formulario por unidad.

Después de instalar karma-ng-html2js-preprocessor y configurarlo, logré obtener una prueba de unidad de trabajo como esta:

var scope, form;

beforeEach(function() {
  module(''my-module'');
  module(''templates'');
});

beforeEach(inject($rootScope, $controller, $templateCache, $compile) {
    scope = $rootScope.$new()

    ctrl = $controller(''MyController''), {
        "$scope": scope
    }

    templateHtml = $templateCache.get(''path/to/my/template.html'')
    formElem = angular.element("<div>" + templateHtml + "</div>")
    $compile(formElem)(scope)
    form = scope.form

    scope.$apply()
}

it(''should not allow an invalid `width`'', function() {
  expect(form.$valid).toBeTruthy();
  form.number.$setViewValue(''BANANA'');
  expect(form.number.$valid).toBeFalsy()
});

Answer 4

Supongo que puedo agregar algunos detalles a la respuesta aceptada: karma-ng-html2js-preprocessor debe configurarse en el archivo karma.conf.js de una manera similar:

//karma.conf.js
ngHtml2JsPreprocessor: { 
    moduleName: ''templates''
},
files: [
    //... other files
    //my templates 
    ''app/**/*.html''
],
preprocessors: {
    ''app/**/*.html'': [''ng-html2js'']
}, 
plugins: [
    //... other plugins
    "karma-ng-html2js-preprocessor"
]