全開示...これが私の最初の質問です。私は何かを残しておくと親切にしてください。 ;-)ジャスミンを使用してスパイドメソッドの戻り値をテストする
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への呼び出しや表を傍受する必要があります.renderNameColumn私は結果をアサートすることができます。これまで私がジャスミンで持っていたことはこれまでのところです：
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");
}
どちらのテストケースでも、変数 "results"は 'undefined'です。これらのメソッドをテストして、正しいHTMLをレンダリングしていることを確認する必要がありますが、戻り値をアサートする方法を理解できないようです。メソッドにスパイを置くと、何も返されないようです。私は挿入しようとしました
Table.renderIdColumn.reset();
Table.renderNameColumn.reset();
しかし、それらのどちらも何もしなかった...私の方法は静的なので、これらのメソッドは、インスタンスメソッドの場合、私が正しく「スパイ」を割り当てることができないため、静的です。 TableコンストラクタはDataTablesプラグインを呼び出します。これらのメソッドは自動的に呼び出されるため、Tableオブジェクトを作成してそのメソッドにスパイを配置することはできません。