单元测试角+ Browserify + Gulp和Jasmine

Question

我有一个角度的项目捆绑了使用Gulp的浏览器化。这是树

|--app
  |--src
    --js
      -main.js
      -otherFiles.js
  |--spec
    --mainspec.js <-- jasmin spec file
|--public
   --js
     --main.js

我有一个gulp文件，它使用我的源代码，main.js文件，并与一个gulp-jasmine任务一起浏览它

gulp.task('js', function() {
   return gulp.src('src/js/main.js')
    .pipe(browserify({}))
    .pipe(gulp.dest('public/js'));
});

gulp.task('specs', function () {
return gulp.src('spec/*.js')
    .pipe(jasmine());
});

还有一些监视任务等。

现在，在我的mainspec.js文件中，考虑到我的测试代码，无法识别角：

describe("An Angular App", function() {
   it("should actually have angular defined", function() {
     expect(angular).toBeDefined();
  });
});

我在终端上得到了一个ReferenceError: angular is not defined错误。我尝试在第一行require('angular');，但没有运气，得到了一个新的错误ReferenceError: window is not defined。我知道设置和测试文件有问题，无法到达浏览器序列化的文件，但我不能仅仅找出解决方案。

有什么想法吗？

提前谢谢。

Answer 1

您需要定义配置文件中的所有方面。

function getKarmaConfig(environment) {
    return {
        frameworks   : ['jasmine'],
        files        : [
            // Angular + translate specified for build order
                    environment + '/js/jquery.min.js',
                    environment + '/js/angular.js',
                    environment + '/js/angular-translate.min.js',
                    environment + '/js/**/*.js',
            'bower_components/angular-mocks/angular-mocks.js',
            'test/unit/**/*.js'
        ],
        exclude      : [
        ],
        browsers     : ['PhantomJS'],
        reporters    : ['dots', 'junit','coverage'],
        junitReporter: {
            outputFile: 'test-results.xml'
        },
        preprocessors : {
              'prod/js/*.js': ['coverage']
        },
        coverageReporter:{
              type: 'html',
              dir: 'coverage'
        }
    };
};

定义一个像这样的吞咽测试任务

gulp.task('test', ['build_prod'], function () {
    var testKarma = getKarmaConfig(environment);
    testKarma.action = 'run';
    testKarma.browsers = ['PhantomJS'];
    return gulp.src('./fake')
            .pipe(karma(testKarma));
});

您只需要按照您的结构完美地定义src。这将起作用:)