angularjs - 使用 Karma 和 Jasmine 以 ng-scenario 作为框架测试 Controller 时，范围变量未定义

Question

我刚刚开始使用 Karma 和 Jasmine 发现 Angular 单元测试的奥秘，并且我在 Controller 测试方面遇到了一些问题。我编写了测试来查看变量是否已定义:expect(scope.someVariable).toBeDefined()。一切都按预期工作(每个测试都成功)，直到我在 karma.conf.js 文件中添加了 ng-scenario。

我正在使用 node 来运行测试。

问题:在 karma 配置文件中添加 ng-scenario 作为框架后，用于检查范围变量是否已定义的所有测试都失败。在添加 ng-scenario 之前，所有测试均已成功。 您知道为什么会发生这种情况吗？

Karma Conf 文件:

module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['ng-scenario','jasmine'],
files: [    'app/plugins/jquery/jquery.js',
  'app/plugins/angular/angular.js',     'app/plugins/angular-scenario/angular-scenario.js',
  'app/plugins/angular-mocks/angular-mocks.js',
  'app/plugins/angular-resource/angular-resource.js',
  'app/plugins/angular-cookies/angular-cookies.js',
  'app/plugins/angular-sanitize/angular-sanitize.js',
  'app/plugins/angular-route/angular-route.js',     'app/plugins/angular-utf8-base64/angular-utf8-base64.js',
  'app/scripts/*.js',
  'app/scripts/**/*.js',
  'test/**/*.js',

    'app/views/templates/*.html'
],

preprocessors : { 'app/views/templates/*.html': 'html2js'     },
exclude: ['app/plugins/angular-scenario/angular-scenario.js'],
port: 8080,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: ['Chrome'],
singleRun: false   }); };

Controller 测试:

'use strict'

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

 
  beforeEach(module('qunizGameApp'));
  
  var MainCtrl,scope, configService,feedbackService,authService,notify,resourceService;


  beforeEach(inject(function ($controller, $rootScope,_configService_,_feedbackService_, _authService_,_notify_, _resourceService_) {

     scope = $rootScope.$new();
     MainCtrl = $controller('MainCtrl', {
       $scope: scope,
       configService:_configService_,
       feedbackService:_feedbackService_,
       authService:_authService_,
       notify:_notify_,
       resourceService:_resourceService_
 
     });
     configService=_configService_;
       feedbackService=_feedbackService_;
       authService=_authService_;
       notify=_notify_;
       resourceService=_resourceService_;   }));
 
   it('should be defined -configService', function () {   
      expect(scope.configService).toBeDefined();  
   });   
   it('should be defined - resourceService', function () {   
      expect(scope.resourceService).toBeDefined();   
   });  
   it('should be defined - sidebarVisible', function () {   
      expect(scope.sidebarVisible).toBeDefined();   }); 
   });

包含ng-scenario之前的工作测试证明:

包含ng-scenario后的失败测试证明:

奇怪的是，如果我在 chrome 控制台中调试测试，则会定义变量:

在实习中读到并尝试过的事情:

1.我尝试将 beforeEach 部分中的范围变量定义为模拟数据。

2.我尝试注入(inject)所有其他 Controller 依赖项(使用未解析的名称作为参数)

您可以看到下面的 1 和 2

beforeEach(inject(function ($controller, $rootScope,_configService_,_feedbackService_, _authService_,_notify_, _resourceService_) {

    scope = $rootScope.$new();
    scope.configService=_configService_;
    scope.authService=_authService_;
    scope.resourceService=_resourceService_;
    scope.sidebarVisible={};
    MainCtrl = $controller('MainCtrl', {
      $scope: scope,
        configService:_configService_,
        feedbackService:_feedbackService_,
        authService:_authService_,
        notify:_notify_,
        resourceService:_resourceService_
    
    });
    configService=_configService_;
    feedbackService=_feedbackService_;
    authService=_authService_;
    notify=_notify_;
    resourceService=_resourceService_;   }));

但是 scope.configService、scope.resourceService 和 scope.sidebarVisible 在测试时仍未定义

Answer 1

当我将 ng-scenario 与 Karma 一起使用时，我也遇到了同样的问题。当我将其包含在 karma.conf.js 文件中时，我的所有测试都没有通过。只是不要使用 ng-scenario - 使用 Protractor 进行集成测试。 https://github.com/angular/protractor