NodeJS,Angular Seed,Gulp,Jasmine,Karma问题
build立一个angular种子,我有一切工作,我甚至可以启动茉莉花浏览器,但由于某种原因,我的规范不工作,所以我添加了一个karma.conf文件,它似乎打破了茉莉花浏览器。 我是新来的使用茉莉花,所以我很茫然,有很多关于如何做到最好的意见,但无论我尝试我似乎无法得到它的工作,我已经在这里添加回购链接为代码。 希望有人能够看到我做错了什么。
这个种子需要NodeJS
下载git,把它放在一个文件夹中,进入根目录下的config文件夹,运行npm install然后运行gulp,它会自动在控制台的浏览器中启动,你会看到这个错误
[14:52:17] 'jasmineWeb' errored after 2.27 ms [14:52:17] TypeError: object is not a function at Gulp.<anonymous> (/webdev/E20/config/gulpfile.js:137:11) at module.exports (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7) at Gulp.Orchestrator._runTask (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/index.js:273:3) at Gulp.Orchestrator._runStep (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/index.js:214:10) at /webdev/E20/config/node_modules/gulp/node_modules/orchestrator/index.js:279:18 at finish (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:21:8) at module.exports (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:60:3) at Gulp.Orchestrator._runTask (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/index.js:273:3) at Gulp.Orchestrator._runStep (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/index.js:214:10) at /webdev/E20/config/node_modules/gulp/node_modules/orchestrator/index.js:279:18
这是我用来发射茉莉花的任务
gulp.task('jasmineWeb', function() { var filesForTest = ['../src/**/*.js', '../src/**/*_spec.js'] return gulp.src(filesForTest) .pipe(karma({configFile: 'karma.conf.js',action: 'run'})) .pipe(watch(filesForTest)) .pipe(jasmineBrowser.specRunner()) .pipe(jasmineBrowser.server({port: 8888})); });
这是我的Karma.conf文件
// Karma configuration // Generated on Tue Jul 28 2015 11:28:22 GMT-0400 (EDT) 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: [ '../src/lib/js/angular/angular.min.js', '../src/lib/js/angular/angular-mocks.js', '../src/com/**/*.js', '../src/com/**/*_spec.js' ], // list of files to exclude exclude: [ ], // 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', 'Firefox', 'IE', 'PhantomJS'], // Continuous Integration mode // if true, Karma captures browsers, runs the tests and exits singleRun: false }) }
我提前感激
https://bitbucket.org/baylysoft/angular-seed-project
噶现在正在运行,但我现在得到这个错误
PhantomJS 1.9.8 (Mac OS X 0.0.0) Controller: com/modules/AboutController Sets the Page Message It should show the page message FAILED ReferenceError: Can't find variable: $scope at /webdev/E20/src/com/modules/about/aboutController_spec.js:15 Chrome 44.0.2403 (Mac OS X 10.10.4) Controller: com/modules/AboutController Sets the Page Message It should show the page message FAILED ReferenceError: $scope is not defined at Object.<anonymous> (/webdev/E20/src/com/modules/about/aboutController_spec.js:15:16) Chrome 44.0.2403 (Mac OS X 10.10.4): Executed 1 of 1 (1 FAILED) ERROR (0.008 secs / 0.006 secs) PhantomJS 1.9.8 (Mac OS X 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0 secs / 0.004 secs)
这里是更新的spec文件
'use strict'; describe('Controller: com/modules/AboutController', function() { beforeEach(module(app)); var $controller; beforeEach(inject(function(_$controller_){ // The injector unwraps the underscores (_) from around the parameter names when matching $controller = _$controller_; })); describe('Sets the Page Message', function() { it('It should show the page message', function() { expect($scope.message).toEqual('This is the about page message from the controller'); }); }); });
我运行茉莉花,噶玛,就像你一样使用Gulp。 不过,我如何启动它有一些差异。 也许这可能有助于你的。
你的karma.config.js看起来很相似,所以可能没有问题。
不过,在我的大文件中,我只是称之为
gulp.task( 'karma', function( done ){ karma.start({ configFile: __dirname + '/karma.conf.js' }, done ); }); gulp karma
如果您还需要查看文件以进行更改,则可以运行此操作。
var filesForTest = [ '../src/**/*.js' ]; gulp.task( 'watchOnSave', function(){ gulp.watch( filesForTest, [ 'karma' ]); } gulp watchOnSave
karma.config.js文件将为您执行浏览器,并运行您在karma.config.js文件中定义的规范。
'../src/com/**/*_spec.js' // just make sure all your JS files are in your karma **files** property.
让我知道如果这个工作,或者我们会TS的解决scheme。
UPDATE
在你的app(app.js)中,你有这个
var appName = 'EuropaSeed'; var globalApp = angular.module(appName,['ngRoute','ngCookies']); var app = angular.module(appName);
在你的testing中你有
beforeEach(module('EuroSeed'));
你的问题之一是你有两个名为EuroSeed的模块
app and globalApp
所以相反,在你的testing中,调出你需要的两个模块中的哪一个
beforeEach(module(app));
这与您在控制器中的function相匹配
app.controller('AboutController',...
我正在使用这个来运行规范,这是通过现在,但没有使用除了另一个问题,以通过。
大文件为
gulp.task('karma', function (done) { karma.server.start({ // had to add .server to karma configFile: __dirname + '/karma.conf.js' }, done); });
这可能是规范,所以我想我会张贴规格和控制器在这里,他们是非常简单的。
现在“app”被设置在app.js文件中,所以应用程序本身就可以工作
aboutcontroller
//This is the about function that is used in the About Module. 'use strict'; app.controller('AboutController',// jshint ignore:line ['$scope', function ($scope) { $scope.message = 'This is the about page message from the controller'; }]);
关于控制器testing
'use strict'; describe('Controller: com/modules/AboutController', function() { beforeEach(module('EuropaSeed')); var $controller; beforeEach(inject(function(_$controller_){ // The injector unwraps the underscores (_) from around the parameter names when matching $controller = _$controller_; })); describe('Sets the Page Message', function() { it('It should show the page message', function() { expect($scope.message).toEqual('This is the about page message from the controller'); }); }); });
我拉了我正在运行的testing,我仍然在jasmineWeb上得到相同的错误,所以它可能是configuration。
Europas-MacBook-Pro:config ray$ gulp jasmineWeb [08:29:33] Using gulpfile /webdev/E20/config/gulpfile.js [08:29:33] Starting 'jasmineWeb'... [08:29:33] 'jasmineWeb' errored after 12 ms [08:29:33] TypeError: object is not a function at Gulp.<anonymous> (/webdev/E20/config/gulpfile.js:137:11) at module.exports (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7) at Gulp.Orchestrator._runTask (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/index.js:273:3) at Gulp.Orchestrator._runStep (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/index.js:214:10) at Gulp.Orchestrator.start (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/index.js:134:8) at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20 at process._tickCallback (node.js:355:11) at Function.Module.runMain (module.js:503:11) at startup (node.js:129:16) at node.js:814:3 Europas-MacBook-Pro:config ray$
我采取了你的build议,并增加了业务任务的吞噬文件,它给了我相同的结果,所以,我肯定搞砸了configuration的地方。
Europas-MacBook-Pro:config ray$ gulp karma [08:31:46] Using gulpfile /webdev/E20/config/gulpfile.js [08:31:46] Starting 'karma'... [08:31:46] 'karma' errored after 145 μs [08:31:46] TypeError: undefined is not a function at Gulp.<anonymous> (/webdev/E20/config/gulpfile.js:144:9) at module.exports (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7) at Gulp.Orchestrator._runTask (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/index.js:273:3) at Gulp.Orchestrator._runStep (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/index.js:214:10) at Gulp.Orchestrator.start (/webdev/E20/config/node_modules/gulp/node_modules/orchestrator/index.js:134:8) at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20 at process._tickCallback (node.js:355:11) at Function.Module.runMain (module.js:503:11) at startup (node.js:129:16) at node.js:814:3
这是我正在运行的更新规范
'use strict'; describe('Controller: com/modules/AboutController', function() { beforeEach(module(app)); var AboutController, scope; beforeEach(inject(function ($rootScope, $controller) { scope = $rootScope.$new(); AboutController = $controller('AboutController', { "$scope": scope }); })); it('It should show the page message', function () { // you might also need to do this AboutController(); expect(scope.greeting).toEqual("This is the about page message from the controller"); }); });
来回走了,从这里得到几个人的帮忙(非常感谢你们),我find了罪魁祸首,结果certificate这个问题不是在实际testing中,而是在业力configuration文件中,这是欺骗的问题是我正在加载的凉亭组件,我没有加载足够的ng-mocks不足以testing控制器,所以我添加了一些其他的,它的工作,我能够让我所有的testing工作正常。
这是我在karma.conf文件部分下添加的内容
'bower_components/angular/angular.js', 'bower_components/angular-route/angular-route.js', 'bower_components/angular-mocks/angular-mocks.js', 'bower_components/angular-resource/angular-resource.js', 'bower_components/angular-cookies/angular-cookies.js', 'bower_components/angular-sanitize/angular-sanitize.js', '../src/com/**/*.js', '../src/com/**/*_spec.js'
我已经用那些想要更好的例子的新工作代码更新了bitbucket种子
bitbucket.org/baylysoft/angular-seed-project