Как протестировать модульное тестирование John papa vm.model с помощью jasmine?

Я использую руководство по стилю John Papa angular, мой контроллер выглядит так:

следуя руководству по стилю контроллера в стиле John Papa:

function testController() {

    var vm = this;

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

Мой тестовый код выглядит так:

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");
    });
});

Результат:

Тест не пройден: Сообщение о результате: Ожидается определение undefined. в стеке

Итак, мой вопрос: как мы можем проверить vm.model и другие переменные из этого? Я не нашел подходящей направляющей в направляющих: controllers


unit-testing angularjs jasmine karma-jasmine angularjs-scope
person Utpal Kumar Das    schedule 11.02.2015    source источник

Ответы (3)


arrow_upward
28
arrow_downward

vm равен самому экземпляру через vm = this;

Поэтому все свойства висят прямо на объекте.

function foo(){
  var vm = this;

  vm.name = 'Josh';
}

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

Поэтому все, что вам нужно сделать, это изменить свои ожидания, чтобы удалить свойство vm.

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

Чтобы доказать это, вот ваш точный пример и связанные с ним тесты Jasmine.

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>

person Josh    schedule 11.02.2015
comment
как функция, ваш ответ выглядит нормально, но здесь моя проблема заключается в том, что я инициализирую экземпляр контроллера: testController = $controller('testController', {}); тогда testController.vm должен работать, но не работает. Итак, мой вопрос к ребятам, которые работали с контроллером angular john papa в качестве синтаксиса vm и тестировали с jasmine. - person Utpal Kumar Das; 11.02.2015
comment
@UtpalKumarDas - Под капотом $controller просто звонит new(), так что это работает так же. - person Josh; 11.02.2015
comment
@UtpalKumarDas - я работаю с Angular уже несколько лет и провел множество тестов с Jasmine. Я пытаюсь объяснить, что это не Angular, а JavaScript. vm не является свойством контроллера... это переменная, которая закрыта областью действия функции. Поэтому при таком использовании он никогда не будет существовать на вашем контроллере. $controller не меняет принцип работы JS. - person Josh; 11.02.2015
comment
да, теперь я понимаю, что vm=testControllerInstance, поэтому vm.variables находятся в testControllerInstance. Большое спасибо за ответ. Большой!! - person Utpal Kumar Das; 11.02.2015
comment
Предоставленный Джошем ответ работает, но я обнаружил, что в нем нет необходимости: scope = {}; Вот пример, который я создал на Codepen. - person MelissaMMDP; 19.08.2015

arrow_upward
8
arrow_downward

testController является vm, потому что вы установили var vm = this в контроллере. Таким образом, чтобы ваш тестовый код был более похож на код вашего контроллера, вы можете попробовать установить контроллер на vm в тесте тоже вместо 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');
    });
});

Код для контроллера

(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';
        };
    }
})();

Надеюсь это поможет. Удачи.

person Aakash    schedule 09.04.2016

arrow_upward
1
arrow_downward

Я бы создал новый модуль и внедрил его как зависимость в модуль app, чтобы сделать его простым и проверяемым. Тестирование контроллера с помощью руководства по стилю John Papa:

(function () {
  'use strict';

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

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

Теперь спецификация будет выглядеть так:

'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");
  });
});

Надеюсь, это поможет всем, кто ищет подобные решения.

person Andrew Lobban    schedule 14.06.2016