Question

在我的应用程序中，用户使用HTML5拖放来处理二进制文件。那部分代码运行正常。在chrome中，我拖动一个二进制文件并使用FileReader创建一个arrayBuffer。这一切似乎都很好。我正在为这个功能编写测试，但我很茫然。如何将二进制文件加载到单元测试中？对于我正在测试的一些代码，我只需要一个arrayBuffer。目前，我手动创建了arrayBuffer，但这不是一个可持续的解决方案。为了使我的测试有效，我需要能够随时抛出一个新的二进制文件并进行新的测试。我的测试环境是testacular + jasmine。

( function() {"use strict";
    function loadSimpleDataView() {
      //instead of defining ArrayBuffer, 
      //I want it to be generated based upon an external file
      var buffer = new ArrayBuffer(4), dataView = new DataView(buffer), int8View = new Int8Array(buffer);
      int8View.set([0x00,0x01,0x02,0x03]);

      return dataView;
    }

    describe('mymodule', function() {

      it('mytest', function() {
        var dataView  = loadSimpleDataView();

        expect(dataView).toBeDefined();
        //do rest of tests
      });
    });
  }());

Answer 1

我通过将二进制文件编码为十六进制字符串，将其填充到blob中，并调用获取File对象的函数来解决问题。我正在使用Jasmine来测试文件加载功能。 FileLoader是我编写的具有函数loadFromFile的类。

  beforeEach(function() {
    return this.fileLoader = new FileLoader()  });

  it("can load this bin file safely", function() {
    var blob, fileContentsEncodedInHex;

    fileContentsEncodedInHex = ["\x45\x6e\x63\x6f\x64\x65\x49\x6e\x48\x65\x78\x42\x65\x63\x61\x75\x73\x65\x42\x69\x6e\x61\x72\x79\x46\x69\x6c\x65\x73\x43\x6f\x6e\x74\x61\x69\x6e\x55\x6e\x70\x72\x69\x6e\x74\x61\x62\x6c\x65\x43\x68\x61\x72\x61\x63\x74\x65\x72\x73"];

    blob = new Blob(fileContentsEncodedInHex);

    this.fileLoader.loadFromFile(blob);
  });

File loader类中的函数看起来像这样（在coffeescript中）。您绝对应该将错误处理添加到商业代码中......

  #
  # Load the file
  #
  # @param [File] file
  #   The DOM file object
  #
  loadFromFile: (file) ->
    # create the file reader
    # assign the file load handler
    # read the array as a buffer, which will trigger the handler
    reader = new FileReader()
    reader.onloadend = this._handleOnLoadEnd
    reader.readAsArrayBuffer(file)
    return

我编写了以下小型python应用程序，将文件内容输出为十六进制编码字符串，可用作javascript字符串的内容。（仅供参考，这是我大约12年来的第一个python脚本，我确信它效率不高，但速度很快）非常感谢输出字符串的同事。我不确定为什么代码块在显示器中被屠杀。道歉。

import sys
fulldoc = ""
with open('your file', 'rb') as readFile:  
    while 1:  character = readFile.read(1)
        if not character:
          break
        fulldoc = fulldoc + "\\x" + character.encode("hex")
print fulldoc

额外的花絮......我不知道你的确切情况，但我建议如下......

如果您需要随时添加新的二进制文件并重新运行测试，那么您应该对随机添加的每种二进制文件进行测试。测试正面和负面文件（即应该与您的应用程序一起使用的文件，不适用于您的应用程序的文件）。这就是单元测试框架的用途。将来，如果您发现由于代码中的错误导致应用程序损坏的文件，您可以修复该错误，添加新的单元测试以加载该二进制文件，然后测试应该通过。如果你碰巧在某些时候意外破坏了文件处理代码，那么单元测试总是在那里向你显示出错了。

Answer 2

我使用grunt构建我的项目并运行我的单元测试。以下是我的grunt.js，testacular.conf.js和测试（javaclassstreamreader.spec.js）。简而言之，grunt启动grunt-server，它被配置为提供二进制数据文件。 Testacular被配置为代理grunt-server。在测试中，XMLHttpRequest用于检索二进制文件。一切正常，但似乎有点复杂。有更简单的方法吗？

grunt.js：

/*global module:false*/
module.exports = function(grunt) {"use strict";

  // Project configuration.
  grunt.initConfig({
    pkg : '<json:package.json>',
    meta : {
      banner : '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %>\n' + '<%= pkg.homepage ? "* " + pkg.homepage + "\n" : "" %>' + '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' + ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */'
    },
    lint : {
      files : ['grunt.js', 'src/*.js', 'src/public/js/**/*.js', 'src/specs/**/*.js']
    },
    watch : {
      files : '<config:lint.files>',
      tasks : 'default'
    },
    exec : {
      ensure_generated_directory : {
        command : 'mkdir -p generated/js/'
      }
    },
    clean : {
      all : ['generated']
    },
    jshint : {
      files : '<config:lint.files>',
      options : {
        curly : true,
        eqeqeq : true,
        forin : true,
        immed : true,
        latedef : true,
        newcap : true,
        noarg : true,
        sub : true,
        undef : true,
        unused : true,
        strict : true,
        boss : true,
        eqnull : true,
        es5 : true,
        browser : true,
        jquery : true,
        devel : true
      },
      globals : {
        //jasmine
        describe : false,
        it : false,
        expect : false,
        //commonjs
        require : false,
        exports : true,
        //angular
        angular : false
      }
    },
    'closure-compiler' : {
      frontend : {
        closurePath : 'closure-compiler',
        js : ['src/*.js', 'src/public/js/**/*.js'],
        jsOutputFile : 'generated/js/complete-app.js',
        options : {
          externs : 'externs.js',
          compilation_level : 'SIMPLE_OPTIMIZATIONS',
          language_in : 'ECMASCRIPT5_STRICT',
          logging_level : 'ALL',
          debug : null,
          warning_level : 'verbose',
          summary_detail_level : 3,
          formatting : ['PRETTY_PRINT', 'PRINT_INPUT_DELIMITER'],
          common_js_entry_module : 'src/public/js/app.js',
          process_common_js_modules : null,
          process_jquery_primitives : null,
          common_js_module_path_prefix : 'src'
        }
      }
    },
    testacularServer : {
      integration : {
        options : {
          keepalive : true
        },
        configFile : 'testacular.conf.js',
        autoWatch : false,
        singleRun : true
      }
    },
    server : {
      port : 18081,
      base : './src/specs/data'
    }
  });

  // Default task.
  grunt.registerTask('default', 'lint exec:ensure_generated_directory closure-compiler server testacularServer:integration');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-closure-compiler');
  grunt.loadNpmTasks('grunt-exec');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-testacular');
};

