Question

我想测试一个函数，以确保在我应该调用jquery.dataTable时。我想用一个sinon间谍来做这个。

我正在使用typescript，我有一个dataTableManager，它实际上会为我创建数据表。我使用qunit作为测试框架

我怎么能窥探这个？现在我收到以下错误

 Attempted to wrap undefined property dataTable as function

这是我的测试

    test("DataTableIsCalledWithOptionsWhenIdIsFoundOnThePage", function () {


        // arrange
        $("#qunit_fixture").append("<table id='#testTable'></table>");

        var createDateTableFunctionSpy = sinon.spy($("#testTable"), "dataTable");

        var customOptions = {
            "iDisplayLength": 200,
            "aoColumns": [
                { sWidth: '3%' },
                { sWidth: '47%' },
                { sWidth: '12%' },
                { sWidth: '17%' },
                { sWidth: '14%' },
                { sWidth: '7%' }],
            "aoColumnDefs": [
                { 'bSortable': false, 'aTargets': [0, 5] }
            ]
        };
        var dataTableManager = new DataTableManager($, "#testTable", customOptions);

        // act
        dataTableManager.createDataTable();

        // assert
        ok(createDateTableFunctionSpy.called);

    });

这是我的构造函数

    constructor(jQuery: JQueryStatic, tableId: string, customOptions: DataTables.Options){
        var self = this;
        self.jQuery = jQuery;
        self.options = {};
        self.jQuery.extend(self.options, DataTableManager.defaultOptions, customOptions);
        self.tableId = tableId;

    }

这是我试图测试的创建函数

    createDataTable = function () {
        // if it doesn't exist on the dom return
        var actualTable = this.jQuery(this.tableId);
        if (actualTable.length == 0) {
            return;
        }

        // create the data table with options
        var newDataTable = actualTable.dataTable(this.options);

    };

关于如何监视actualTable.dataTable（this.options）的任何想法;打电话会很棒，谢谢！

Answer 1

你必须监视jquery.prototype.dataTable，因为这将是调用actualTable.dataTable()时将使用的函数。

var createDateTableFunctionSpy = sinon.spy($.prototype, "dataTable");

Answer 2

你正在监视错误的对象 - 你是在jquery函数结果的返回值上设置间谍，而不是在jQuery函数本身上。

sinon.spy( $("#testTable") )   // Returns a new object with a spy on it

这将返回一个具有间谍的对象，但是当你的代码运行时，将再次调用此函数并返回一个没有间谍的新对象。

我发现的最佳解决方案是将$并返回并返回一些假对象。对$（）的任何调用都将返回此对象，您可以监视它。

$_stub = sinon.stub(window, '$');

dt = { dataTable: function(){} }
$_stub.withArgs("#testTable").returns(dt); // Return fake object when $() is called

dt_spy = sinon.spy(dt, 'dateTable');

<your code>

assert(dt_spy.calledOnce);

这种方法的问题是所有的$（）方法都被存根隐藏，所以如果你的代码试图使用其他jQuery方法，那么你也需要存根它们。您可以通过使用间谍来解决这个问题。

sinon.js监视$ .dataTables函数

2 个答案: