使用Angular + Browserify + Gulp和Jasmine进行单元测试

Question

我正在使用Gulp将一个Angular项目与Browserify捆绑在一起。以下是目录结构：

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

我有一个 gulp 文件，它会取出我的源代码中的 main.js 文件，并使用 gulp-jasmine 任务将其 browserify 化。

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”。我知道设置有问题，测试文件无法访问browserified文件，但我无法找到解决方案。

有什么想法吗？

提前感谢。

- Omar F

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。这将起作用：）

- Aditya Sethi

---

我会尝试并确认。这也意味着我需要安装karma吗？ - Omar F

什么都不起作用。Karma创建了一个具有不同设置的不同conf文件。我甚至安装了coverage和PhantomJS，但没有运气。gulp任务出现错误。 - Omar F

你还是看到同样的错误吗？angular未定义？ - Aditya Sethi

是的，我安装了karma-browserify并且它工作正常。我必须对配置文件进行一些更改，并使用browserify转换（debowerify），以便能够将bower文件引入到我的测试文件中。谢谢！ - Omar F

你能够使用这个设置让 Istanbul 覆盖率起作用了吗？ - Marques Woodson