sinon.js spy on $.dataTables function

Question

i am wanting to test a function to be sure the jquery.dataTable is being called when I should be. I want to use a sinon spy to do this.

I am using typescript and I have a dataTableManager that will actually create the datatable for me. I am using qunit as the testing framework

how can I spy on this? right now I am getting the following error

 Attempted to wrap undefined property dataTable as function

here is my test

    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);

    });

here is my constructor

    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;

    }

and here is the create function I am trying to test

    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);

    };

any ideas on how I can spy on the actualTable.dataTable(this.options); call would be great, thanks!

Answer 1

You have to spy on jquery.prototype.dataTable, cause this will be the function that will be used when calling actualTable.dataTable().

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