Karma和CoffeScript与代码覆盖

Question

我认为Karma CoffeeScript代码覆盖预处理器可能出了问题。或者我不知道我做错了什么！所以我来找你StackOverflow。基本上，我正在尝试设置我的业力测试套件，以便以lcov格式提供代码覆盖，这样我就可以将其发送到CodeClimate。我有它，所以我的测试套件(过去)工作，但现在我似乎无法从它得到任何东西，除了错误。我的项目是Rails项目，文件由资产管道(即资产管道)进行预处理。( name.js.coffee文件)但是如果我将它们包含在覆盖预处理器中，它似乎对它们进行了很好的预处理，但是它会对每个文件抛出一个错误。例如，一些东西会被处理成一个函数，它会说函数是一个保留字，等等，所以它仍然认为它们是我猜测的coffeescript文件，并适当地使用了那个语法。但是，当我尝试使用coffeescript预处理器处理它们时，我会得到coffeescript错误，而这里不应该有任何错误。帮助?

以下是错误：

npm test

> tracktrain@0.1.6 test /Users/bytenel/workspace/tracktrain
> ./node_modules/.bin/karma start --single-run --browsers Firefox

INFO [karma]: Karma v0.12.24 server started at http://localhost:9876/
INFO [launcher]: Starting browser Firefox
ERROR [preprocessor.coverage]: Syntax error on line 7: indentation is ambiguous
4 :     $document.ready(()->
5 :       $scope.loading = false;
6 :     )
7 :   ])
^ :~~~~^
8 : 
9 : 
  at /Users/bytenel/workspace/tracktrain/app/assets/javascripts/controllers/root_controller.js.coffee
ERROR [preprocessor.coverage]: Syntax error on line 66: indentation is ambiguous
63 :                                                        user.selected = false
64 :                                                        $scope.selectedUsers = []
65 :             ]
66 :            )
^^ :~~~~~~~~~~~~^
  at /Users/bytenel/workspace/tracktrain/app/assets/javascripts/controllers/lecture_ctrl.js.coffee
ERROR [preprocessor.coverage]: Syntax error on line 9: indentation is ambiguous
6 :                            user = $resource "/users/:id.json", { id: '@id' }
7 : 
8 :                            user
9 :           ] )
^ :~~~~~~~~~~~~~~^
  at /Users/bytenel/workspace/tracktrain/app/assets/javascripts/factories/user.js.coffee
ERROR [preprocessor.coverage]: Syntax error on line 5, column 1: unexpected '\n' (\u000A)
2 : 
3 : angular.module( 'trackTrainApp' )
4 : .factory( 'OrgTrainUser',
5 :           [ '$resource', ( $resource ) ->
^ :~^
6 :                            user = $resource "/lectures/:id/users.json",
7 :                                             {
8 :                                               id: "@id"
  at /Users/bytenel/workspace/tracktrain/app/assets/javascripts/factories/orgtrainuser.js.coffee
ERROR [preprocessor.coverage]: Syntax error on line 9: indentation is ambiguous
06 :                                                          if $flashNotice[0] && $flashNotice[0].childNodes && $flashNotice[0].childNodes[3].id != 'flash_alert'
07 :                                                            $flashNotice.slideUp animationTime
08 :                                                          return;
09 :                                                       ), 2000;
^^ :~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~^
10 :    return;)( jQuery );
  at /Users/bytenel/workspace/tracktrain/app/assets/javascripts/flashes.js.coffee
ERROR [preprocessor.coverage]: Syntax error on line 17: indentation is ambiguous
14 :          ajax: $.fn.dataTable.pipeline( {
15 :                                             url: 'lectures/list.json',
16 :                                             pages: 5
17 :                                           }),
^^ :~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~^
18 :          columns: [
19 :            { data: 'name' },
20 :            { data: 'start_date' },
  at /Users/bytenel/workspace/tracktrain/app/assets/javascripts/lectures.js.coffee
ERROR [preprocessor.coverage]: Syntax error on line 20, column 2: unexpected '(DEDENT)' (\uEFFE)
17 :     return attachmentEntry;
18 : 
19 : 
20 :   $('#add-attachment').on 'click', (event) ->
^^ :~~^
21 :     event.preventDefault
22 :     attachmentEntryCount = $('.attachment-entry').length
23 : 
  at /Users/bytenel/workspace/tracktrain/app/assets/javascripts/training_history.js.coffee
INFO [Firefox 32.0.0 (Mac OS X 10.9)]: Connected on socket dwjoowbAkz3xKEQ4pVCT with id 85121913
WARN [web-server]: 404: /Users/bytenel/workspace/tracktrain/app/assets/javascripts/controllers/lecture_ctrl.js.js
WARN [web-server]: 404: /Users/bytenel/workspace/tracktrain/app/assets/javascripts/factories/user.js.js
WARN [web-server]: 404: /Users/bytenel/workspace/tracktrain/app/assets/javascripts/controllers/root_controller.js.js
WARN [web-server]: 404: /Users/bytenel/workspace/tracktrain/app/assets/javascripts/factories/orgtrainuser.js.js
WARN [web-server]: 404: /Users/bytenel/workspace/tracktrain/app/assets/javascripts/controllers/root_controller.js.js
WARN [web-server]: 404: /Users/bytenel/workspace/tracktrain/app/assets/javascripts/controllers/lecture_ctrl.js.js
WARN [web-server]: 404: /Users/bytenel/workspace/tracktrain/app/assets/javascripts/factories/user.js.js
WARN [web-server]: 404: /Users/bytenel/workspace/tracktrain/app/assets/javascripts/factories/orgtrainuser.js.js
Firefox 32.0.0 (Mac OS X 10.9) ERROR
  SyntaxError: missing ; before statement
  at /Users/bytenel/workspace/tracktrain/spec/javascripts/controllers/leture_ctrl_spec.coffee:1

Firefox 32.0.0 (Mac OS X 10.9) ERROR
  SyntaxError: missing ; before statement
  at /Users/bytenel/workspace/tracktrain/spec/javascripts/factories/org_train_user_factory_spec.coffee:1

Firefox 32.0.0 (Mac OS X 10.9) ERROR
  SyntaxError: missing ; before statement
  at /Users/bytenel/workspace/tracktrain/spec/javascripts/factories/user_factory_spec.coffee:1


npm ERR! weird error 1
npm ERR! not ok code 0

这是我的karma.conf.js文件：

// Karma configuration
// Generated on Sat Aug 02 2014 00:12:00 GMT-0600 (MDT)

module.exports = function (config) {
    config.set({

        // base path that will be used to resolve all patterns (eg. files, exclude)
        basePath: __dirname,


        // frameworks to use
        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
        frameworks: ['jasmine'],

        plugins: [
            'karma-jasmine',
            'karma-firefox-launcher',
            'karma-coffee-preprocessor',
            'karma-coverage'
        ],

        // list of files / patterns to load in the browser
        // TODO: this is not requiring files correctly, need to fix TR-335
        files: [
            'vendor/assets/javascripts/karma-jasmine/lib/jasmine.js',
            'vendor/assets/javascripts/karma-jasmine/src/adapter.js',
            'vendor/assets/javascripts/angular/angular.js',
            'vendor/assets/javascripts/angular-resource.min.js',
            'vendor/assets/javascripts/angular-mocks/angular-mocks.js',
            'vendor/assets/javascripts/jquery-2.1.1.min.js',
            'vendor/assets/javascripts/jquery.dataTables.min.js',
            'vendor/assets/javascripts/d3/d3.js',
            'vendor/assets/javascripts/nvd3/nv.d3.js',
            'vendor/assets/javascripts/angularjs-nvd3-directives/dist/angularjs-nvd3-directives.js',
            'vendor/assets/javascripts/ui-bootstrap-tpls-0.11.0.min.js',
            'vendor/assets/javascripts/*.*js',
            'spec/javascripts/*_spec.js*',
            'spec/javascripts/**/*_spec.js*',
            'app/assets/javascripts/app.js.coffee',
            'app/assets/javascripts/controllers/root_controller.js.coffee',
            'app/assets/javascripts/controllers/lecture_ctrl.js.coffee',
            'app/assets/javascripts/factories/user.js.coffee',
            'app/assets/javascripts/factories/orgtrainuser.js.coffee',
            {   pattern: 'app/assets/javascripts/*.js.*',
                watched: true,
                included: false,
                served: false },
            'spec/javascripts/**/*_spec.coffee'
        ],


        // list of files to exclude
        exclude: [
            'app/assets/javascripts/application.js.coffee.erb'
        ],


        // preprocess matching files before serving them to the browser
        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
        preprocessors: {
            'app/**/*.*.coffee': ['coverage']
        },

        // test results reporter to use
        // possible values: 'dots', 'progress'
        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
        reporters: ['progress', 'coverage'],

        coverageReporter: {
            type : 'lcovonly',
            dir : 'coverage/',
            subdir: 'javascript'
        },

        'scripts': {
            'test': './node_modules/.bin/karma start --single-run --browsers Firefox'
        },

        // 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: ['Firefox'],


        // Continuous Integration mode
        // if true, Karma captures browsers, runs the tests and exits
        singleRun: false
    });
};

下面是一个规范和js文件示例：

describe 'OrgTrainUser', () ->
                           factory = undefined
                           $httpBackend = undefined
                           beforeEach module( 'trackTrainApp' )
                           beforeEach inject( ( $injector ) ->
                                                $httpBackend = $injector.get( '$httpBackend' );
                                                factory = $injector.get( 'OrgTrainUser' );
                                            )
                           it 'queries with username',
                              () ->
                                $httpBackend.expectGET( '/lectures/123/users.json' )
                                .respond( [ {
                                            id: '123',
                                            first_name: 'test',
                                            last_name: 'bob'
                                          } ] )
                                result = factory.query( { id: '123' } )

                                $httpBackend.flush()

                                expect( result[0].id ).toEqual( '123' )

'use strict'

angular.module( 'trackTrainApp' )
.factory( 'OrgTrainUser',
          [ '$resource', ( $resource ) ->
                           user = $resource "/lectures/:id/users.json",
                                            {
                                              id: "@id"
                                            },
                                            {
                                              query:
                                                method: "GET"
                                                isArray: true
                                              show:
                                                method: 'GET'
                                                isArray: true
                                            }

                           user
          ] )

与此相关的错误：

ERROR [preprocessor.coverage]: Syntax error on line 9: indentation is ambiguous
06 :                                                          if $flashNotice[0] && $flashNotice[0].childNodes && $flashNotice[0].childNodes[3].id != 'flash_alert'
07 :                                                            $flashNotice.slideUp animationTime
08 :                                                          return;
09 :                                                       ), 2000;
^^ :~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~^
10 :    return;)( jQuery );

这与我在这些文件中使用严格模式有关吗？

Answer 1

Karma代码覆盖是由brick项目提供的。brick编译和测试coffeescript代码。brick使用的编译器不是标准的coffeescript编译器，相反，brick使用一个名为coffeescript-redux的非100%兼容编译器。

我们的项目被coffeescript 1.8完美地编译，但是在用redux编译时有很多错误

ibrik项目和redux编译器已经相对不活跃了一段时间，因此我们只是忘记了我们试图获得代码的掩护。也许在将来，随着coffeescript-redux的重新发布，我们可以再次使用karma-code-coverage插件。

ibrik项目已经被更新为使用棺材记录，但是业力覆盖还没有。您可以黑掉您的package.json以使它正常工作，或者等待业力覆盖修复它，但是我的项目中有两个业力配置文件，第一个是在没有覆盖的情况下运行(快-3秒)，第二个是覆盖javascript (稍微慢一点-10秒)。

检查业力-掩盖。糖果。咖啡。

wiredep = require('wiredep')
path = require('path')

module.exports = (config) ->
  config.set
    frameworks: ['jasmine']

    files: wiredep(devDependencies: true)['js'].map (file) ->
      path.relative(process.cwd(), file)
    .concat [
      '.tmp/common/app.js'
      '.tmp/common/services/helpers/**/*.js'
      '.tmp/common/**/*.js'
      '.tmp/app/**/*.js'
      'src/common/**/*.spec.coffee'
      'src/app/**/*.spec.coffee'
      'test/spec/**/*.coffee'
      # directives templates
      'src/common/directives/**/*.html'
      'src/app/components/**/*.html'
      'bower_components/angular-strap/src/**/*.tpl.html'
      # fixtures
      {
        pattern: 'test/fixtures/**/*.json'
        watched: true
        served: true
        included: false
      }
    ]

    exclude: []

    preprocessors:
      'src/app/components/**/*.html': 'ng-html2js'
      'bower_components/angular-strap/src/**/*.tpl.html': 'ng-html2js'
      'src/common/**/*.spec.coffee': 'coffee'
      'src/app/**/*.spec.coffee': 'coffee'
      'test/spec/**/*.coffee': 'coffee'
      '.tmp/**/*.js': 'coverage'

    reporters: ['progress', 'html', 'coverage']

    ngHtml2JsPreprocessor:
      stripPrefix: 'src/'

    coverageReporter:
      type: 'html',
      dir: '.tmp/test/coverage/'

    htmlReporter:
      outputDir: '.tmp/test/html/'

    coffeePreprocessor:
      options:
        bare: true
        sourceMap: true
      transformPath: (path) ->
        return path.replace(/.js$/, '.coffee')

    port: 9876
    colors: true
    logLevel: config.LOG_INFO
    autoWatch: true
    browsers: ['PhantomJS']
    singleRun: false

Answer 2

我想看看以下几点：

https://github.com/karma-runner/karma-coverage/issues/75，见@zeno的评论。有一个分叉的构建，允许业力覆盖解析标准咖啡脚本。它通过使用HBOCodeLabs的Ibrik叉来实现这一点，它为标准的coffeescript关闭了redux。要使用，您需要将以下内容添加到dev依赖项中

karma-coverage": "git+https://github.com/kylewelsby/karma-coverage#fix-coffee-script-compiler"

这对我有用！