单元测试Angular+Browserify+Gulp和Jasmine

Unit Testing Angular + Browserify + Gulp and Jasmine

本文关键字:Jasmine Angular+Browserify+Gulp 单元测试      更新时间:2023-09-26

我有一个使用Gulp与browserify捆绑在一起的angular项目。这是树

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

我有一个gump文件,它获取我的源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文件中,考虑到我的测试代码:,angular是无法识别的

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。我知道设置有问题,测试文件无法访问已浏览的文件,但我无法找到解决方案。

有什么想法吗?

提前谢谢。

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

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。这将起作用:)