sinon.js 监视 $.dataTables 函数答案

【问题标题】：sinon.js spy on $.dataTables functionsinon.js 监视 $.dataTables 函数
【发布时间】：2013-09-17 11:46:32
【问题描述】：

我想测试一个函数以确保 jquery.dataTable 在我应该调用的时候被调用。我想用一个sinon spy来做这个。

我正在使用 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); 的任何想法电话会很棒，谢谢！

【问题讨论】：

标签： javascript jquery typescript qunit sinon

【解决方案1】：

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

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

【讨论】：

我仍然收到“尝试将未定义的属性 dataTable 包装为函数”错误
你确定测试开始时插件已经加载了吗？
我尝试将未定义的属性 dataTable 包装为函数'

【解决方案2】：

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

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

这会返回一个有spy的对象，但是当你的代码运行时，这个函数会被再次调用并返回一个没有spy的新对象。

我发现的最佳解决方案是存根 $ 并返回一些假对象。任何对 $() 的调用都会返回这个对象，你可以监视它。

$_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 方法，那么您也需要对它们进行存根。您可以通过使用间谍来解决此问题。

【讨论】：