javascript - 有人可以帮助解释如何用 Jasmine 测试这个 AngularJS 吗？

Question

所以我有一个简单的功能:

wpApp = angular.module('wpApp', ['ngRoute']);

wpApp.controller("ctrlr", function($scope) {
    $scope.message = 'This is the page';
});

我正在尝试使用具有以下规范的 Jasmine 来测试它:

describe("A suite", function() {
    var scope;
    beforeEach(inject(function($rootScope, $controller) {
        scope = $rootScope.$new();
        $controller("controller", {
            $scope: scope
        });
    }));

    it("should have the default message", function() {
        return expect(scope.message).toBe('This is the page');
    });
});

但是，它不起作用，因为实际值未定义。

我对 AngularJS 以及注入(inject)的想法都比较陌生。我一直在 StackOverflow、文档和教程中查找，但我似乎不太清楚我到底做错了什么。

希望这是一件小事。有人可以帮我看看我需要对我的规范进行哪些更改吗？

Answer 1

您需要加载您的模块:

beforeEach(module('wpApp'));

然后你需要加载正确的 Controller :

$controller("ctrlr", {
    $scope: scope
});

完整代码:

describe("A suite", function() {
  var scope;

  beforeEach(module('wpApp'));

  beforeEach(inject(function($rootScope, $controller) {
    scope = $rootScope.$new();
    $controller("ctrlr", {
      $scope: scope
    });
  }));

  it("should have the default message", function() {
    return expect(scope.message).toBe('This is the page');
  });
});

或者:

describe("A suite", function() {

  var $scope;

  beforeEach(function() {

    module('wpApp');

    inject(function($rootScope, $controller) {

      $scope = $rootScope.$new();

      $controller("ctrlr", {
        $scope: $scope
      });
    })
  });

  it("should have the default message", function() {
    return expect($scope.message).toBe('This is the page');
  });
});