我有兩個RequireJS模塊，一個用於從外部服務獲取數據，一個負責將回調傳遞給第一個模塊。jasmine-fixtures - 從未見過的DOM變化
這是第一個非常基本的模塊：
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);
}
});
}
};
});
我想考這最後的模塊，使用茉莉花裝置和使用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);
});
});
});
提前感謝！
羅爾夫
P.S .:由$(employeeDropDownSelector).on('change',和/或包裹activities.observeEmployees呼叫（和$('#employees').trigger('change');）與domready中替換$(employeeDropDownSelector).change產生同樣的結果
P.P.S：該錯誤的原因 - >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選擇器，甚至迫使最新發布的版本爲茉莉Maven的插件依賴性不會改變什麼...
有什麼辦法（WTF？）改變茉莉花插件亞軍？