2

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

我正在使用打字稿，并且我有一个 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) 的任何想法；打电话会很棒，谢谢！

4

2 回答 2

2

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

var createDateTableFunctionSpy = sinon.spy($.prototype, "dataTable");
于 2013-09-15T20:50:37.987 回答
0

您正在监视错误的对象 - 您正在对 jquery 函数结果的返回值设置 spy，而不是在 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 方法，那么你也需要对它们进行存根。您可以通过使用间谍来解决此问题。

于 2013-11-21T15:07:18.073 回答