【问题标题】:Getting error on angularJs unit testing using Karma and Jasmine使用 Karma 和 Jasmine 在 angularJs 单元测试中出错
【发布时间】:2016-07-16 16:59:40
【问题描述】:

我正在尝试使用 Karma 和 Jasmine 执行单元测试,但出现错误,请查看我的代码和结果,你能帮我解决这个问题吗?我对此太陌生,所以解决方案可能太简单了..谢谢。

我的 Karma 配置:

        // Karma configuration

            module.exports = function(config) {
              config.set({

                // base path that will be used to resolve all patterns (eg. files, exclude)
                basePath: '../',

                // frameworks to use
                // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
                frameworks: ['jasmine'],

                // list of files / patterns to load in the browser
                files: [
                  'bower_components/angular/angular.js',
                  'bower_components/angular-resource/angular-resource.js',
                  'bower_components/angular-ui-router/release/angular-ui-router.js',
                  'bower_components/angular-mocks/angular-mocks.js',
                  'app/scripts/*.js',
                  'test/unit/**/*.js'
                ],

                // list of files to exclude
                exclude: [
                'test/protractor.conf.js', 'test/e2e/*.js'
                ],
                    // preprocess matching files before serving them to the browser
                // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
                preprocessors: {
                },

                // test results reporter to use
                // possible values: 'dots', 'progress'
                // available reporters:  https://npmjs.org/browse/keyword/karma-reporter
                reporters: ['progress'],

                // web server port
                port: 9876,

                // enable / disable colors in the output (reporters and logs)
                colors: true,

                // level of logging
                // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
                logLevel: config.LOG_INFO,

                // enable / disable watching file and executing tests whenever any file changes
                autoWatch: true,
                    // start these browsers
                // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
                 browsers: ['Chrome','PhantomJS', 'PhantomJS_custom'],

                // you can define custom flags
                customLaunchers: {
                  'PhantomJS_custom': {
                    base: 'PhantomJS',
                    options: {
                      windowName: 'my-window',
                      settings: {
                        webSecurityEnabled: false
                      },
                    },
                    flags: ['--load-images=true'],
                    debug: true
                  }
                },

                phantomjsLauncher: {
                  // Have phantomjs exit if a ResourceError is encountered (useful if karma exits without killing phantom)
                  exitOnResourceError: true
                },

                // Continuous Integration mode
                // if true, Karma captures browsers, runs the tests and exits
                singleRun: false,

                // Concurrency level
                // how many browser should be started simultaneous
                concurrency: Infinity
                })
            }

我的控制器:

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

              // load the controller's module
              beforeEach(module('confusionApp'));

              var MenuController, scope, $httpBackend;
                //  Initialize  the controller  and a   mock    scope       
                beforeEach(inject(function  ($controller, _$httpBackend_,   $rootScope, menuFactory){
                //  place   here    mocked  dependencies                        
                    $httpBackend =  _$httpBackend_;                     
                    $httpBackend.expectGET("http://localhost:3000/dishes").respond([
                    {
                  "id": 0,
                  "name": "Uthapizza",
                  "image": "images/uthapizza.png",
                  "category": "mains",
                  "label": "Hot",
                  "price": "4.99",
                  "description": "A",
                  "comments":[{}]
                  },
                  {
                  "id": 1,
                  "name": "Zucchipakoda",
                  "image": "images/zucchipakoda.png",
                  "category": "mains",
                  "label": "New",
                  "price": "4.99",
                  "description": "A",
                  "comments":[{}]
                  }
                  ]);
                    scope   =   $rootScope.$new();
                    MenuController =    $controller('MenuController',   {                       
                    $scope: scope,  menuFactory:    menuFactory });
                    $httpBackend.flush();   

                     it('should have showDetails as false', function () {

                expect(scope.showDetails).toBeFalsy();

              });

              it('should create "dishes" with 2 dishes fetched from xhr', function(){

                  expect(scope.showMenu).toBeTruthy();
                  expect(scope.dishes).toBeDefined();
                  expect(scope.dishes.length).toBe(2);

              });

              it('should have the correct data order in the dishes', function() {

                  expect(scope.dishes[0].name).toBe("Uthapizza");
                  expect(scope.dishes[1].label).toBe("New");

              });

              it('should change the tab selected based on tab clicked', function(){

                  expect(scope.tab).toEqual(1);

                  scope.select(3);

                  expect(scope.tab).toEqual(3);
                  expect(scope.filtText).toEqual('mains');

                    });
                }));

            });

这就是 Chrome 上的内容

           Karma v1.1.1 - connected
           Chrome 51.0.2704 (Windows 10 0.0.0) is idle
           PhantomJS 2.1.1 (Windows 8 0.0.0) is idle
           PhantomJS 2.1.1 (Windows 8 0.0.0) is idle
           Chrome 51.0.2704 (Windows 10 0.0.0) is idle