testacular.conf.js：

// Testacular configuration
// Generated on Tue Jan 01 2013 03:17:01 GMT-0500 (EST)
/*global basePath:true */
/*global files:true */
/*global JASMINE:false */
/*global JASMINE_ADAPTER:false */
/*global exclude:true */
/*global reporters:true */
/*global port:true */
/*global runnerPort:true */
/*global colors:true */
/*global logLevel:true */
/*global LOG_INFO:false */
/*global autoWatch:true */
/*global browsers:true */
/*global captureTimeout:true */
/*global singleRun:true */

// base path, that will be used to resolve files and exclude
basePath = '.';


// list of files / patterns to load in the browser
files = [
  JASMINE,
  JASMINE_ADAPTER,
  'src/public/lib/jquery/1.7.2/jquery-1.7.2.min.js',
  'src/public/lib/jquery-ui/1.8.20.custom/jquery-ui-1.8.20.custom.min.js',
  'src/public/lib/angular/1.0.1/angular-1.0.1.min.js',
  'src/public/lib/filer.min.js',
  'generated/js/complete-app.js',
  'src/specs/**/*.spec.js'
];


// list of files to exclude
exclude = [
];


// test results reporter to use
// possible values: 'dots', 'progress', 'junit'
reporters = ['progress'];


// web server port
port = 18080;


// cli runner port
runnerPort = 9100;

//proxy
proxies = {
    '/test-data/': 'http://localhost:18081/'
};

// enable / disable colors in the output (reporters and logs)
colors = true;


// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel = LOG_INFO;


// enable / disable watching file and executing tests whenever any file changes
autoWatch = true;


// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers = ['Chrome'];


// If browser does not capture in given timeout [ms], kill it
captureTimeout = 5000;


// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun = false;

javaclassstreamreader.spec.js：

/*global module$javaclassstreamreader:false */
/*global waitsFor:false */
/*global runs:false */
/*global dump:false */


( function() {"use strict";

    var JavaClassStreamReader = module$javaclassstreamreader.JavaClassStreamReader;

    function loadSimpleDataView(callback) {
      var dataView;
      var xhr = new XMLHttpRequest();
      xhr.open('GET', '/test-data/MyInterface.class', true); 
      xhr.responseType = 'arraybuffer';
      xhr.onload = function() {
          dataView = new DataView(this.response);
          callback(dataView);
      };
      xhr.onerror = dump;
      xhr.send();
    }

    describe('javaclassstreamreader', function() {

      it('reader can be constructed', function() {
        var hasData = false,reader;

        loadSimpleDataView(function(dataView) {
          reader = new JavaClassStreamReader(dataView);
          hasData = true;
        });

        waitsFor(function() {
          return hasData;
        }, "Never retrieved file", 3000);
        runs(function() {

          expect(reader.offset).toBe(0);

          var firstBytes = reader.getU4();
          dump(firstBytes.toString(16));
          expect(firstBytes).toBe(0xcafebabe);
          expect(reader.maxOffset).toBe(126);
        });
      });

    });

  }());

Answer 3

我认为你可以在不同的端口上运行额外的grunt服务器来提供二进制文件。在最新版本的karma中，您可以定义一些有关文件如何被karma服务器包含和提供的详细信息。因此，您可以将测试数据包含在文件中，并告诉Karma提供服务，但不要观看或包含这些文件

files = [
  JASMINE,
  JASMINE_ADAPTER,
  'src/public/lib/jquery/1.7.2/jquery-1.7.2.min.js',
  'src/public/lib/jquery-ui/1.8.20.custom/jquery-ui-1.8.20.custom.min.js',
  'src/public/lib/angular/1.0.1/angular-1.0.1.min.js',
  'src/public/lib/filer.min.js',
  /* NEW LINE NEEDED BELOW! */
  {pattern: 'src/specs/data/**', watched: false, included: false, served: true},
  'generated/js/complete-app.js',
  'src/specs/**/*.spec.js'
];

然后在测试中，您需要将文件的正确位置放入xhr.open方法中。如果你将一个空字符串传入xhr.open（'GET'，''）并转储responseText，你将获得一个输出，其中包含所有包含的脚本/文件传递给Karma，在那里，你将会找到以'/ base /'开头的路径，有时是'/ absolute /'。不确定100％Karma正在做什么，但我尝试使用'/ base /'作为xhr.open路径的前缀，它似乎工作：）

 var url = '/base/src/specs/data/MyInterface.class';
 xhr.open('GET', url, true);

我还在研究一个项目，该项目涉及在客户端中读取二进制数据文件，并且还与Karma一起进行测试，因此很高兴阅读您的问题以获得灵感。我最终发现Karma中的新功能对于简化方法非常有用！

如何在javascript单元测试期间加载二进制文件？

3 个答案: