如何使用 karma/jasmine 测试 browserify 项目 [英] How to test browserify project using karma/jasmine
问题描述
我对测试的概念完全陌生，我需要一个可靠的例子来说明如何在我的项目中进行测试:
我有一个像这样的 gulp 文件(不是全部，只是重要部分)
gulp.task('bundle', function() {gulp.src('public/angular-app/main.js').pipe(浏览({调试:真})).pipe(gulp.dest('public/min-js'));});这是我的 main.js 的一小部分:
'使用严格';angular.module('myApp', ['ui.router','ui.bootstrap','ngSanitize','ngFx',...], ['$interpolateProvider',功能($interpolateProvider){$interpolateProvider.startSymbol('{{');$interpolateProvider.endSymbol('}}');}]).config(需要('./config/routes')).config(需要('./config/authInterceptor')).run(需要('./config/runPhase')).run(需要('./config/xeditable')).controller('homeController', 要求('./controllers/homeController')).controller('modalInstanceCtrl', 需要('./controllers/modalInstanceCtrl')).controller('modalparticipantCtrl',require('./controllers/modalParticipantCtrl')).controller('generatorController',require('./controllers/generatorController')).controller('navController', 要求('./controllers/navController')).controller('signInController', 要求('./controllers/signInController')).controller('pricingController', 要求('./controllers/pricingController')).controller('howItWorksController',require('./controllers/howItWorks'))...现在这是我的 karma 配置文件:
module.exports = function(config) {配置.set({//将用于解析所有模式的基本路径(例如文件、排除)基本路径:''，//要使用的框架//可用框架:https://npmjs.org/browse/keyword/karma-adapter框架:['茉莉花']，//要在浏览器中加载的文件/模式列表文件:['public/vendor/jquery/dist/jquery.js','public/vendor/angular/angular.js','public/vendor/angular-mocks/angular-mocks.js','public/angular-app/**/*.js','测试/**/*Spec.js'],//要排除的文件列表排除: [],当我使用 karma start 运行 karma 时，这就是我得到的:
未捕获的引用错误:require 未定义在 root/public/angular-app/main.js
所以我的问题很简单，我该如何进行测试，例如，在我的 homeController...
//更新
所以我将我的测试文件更新为:
describe("一个 Angularjs 测试套件",function(){变量目标，根范围；beforeEach(注入(函数($rootScope){根范围 = $根范围；//在这里模拟一切spyOn(rootScope, "$on")}));beforeEach(注入(函数(homeController){目标=家庭控制器；}));it('应该调用 rootScope.$on', function(){期望(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','测试/**/*Spec.js'],//要排除的文件列表排除: [],浏览器化:{看:真的，调试:真},预处理器:{'test/*': ['浏览']},仍然没有任何效果，首先他说未知提供者 homeControllerProvider"，现在，如果我删除它们:
beforeEach(inject(function(homeController) {目标=家庭控制器；}));它仍然给我错误，预计 spy $on 会被调用，我该如何解决这个问题?
运行测试前需要通知 Karma 运行 Browserify.
您可以将其添加到您的 Karma 配置中:
<代码> {浏览器化:{看:真的，调试:真},预处理器:{'test/*': ['浏览']}}Karma 配置文件参考:http://karma-runner.github.io/0.12/config/configuration-file.html
或者看看我使用 Karma 进行测试的一个项目:smild.p>
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屋！
