How to test John papa vm.model unit testing with jasmine?
The vm is equal to the instance itself via vm = this;
Therefore, all the properties are hanging directly off of the object.
function foo(){ var vm = this; vm.name = 'Josh';}var myFoo = new foo();myFoo.name; // 'Josh';So all you need to do is change your expectations to remove the vm property.
expect(testController).toBeDefined(); expect(testController.model).toBeDefined(); expect(testController.model.name).toEqual("controllerAs vm test");In order to prove this, here is your exact example, and the associated Jasmine tests.
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>
testController is the vm because you set var vm = this in the controller. So, to make your test code more similar to your controller code, you can try to set your controller to vm in the test too instead of 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'); });});Code for the controller
(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'; }; }})();Hope this helps. Good Luck.
I would create a new module and inject it as a dependency into the app module to make it simple and testable. Testing the controller with John Papa's Style Guide:
(function () { 'use strict'; angular .module('test') .controller('testController', testController); function testController() { var vm = this; vm.model = { name: "controllerAs vm test" }; }})();The spec now would look like this:
'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"); });});Hope this helps anyone looking for similar solutions.