Question

我使用John papa angular style guide我的控制器看起来像：

遵循样式John papa style controller style guide：

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

结果：

测试失败：结果消息：预期未定义要定义。在堆栈

所以我的问题是我们如何测试vm.model和其他变量呢？我没有在指南中找到正确的指引：controllers

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

为了证明这一点，这是您的确切示例，以及相关的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>

Answer 2

我会创建一个新模块并将其作为依赖项注入 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");
  });
});

希望这有助于任何寻找类似解决方案的人。

如何用茉莉花测试John papa vm.model单元测试？

2 个答案: