单元测试Angular + Browserify + Gulp和Jasmine

Question

我正在使用Gulp与browserify捆绑一个角度项目。 这是树

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

我有一个gulp文件，它接受我的source，main.js文件，并将其与gulp 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文件中，考虑到我的测试代码，无法识别angular：

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

我得到一个ReferenceError: angular is not defined终端上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测试任务

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

您只需要根据您的结构完美地定义src。 这将工作:)