Question

我编写了一个backbone视图，它在实例化时将文件对象或blob作为选项，然后检查该文件是否有EXIF数据，根据传入的选项更正方向并根据需要调整图像大小。 / p>

在视图中有一个函数mainFn，它接受文件对象并调用所有其他后续函数。

我的问题是如何测试使用mainFn的{{1}}和图片构造函数？

对于我的测试设置，我使用ReadFile，mocah，chai和sinon。

在我的示例代码中，我删除了所有其他函数，以免添加不必要的混乱。如果您希望查看整个视图，请访问github repository。

phantomjs

我的测试设置

var imageUpLoad = Backbone.View.extend({

    template: _.template(document.getElementById("file-uploader-template").innerHTML),

    // global variables passed in through options - required
    _file: null, // our target file
    cb: null,
    maxFileSize: null, // megabytes
    maxHeight: null, // pixels - resize target
    maxWidth: null, // pixels - resize target
    minWidth: null, // pixels
    maxAllowedHeight: null, //pixels
    maxAllowedWidth: null, // pixels

    // globals determined through function
    sourceWidth: null,
    sourceHeight: null,

    initialize: function (options) {

        this._file = options.file;
        this.cb = options.cb;
        this.maxHeight = options.maxHeight;
        this.maxWidth = options.maxWidth;
        this.maxFileSize = options.maxFileSize;
        this.minWidth = options.minWidth;
        this.maxAllowedHeight = options.maxAllowedHeight;
        this.maxAllowedWidth = options.maxAllowedWidth;

    },

    render: function () {

        this.setElement(this.template());

        this.mainFn(this._file);

        return this;
    },

    // returns the width and height of the source file and calls the transform function
    mainFn: function (file) {

        var fr = new FileReader();

        var that = this;

        fr.onloadend = function () {

            var _img = new Image();

            // image width and height can only be determined once the image has loaded
            _img.onload = function () {
                that.sourceWidth = _img.width;
                that.sourceHeight = _img.height;
                that.transformImg(file);
            };

            _img.src = fr.result;
        };

        fr.readAsDataURL(file);
    }
});

Answer 1

你可以在窗口上模仿FileReader / Image，例如

// beforeEach
var _FileReader = window.FileReader;
window.FileReader = sinon.stub().return('whatever');

// afterEach
window.FileReader = _FileReader;

或者引用实例上的构造函数，例如

// view.js
var View = Backbone.View.extend({
    FileReader: window.FileReader,
    mainFn: function() {
        var fileReader = new this.FileReader();
    }
});

// view.spec.js
sinon.stub(this.view, 'FileReader').return('whatever');

我个人更喜欢后者，因为例如，如果你忘记重新分配原始值，就没有破坏全局引用的风险。

Backbone - 使用ReadFile的视图中的测试方法

1 个答案: