Partialify 用于 require() html 模板时的单元测试

Question

我正在使用 Browserify 和一个名为 Partialify 的 Browserify 插件在 AngularJs 中开发简单的应用程序（参见 https://www.npmjs.com/package/partialify）

它允许以与 require() javascript 模块相同的方式 require() html 模板。

然后代码看起来像这样var template = require('../templates/ProductItem.html');

问题是当我尝试对我的指令进行单元测试时，运行时会引发异常。我尝试了karma.conf.js 的几种配置，但都没有成功。

您能否建议如何正确设置 karma.conf.js 以便它可以处理这个覆盖的 require()？

这是我的指令：

    //This is problematic line
    var template = require('../templates/ProductItem.html');

    function ProductItem($compile: ng.ICompileService, $rootScope: ng.IRootScopeService) {
        var definition: ng.IDirective = {
            restrict: 'AE',
            //scope is actually type of IProductItemScope (see interfaces.d.ts)
            scope: {
                product: '=',
                translateDateAfter: '='
            },
            link: (scope: Ascii.IProductItemScope, element, attrs) => {
                //use the inlined template loaded via require('../templates/ProductItem.html');
                //This way it saves the extra http requests to load template because the template in already in the bundle

                var el = angular.element(template);
                el = $compile(el)(scope);
                angular.element(element[0]).append(el);
            }
        }

        return definition;
    }

    module.exports = ProductItem;

这是当前的karma.conf.js

      // Karma configuration
      var brfs = require('brfs');

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

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


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


          // list of files / patterns to load in the browser
          files: [
            'node_modules/angular/angular.js',
            'node_modules/angular-mocks/angular-mocks.js',
            'src/**/*.js',
            //'src/templates/*.html',      
            'src/**/*.spec.js'
          ],


          // preprocess matching files before serving them to the browser
          // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
          preprocessors: {

            //'src/**/*.js': [ 'browserify' ],
            //'src/templates/*.html': ['ng-html2js'],
          },

          // Files to browserify 
          browserify: {
              debug: true,
              //plugin: [ 'partialify' ]
              transform: [ 'brfs' ]
          },

          // list of files to exclude
          exclude: [
          ],


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


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


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

我知道我可以回去完全避免partialify...这是证明它对我有用的最后机会:)

Answer 1

好的，我通过不使用Partialify 解决了这个问题。

PS：我猜要么Partialify用的不多，要么这个问题太少见了，因为这个问题只有4个view