如何使用John Papa style、Karma和Jasmine进行角应用的数据服务测试?

For some reason, even following the example provided by Josh in the post reply How to test John papa vm.model unit testing with jasmine?, I can't get my controller's values to show up in the testing area. I think it's because of the data service, but it is a necessary component for our SPA, as is using John Papa's styling.

出于某种原因，即使遵循Josh在post回复中提供的示例，如何测试John papa vm。使用jasmine进行单元测试?，我无法在测试区域显示控制器的值。我认为这是因为数据服务，但它是我们SPA的必要组成部分，就像John Papa的风格一样。

Below is a code snippet to hold the code and display the errors I'm receiving.

下面是一个代码片段，用来保存代码并显示我正在接收的错误。

(function() {
  'use strict';
  angular.module('tickets')
    .service("DataService", DataService)

  /* @ngInject */
  DataService.$inject = ["$rootScope", "$q"];

  function DataService($rootScope, $q) {
    var vm = this;
    vm.nameDefault = "Name -- Please Authenticate";
    vm.name = vm.nameDefault;
  };

})();

(function() {
  'use strict';
  angular.module('tickets')
    .controller('HomeController', HomeController);

  /* @ngInject */
  HomeController.$inject = ['$scope', '$location', 'DataService'];

  function HomeController($scope, $location, DataService) {
    var vm = this;
    vm.name = DataService.name;
    vm.nameDefault = DataService.nameDefault;
  };

})();

<link href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.1.0/jasmine.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.1.0/jasmine.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.1.0/jasmine-html.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.1.0/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>

<script>
  'use strict';

  describe('Controller: HomeController', function() {

    beforeEach(module('tickets'));

    var controller, $location, DataService;
    var tests = 0;

    beforeEach(inject(function($controller, _$location_, _DataService_) {
      $location = _$location_;
      DataService = _DataService_;
      scope = {};

      controller = $controller('HomeController', {});
    }));

    var controller, scope, $location, DataService;
    var tests = 0;

    /* // This version works up until I try to verify the name and nameDefault in controller \\
     *
     *    beforeEach(inject(function ($rootScope, $controller, _$location_, _DataService_) {
     *        $location = _$location_;
     *        DataService = _DataService_;
     *        scope = $rootScope.$new();
     *
     *        controller = function () {
     *            return $controller('HomeController', {});
     *        };
     *    }));
     */

    afterEach(function() {
      tests += 1;
    });

    describe('local variables', function() {

      describe('load the data model and values for all pertinent variables', function() {
        it('should be instantiated', function() {
          expect(DataService).toBeDefined();
        });
        it('should contain a name with an initial value before authentication', function() {
          expect(DataService.nameDefault).toBe('Name -- Please Authenticate');
          expect(DataService.name).toEqual(DataService.nameDefault);
        });
      });
      describe('should load the controller with data model values, and update as data model values update', function() {
        it('should be instantiated', function() {
          expect(controller).toBeDefined();
        })
        it('should not have a vm attribute that can be reached from here', function() {
          expect(controller.vm).toBeUndefined();
        })
        it('should contain a name with an initial value before authentication, both from the data model', function() {
          expect(controller.name).toBe(DataService.name);
          expect(controller.nameDefault).toBe(DataService.nameDefault);
        });
      });
    });

    it('should have tests', function() {
      expect(tests).toBeGreaterThan(0);
    });
  });
</script>

My code, when I use it in our native environment, works to verify that everything in the data service has been instantiated properly (and using the commented out beforeEach block), but the styling using the example in the question referenced above throws even more errors about the scope not being instantiated, even though it is the same (with added dependencies) as that question.

我的代码,当我使用它在我们的家乡环境,致力于确保所有事情都在数据服务实例化适当的(使用注释掉beforeEach块),但样式使用上面提到的问题抛出的例子更错误的范围没有实例化,即使它是相同的(与添加依赖项)这个问题。

I would expect the answer to be similar to the (currently unanswered) question: How to test John papa vm.model controllers and factories unit testing with jasmine?

我希望答案类似于(目前没有回答的)问题:如何测试John papa vm。模型控制器和工厂单元测试与jasmine?

I appreciate any help you guys offer.

谢谢你们的帮助。

-C§

- c§

Edit Even though I've answered and have success, I would love to get some feedback on why the implementation below works and the other two attempts do not. This is using Karma version 0.13.8 (latest), jasmine 2.1.0, and Angular 1.4.0.

尽管我已经回答并获得了成功，但我还是希望得到一些关于以下实现为何有效以及其他两种尝试无效的反馈。这使用的是Karma版本0.13.8(最新版本)、jasmine 2.1.0和角1.4.0。

I know it seems like I came up with the solution pretty quickly, but I've been wrestling with this since Friday afternoon (8/7) and have tried a dozen different formats without success.

我知道我似乎很快就想到了解决方案，但是我从周五下午(8/7)开始就一直在努力解决这个问题，并且尝试了十几种不同的格式，但都没有成功。

Again, I welcome your comments and votes so that I can better understand why the version below works and the others have not, especially since I am still very green to AngularJS (1 month in, now).

再次，我欢迎您的评论和投票，以便我能更好地理解为什么下面的版本是有效的，而其他的则没有，特别是因为我仍然是非常绿色的AngularJS(1个月，现在)。

Thanks again,

再次感谢,

-C§

- c§

1 个解决方案

#1

I get it now. Just had to look at Globally mock object in angularjs for jasmine/karma testing and my brain clicked.

现在我懂了。我只需在angularjs中查看全局模拟对象，进行茉莉花/业力测试，我的大脑就会被激活。

The declaration and beforeEach block in the beginning of the test needs to look like this:

测试开始时的声明和before每个块需要如下所示:

    var controller, scope, $location, DataService;
    var tests = 0;

    beforeEach(inject(function ($rootScope, $controller, _$location_, _DataService_) {
    $location = _$location_;
    DataService = _DataService_;
    scope = $rootScope.$new();

    controller = $controller('HomeController', {
            $scope: scope
        });
    }));

I think since I've messed with our initial setup a little too much (started the SPA from a template), I needed a strange implementation to make it all work. I'm now getting successful tests throughout:

我想既然我已经把我们的初始设置弄得太复杂了(从模板开始做SPA)，我需要一个奇怪的实现来让它全部工作。我现在正在接受成功的测试:

I hope this helps someone else with similar issues.

我希望这能帮助其他有类似问题的人。