如何使用karma / jasmine测试browserify项目 [英] How to test browserify project using karma/jasmine

问题描述

我对测试的概念完全陌生，我需要一个关于如何在我的项目中做到这一点的实例：

我有一个gulp文件去像这样（不是全部，只是重要的部分）

  gulp.task（'bundle'，function（）{
 gulp.src（'public / angular-app / main.js'）
 .pipe（browserify（{
 debug：true 
}））
 .pipe（ gulp.dest（'public / min-js'））; 
}）; 
  

这是我的main.js的一小部分：

 'use strict'; 
 
 angular.module（'myApp'，[
'ui.router'，
'ui.bootstrap'，
'ngSanitize'，
' ngFx'，
 ... 
]，['$ interpolateProvider'，
函数（$ interpolateProvider）{
 $ interpolateProvider.startSymbol（'{{'）; 
 $ interpolateProvider.endSymbol（'}}'）; 
} 
]）
 
 .config（require（'./ config / routes'））
 
 .config（require（'。/ config / authInterceptor'））
 .run（require（'./ config / runPhase'））
 .run（require（'./ config / xeditable） '））
 
 
 
 .controller（'homeController'，require（'./ controllers / homeController'））
 .controller（'modalInstanceCtrl'，require（ './controllers/modalInstanceCtrl'））
 .controller（'modalparticipantCtrl'，require（'./ controllers / modalParticipantCtrl'））
 .controller（'generatorControlle r'，require（'./ controllers / generatorController'））
 .controller（'navController'，require（'./ controllers / navController'））
 .controller（'signInController'，require（' ./controllers/signInController'））
 .controller（'pricingController'，require（'./ controllers / pricingController'））
 .controller（'howItWorksController'，require（'./ controllers / howItWorks' ））
 ... 
  

现在这是我的karma配置文件：

  module.exports = function（config）{
 config.set（{
 
 // base将用于解决所有模式的路径（例如文件，排除）
 basePath：''，
 
 
 //框架使用
 //可用框架：https：//npmjs.org/browse/keyword / karma-adapter 
 frameworks：['jasmine']，
 
 
 //在浏览器中加载的文件/模式列表
文件：[
'public / vendor / jquery / dist / jquery.js'，
'public / vendor / angular / angular.js'，
'public / vendor / angular-mocks / angular-mocks.js' ，
'public / angular-app / ** / * .js'，
'test / ** / * Spec.js'
]，
 
 
 //要排除的文件列表
排除：[
]，
  

当我用业力开始运行业力时，这就是我得到的：

未被捕获的参考错误：未定义在root / public / angular-app中的
/main.js

所以我的问题很简单，我怎样才能进行测试，例如，在我的homeController上...

//更新

所以我更新了我的测试文件对此：

  describe（一个Angularjs测试套件，function（）{
 var target，rootScope; 
 beforeEach（inject（function（$ rootScope）{
 rootScope = $ rootScope; 
 
 //在这里模拟所有内容
 spyOn（rootScope，$ on）
}））; 
 
 beforeEach（inject（function（homeController）{
 target = homeController; 
}））; 
 
 it（'应该调用rootScope。$ on'，function（）{
 expect（rootScope。$ on）.toHaveBeenCalled（）; 
}）; 
 
}）; 
  

和我的配置文件：

  //要在浏览器中加载的文件/模式列表
文件：[
'public / vendor / jquery / dist / jquery.js'，
'public / vendor / angular / angular.js'，
'public / vendor / angular-mocks / angular-mocks.js'，
'public / min-js / main.js'，
'test / ** / * Spec.js'
]，
 
 
 //要排除的文件列表
不包括：[
 ]，
 
 
 browserify：{
 watch：true，
 debug：true 
}，
 
预处理器：{
'test / *'：['browserify'] 
}，
  

仍然没有任何作用，首先他说'未知提供者homeControllerProvider'，
现在，如果我删除它们行：

  beforeEach（注入（function（homeController）{
 target = homeController; 
}））; 
  

它仍然给我错误，预期间谍$ on会被调用，我如何解决这个问题？ / p>

解决方案

在运行测试之前，您需要通知Karma运行Browserify。

您可以在您的Karma配置中添加：

  {
 browserify：{
 watch：true， 
 debug：true 
}，
预处理器：{
'test / *'：['browserify'] 
} 
} 
  

Karma配置文件参考： http://karma-runner.github.io/0.12/config/configuration-file.html

<或者看看我使用Karma进行测试的项目之一： smild 。

I'm totally new to the concept of testing, and i need one solid example on how to do it in my project:

I have a gulp file goes like this (Not all of it, just the important portions)

gulp.task('bundle', function() {
    gulp.src('public/angular-app/main.js')
        .pipe(browserify({
            debug: true
        }))
        .pipe(gulp.dest('public/min-js'));           
});

This is a slight portion of my main.js:

'use strict';

    angular.module('myApp', [
        'ui.router',
        'ui.bootstrap',
        'ngSanitize',
        'ngFx',
        ...
    ], ['$interpolateProvider',
        function($interpolateProvider) {
            $interpolateProvider.startSymbol('{{');
            $interpolateProvider.endSymbol('}}');
        }
    ])

    .config(require('./config/routes'))

        .config(require('./config/authInterceptor'))
        .run(require('./config/runPhase'))
        .run(require('./config/xeditable'))



        .controller('homeController', require('./controllers/homeController'))
        .controller('modalInstanceCtrl', require('./controllers/modalInstanceCtrl'))
        .controller('modalparticipantCtrl',require('./controllers/modalParticipantCtrl'))
        .controller('generatorController',require('./controllers/generatorController'))
        .controller('navController', require('./controllers/navController'))
        .controller('signInController', require('./controllers/signInController'))
        .controller('pricingController', require('./controllers/pricingController'))
        .controller('howItWorksController',require('./controllers/howItWorks'))
        ...

Now this is my config file for karma:

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: [
      'public/vendor/jquery/dist/jquery.js',
      'public/vendor/angular/angular.js',
      'public/vendor/angular-mocks/angular-mocks.js',
      'public/angular-app/**/*.js',
      'test/**/*Spec.js'
    ],


    // list of files to exclude
    exclude: [
    ],

When i run karma with karma start this is what i get:

Uncaught reference error:require is not defined at root/public/angular-app/main.js

So my question is simple, how can i do tests, for example, on my homeController...

//update

So I updated my test file to this:

describe("An Angularjs test suite",function(){
    var target, rootScope;
    beforeEach(inject(function($rootScope) {
      rootScope = $rootScope;

      // Mock everything here
      spyOn(rootScope, "$on")
    }));

    beforeEach(inject(function(homeController) {
      target = homeController;
    }));

    it('should have called rootScope.$on', function(){
      expect(rootScope.$on).toHaveBeenCalled();
    });

});

and my config file to this:

// list of files / patterns to load in the browser
files: [
  'public/vendor/jquery/dist/jquery.js',
  'public/vendor/angular/angular.js',
  'public/vendor/angular-mocks/angular-mocks.js',
  'public/min-js/main.js',
  'test/**/*Spec.js'
],


// list of files to exclude
exclude: [
],


browserify: {
        watch: true,
        debug: true
},

preprocessors: {
    'test/*': ['browserify']
},

Still nothing works, first he says 'unknown provider homeControllerProvider', Now if i delete them lines:

beforeEach(inject(function(homeController) {
          target = homeController;
        }));

it still gives me error, expected spy $on to be called, How do i fix this?

解决方案

You need to inform Karma to run Browserify before running tests.

You can add this in your Karma config:

    {
        browserify: {
            watch: true,
            debug: true
        },
        preprocessors: {
            'test/*': ['browserify']
        }
    }

Karma config file reference: http://karma-runner.github.io/0.12/config/configuration-file.html

Or have a look at one of of my projects that uses Karma for testing: smild.

这篇关于如何使用karma / jasmine测试browserify项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！