这是终端报告:

                PS D:\programming\web\angular.js\gulp\conFusion\test>      karma start karma.conf.js
            16 07 2016 17:49:04.773:WARN [karma]: No captured browser, open http://localhost:9876/
            16 07 2016 17:49:04.820:INFO [karma]: Karma v1.1.1 server started at http://localhost:9876/
            16 07 2016 17:49:04.835:INFO [launcher]: Launching browsers Chrome, PhantomJS, PhantomJS_custom with unlimited concurrency
            16 07 2016 17:49:05.007:INFO [launcher]: Starting browser Chrome
            16 07 2016 17:49:05.054:INFO [launcher]: Starting browser PhantomJS
            16 07 2016 17:49:19.550:INFO [launcher]: Starting browser PhantomJS
            16 07 2016 17:49:19.561:INFO [phantomjs.launcher]: ACTION REQUIRED:
            16 07 2016 17:49:19.562:INFO [phantomjs.launcher]:
            16 07 2016 17:49:19.564:INFO [phantomjs.launcher]:   Launch browser at
            16 07 2016 17:49:19.571:INFO [phantomjs.launcher]:   http://localhost:9000/webkit/inspector/inspector.html?page=2
            16 07 2016 17:49:19.575:INFO [phantomjs.launcher]:
            16 07 2016 17:49:19.579:INFO [phantomjs.launcher]: Waiting 15 seconds ...
            16 07 2016 17:49:21.051:INFO [Chrome 51.0.2704 (Windows 10 0.0.0)]: Connected on socket /#YCvvpIyKkfV8Zt7uAAAA with id 31119843
            16 07 2016 17:49:21.728:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket /#1j0xHL_FNxuWzb3TAAAB with id 96164824
            16 07 2016 17:49:36.243:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket /#9xpNc4LhgBzDKWEfAAAC with id 44407334
            PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 0 of 0 ERROR (0.005 secs / 0 secs)
            PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 0 of 0 ERROR (0.005 secs / 0 secs)
            Chrome 51.0.2704 (Windows 10 0.0.0): Executed 0 of 0 ERROR (0.039 secs / 0 secs)
            16 07 2016 17:50:18.653:INFO [Chrome 51.0.2704 (Windows 10 0.0.0)]: Connected on socket /#_CyPLIKTHNnT1d0HAAAD with id manual-8566
            PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 0 of 0 ERROR (0.004 secs / 0 secs)
            PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 0 of 0 ERROR (0.008 secs / 0 secs)
            Chrome 51.0.2704 (Windows 10 0.0.0): Executed 0 of 0 ERROR (0.007 secs / 0 secs)
            Chrome 51.0.2704 (Windows 10 0.0.0): Executed 0 of 0 ERROR (0.012 secs / 0 secs)

更新:我将测试移到了注入之外,但似乎我的项目中有错误.. 但仍然可以看到与测试本身相关的错误.. 这是我得到的:

这些错误是怎么回事,它们与测试代码有关还是只是显示我的测试结果?

    PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 4 of 4 (4 FAILED) ERROR (0.038 secs / 0.055 secs)
    PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 4 of 4 (4 FAILED) ERROR (0.047 secs / 0
    PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 4 of 4 (4 FAILED) ERROR (0.038 secs / 0.055 secs)
    PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 4 of 4 (4 FAILED) ERROR (0.047 secs / 0.059 secs)
    Chrome 52.0.2743 (Windows 10 0.0.0): Executed 4 of 4 (4 FAILED) ERROR (0.117 secs / 0.057 secs)

【问题讨论】:

  • 错误在哪里?我认为你的终端输出不完整
  • 请看最后4行,每一行都有错误
  • 我知道了,看看下面的答案

标签: angularjs unit-testing jasmine karma-runner


【解决方案1】:

您已将模块化测试包含在注入函数中,因此您应该将代码重写为:

beforeEach(inject(function  ($controller, _$httpBackend_,   $rootScope, menuFactory){
                //  place   here    mocked  dependencies                        
                    $httpBackend =  _$httpBackend_;                     
                    $httpBackend.expectGET("http://localhost:3000/dishes").respond([
                    {
                  "id": 0,...
},
                  {
                  "id": 1, ..

                  }]);
                    scope   =   $rootScope.$new();
                    MenuController =    $controller('MenuController',   {                       
                    $scope: scope,  menuFactory:    menuFactory });
                    $httpBackend.flush();   
  }));

注入后包括测试:

it('should have showDetails as false', function () {

    expect(scope.showDetails).toBeFalsy();

  });

在此编辑之后,请注意 $httpBackend 预计会获取 localhost:3000,但在此之前,如果您使用 ngRoute,它将获取模板,因此您也应该处理该问题。

【讨论】:

  • 谢谢,但我已经尝试将测试移动到任何地方,但仍然出现错误,您能否更新代码并发送给我一个 plunker 或将其发布在您的答案中?再次感谢。
  • 当我将测试移到最后时,我收到此消息:范围未定义,那是因为范围是在注入内部定义的。
  • 但是由于你的工厂可能会出现范围错误,工厂变量返回是否正常工作
猜你喜欢
  • 1970-01-01
  • 2014-05-04
  • 1970-01-01
  • 1970-01-01
  • 2018-04-29
  • 1970-01-01
  • 2020-05-30
  • 2017-05-27
  • 1970-01-01
相关资源
最近更新 更多