全面披露......这是我的第一个 SO 问题。如果我遗漏任何内容,请善待。;-)
我开始使用Jasmin来测试我的客户端 Javascript 对象之一。该对象特别管理名为DataTables的 jQuery 插件的使用。托管的 DataTables 组件将调用几个自定义呈现方法来确定为几列显示什么,我正在尝试测试这些方法。
简短的问题:如何测试我需要监视的方法的返回值?
背后的故事
这是我的 Javascript 对象的缩小版本:
function Table(elemId) {
this._table = $('#'+elemId).dataTable({
"aoColumnDefs": [
{
"fnRender": function(oObj, id) {
return Table.renderIdColumn(oObj, id, lTable);
},
"aTargets": ["idColumn"],
"bUseRendered": false
},{
"fnRender": function(oObj, name) {
return Table.renderNameColumn(oObj, name, lTable);
},
"aTargets": ["nameColumn"],
"bUseRendered": false
}
],
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
}
Table.renderIdColumn = function(oObj, id, lTable) {
return '<input type="checkbox" value="' id + '" />';
};
Table.renderNameColumn = function(oObj, name, lTable) {
var id = oObj.aData[0];
return '<a href="/obj/edit/' + id + '">' + name + '</a>';
};
所以在创建 Table 对象时,我需要拦截对 Table.RenderIdColumn 和 Table.renderNameColumn 的调用,这样我才能断言结果。到目前为止,这是我在 Jasmine 中所拥有的:
describe("Table", function() {
var lTable;
// Write a DOM table that will be rendered by the jQuery DataTable plugin
beforeEach(function() {
$('<table id="storeTable"></table>').appendTo('body');
var headerCellClasses = ["idColumn","nameColumn"];
var headerRow = $('<tr></tr>');
$.each(headerCellClasses, function(index, value) {
headerRow.append('<th class="' + value + '"></th>')
});
$('<thead></thead>').append(headerRow).appendTo('#lTable');
$('<tbody></tbody>').appendTo('#lTable');
});
afterEach(function() {
// First remove DataTables enhancements
lTable.fnDestroy();
// Now remove from DOM
$('#lTable').remove();
});
describe("when edit links are shown", function() {
it("should render a checkbox in ID column", function() {
spyOn(Table, "renderIdColumn");
lTable = initializeDataTable();
var oSettings = lTable._table.fnSettings();
var id = 1;
var obj = {
oSettings: oSettings,
iDataColumn: 0,
iDataRow: 0,
mDataProp: 0,
aData: oSettings.aoData[0]._aData
}
var expected = '<input type="checkbox" value="'+ id +'" />';
expect(Table.renderIdColumn).toHaveBeenCalledWith(obj, id, lTable);
var results = Table.renderIdColumn(obj, id, lTable);
expect(results).toEqual(expected);
});
it("should render the name column with a proper link", function() {
spyOn(Table, "renderNameColumn");
lTable = initializeDataTable();
var oSettings = lTable._table.fnSettings();
var name = "Name";
var obj = {
oSettings: oSettings,
iDataColumn: 3,
iDataRow: 0,
mDataProp: 3,
aData: oSettings.aoData[0]._aData
}
var expected = '<a href="/obj/edit/1">Name</a>';
expect(Table.renderNameColumn).toHaveBeenCalledWith(obj, name, lTable);
var results = Table.renderNameColumn(obj, name, lTable);
expect(results).toEqual(expected);
});
});
});
function initializeDataTable() {
// Mock the AJAX call to the server from DataTables plugin
spyOn($.fn.DataTable.defaults, "fnServerData").andCallFake(function( sUrl, aoData, fnCallback, oSettings ) {
var json = {
iEcho: 1,
iTotalRecords: 1,
iTotalDisplayRecord: 1,
aaData: [
[1, "Name"]
]
}
fnCallback(json);
});
return new Table("lTable");
}
在这两个测试用例中,变量“结果”都是“未定义”。我需要测试这些方法以确保它们呈现正确的 HTML,但我似乎无法弄清楚如何断言返回值。一旦我对该方法进行了间谍活动,它似乎不会返回任何内容。我试过插入
Table.renderIdColumn.reset();
Table.renderNameColumn.reset();
但是这些都没有做任何事情......也许是因为我的方法是静态的?仅供参考,这些方法是静态的,因为如果它们是实例方法,我无法正确分配“间谍”。Table 构造函数调用 DataTables 插件,这将导致这些方法被自动调用,因此我无法构造 Table 对象,然后对这些方法进行监视。