2 つの RequireJS モジュールがあります。1 つは外部サービスからデータをフェッチするためのもので、もう 1 つはコールバックを最初のモジュールに渡すためのものです。
最初の非常に基本的なモジュールは次のとおりです。
define(["jquery"], function($) {
return {
/**
* Retrieves all the companies that do not employs the provided employee
* @param employeeId ID of the employee
* @param successCallback callback executed on successful request completion
* @return matching companies
*/
fetchCompanies: function(employeeId, successCallback) {
var url = '/employees/' + employeeId + '/nonEmployers';
return $.getJSON(url, successCallback);
}
};
});
そして最も興味深いのは、新しいドロップダウンを生成し、それを指定された DOM 要素に挿入するものです (これはテスト対象の要素です)。
define([
'jquery',
'vendor/underscore',
'modules/non-employers',
'text!tpl/employeeOption.tpl'], function($, _, nonEmployers, employeeTemplate) {
var updateCompanies = function(selectedEmployeeId, companyDropDownSelector) {
nonEmployers.fetchCompanies(selectedEmployeeId, function(data) {
var template = _.template(employeeTemplate),
newContents = _.reduce(data, function(string,element) {
return string + template({
value: element.id,
display: element.name
});
}, "<option value='-1'>select a client...</option>\n");
$(companyDropDownSelector).html(newContents);
});
};
return {
/**
* Updates the dropdown identified by companyDropDownSelector
* with the companies that are non employing the selected employee
* @param employeeDropDownSelector selector of the employee dropdown
* @param companyDropDownSelector selector of the company dropdown
*/
observeEmployees: function(employeeDropDownSelector, companyDropDownSelector) {
$(employeeDropDownSelector).change(function() {
var selectedEmployeeId = $(employeeDropDownSelector + " option:selected").val();
if (selectedEmployeeId > 0) {
updateCompanies(selectedEmployeeId, companyDropDownSelector);
}
});
}
};
});
Jasmine-fixtures と waitsFor を使用して、この最後のモジュールをテストし、セットアップされたテスト DOM 構造が変更されたことを非同期的に確認しようとしています。ただし、タイムアウトには常に到達します。
次のテストで何が問題なのかを見つけることができれば、私は非常に感謝しています (要旨: https://gist.github.com/fbiville/6223bb346476ca88f55d ):
define(["jquery", "modules/non-employers", "modules/pages/activities"], function($, nonEmployers, activities) {
describe("activities test suite", function() {
var $form, $employeesDropDown, $companiesDropDown;
beforeEach(function() {
$form = affix('form[id=testForm]');
$employeesDropDown = $form.affix('select[id=employees]');
$employeesDropDown.affix('option[selected=selected]');
$employeesDropDown.affix('option[value=1]');
$companiesDropDown = $form.affix('select[id=companies]');
$companiesDropDown.affix('option');
});
it("should update the company dropdown", function() {
spyOn(nonEmployers, "fetchCompanies").andCallFake(function(employeeId, callback) {
callback([{id: 42, name: "ACME"}, {id: 100, name: "OUI"}]);
});
activities.observeEmployees('#employees', '#companies');
$('#employees').trigger('change');
waitsFor(function() {
var companiesContents = $('#companies').html(),
result = expect(companiesContents).toContain('<option value="42">ACME</option>');
return result && expect(companiesContents).toContain('<option value="100">OUI</option>');
}, 'DOM has never been updated', 10000);
});
});
});
前もって感謝します！
ロルフ
PS:呼び出し (および) を domReady で置換および/またはラップする$(employeeDropDownSelector).changeと、同じ結果が得られます。$(employeeDropDownSelector).on('change',activities.observeEmployees$('#employees').trigger('change');
PPS: このエラーが原因です -> SEVERE: runtimeError: message=[An invalid or illegal selector was specified (selector: '[id='employees'] :selected' error: Invalid selector: *[id="employees"] *:selected).] sourceName=[http://localhost:59811/src/vendor/require-jquery.js] line=[6002] lineSource=[null] lineOffset=[0].
PPPS: HtmlUnit は CSS3 セレクター (WTF?) をサポートしていないようで、jasmine-maven-plugin 依存関係として最新の公開バージョンを強制しても何も変わりません...
ジャスミンプラグインランナーを変更する方法はありますか?