Как протестировать модульное тестирование John papa vm.model с помощью жасмина?
Я использую руководство по стилю John papa angular, которое мой контроллер выглядит следующим образом:
следуя стилю Руководство по стилю стиля стиля стиля 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
Ответы
Ответ 1
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");
Чтобы доказать это, вот ваш точный пример и связанные с ним тесты Жасмина.
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>
Ответ 2
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';
};
}
})();
Надеюсь, это поможет. Удачи.
Ответ 3
Я бы создал новый модуль и ввел его как зависимость в модуль приложение, чтобы сделать его простым и проверяемым. Тестирование контроллера с помощью руководства по стилю 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");
});
});
Надеюсь, это поможет любому, кто ищет похожие решения.