angularjs - guidelines - ¿Cómo probar la prueba de la unidad vm.model de John papa con jazmín?

john papa angular español

Question

Yo uso la guía de estilo angular de papa de John, mi controlador se ve así:

Siguiendo el estilo de la guía de estilo del controlador de estilo papa Juan :

function testController() {

    var vm = this;

    vm.model = { name: "controllerAs vm test" };
}

Mi código de prueba parece:

describe(''Controller: testController'', function () {

    beforeEach(module(''myApp''));

    var testController;

    beforeEach(inject(function ($controller) {
        scope = {};

        testController = $controller(''testController'', {
        });

    }));

    it(''should have vm.model defined and testController.vm.model is equal to controllerAs vm test'', function () { 
        expect(testController.vm).toBeDefined();  
        expect(testController.vm.model).toBeDefined();     
        expect(testController.vm.model.name).toEqual("controllerAs vm test");
    });
});

Resultado:

Prueba fallida: Mensaje de resultado: se esperaba que no estuviera definido. en la pila

Entonces mi pregunta es ¿cómo podemos probar vm.model y otras variables a partir de esto? No he encontrado la línea de guía adecuada en las líneas de guía: controladores

Answer 1

La vm es igual a la instancia misma a través de vm = this;

Por lo tanto, todas las propiedades están colgando directamente del objeto.

function foo(){
  var vm = this;

  vm.name = ''Josh'';
}

var myFoo = new foo();
myFoo.name; // ''Josh'';

Así que todo lo que necesita hacer es cambiar sus expectativas para eliminar la propiedad vm .

expect(testController).toBeDefined();  
expect(testController.model).toBeDefined();     
expect(testController.model.name).toEqual("controllerAs vm test");

Para probar esto , aquí está su ejemplo exacto y las pruebas de jazmín asociadas.

function testController() {

  var vm = this;

  vm.model = {
    name: "controllerAs vm test"
  };
}


angular.module(''myApp'', [])
  .controller(''testController'', testController);

describe(''Controller: testController'', function() {

  beforeEach(module(''myApp''));

  var testController;

  beforeEach(inject(function($controller) {
    scope = {};

    testController = $controller(''testController'', {});

  }));

  it(''should have model defined and testController.model.name is equal to controllerAs vm test'', function() {
    expect(testController).toBeDefined();
    expect(testController.model).toBeDefined();
    expect(testController.model.name).toEqual("controllerAs vm test");
  });

  it(''should not have a property called vm'', function() {
    expect(testController.vm).toBeUndefined();
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine-html.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/boot.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.4/angular-mocks.js"></script>

Answer 2

Yo crearía un nuevo módulo y lo inyectaría como una dependencia en el módulo de la aplicación para hacerlo simple y comprobable. Probando el controlador con la Guía de Estilo de John Papa''s:

(function () {
  ''use strict'';

  angular
    .module(''test'')
    .controller(''testController'', testController);

  function testController() {
    var vm = this;
    vm.model = { name: "controllerAs vm test" };
  }
})();

La especificación ahora se vería así:

''use strict'';

describe(''testController'', function() {
  var testController;
  beforeEach(module(''test''));

  beforeEach(function () {
    inject(function($injector) {
      testController = $injector.get(''$controller'')(''testController'', {});
    });
  });

  it(''should have model defined and testController.name is equal to controllerAs vm test'', function() {
    expect(testController).toBeDefined();
    expect(testController.name).toEqual("controllerAs vm test");
  });
});

Espero que esto ayude a cualquiera que busque soluciones similares.

Answer 3

testController es vm porque establece var vm = this en el controlador. Por lo tanto, para hacer que su código de prueba sea más similar al código de su controlador, puede intentar configurar su controlador en vm en la prueba también en lugar de testController

describe(''Controller: testController'', function () {
    // we work with "vm" instead of "testController" to have consistent verbiage
    // in test and controller
    var vm;

    beforeEach(module(''app''));
    beforeEach(inject(function ($controller) {
        vm = $controller(''testController'', {}, {});
    }));

    it(''should have vm.model defined and testController.vm.model is equal to controllerAs vm test'', function () {

        // vm=this in controller
        expect(vm)
            .toBeDefined();

        // Testing primitives
        expect(vm.foo)
            .toBeDefined();
        expect(vm.foo)
            .toEqual(''bar'');

        // Testing objects
        expect(vm.model)
            .toBeDefined();
        expect(vm.model.name)
            .toEqual("Batman");

        // Testing a method
        expect(vm.greet())
            .toBeDefined();
        expect(vm.greet())
            .toEqual(''Hello There'');
    });
});

Código para el controlador.

(function () {
    ''use strict'';

    angular
        .module(''app'')
        .controller(''testController'', testController);

    /* @ngInject */
    function testController() {
        var vm = this;

        // Primitives
        vm.foo = ''bar'';

        // Objects
        vm.model = {
            name: ''Batman''
        };

        // Methods
        vm.greet = function () {
            return ''Hello There'';
        };
    }
})();

Espero que esto ayude. Buena suerte.