我有两个 RequireJS 模块，一个用于从外部服务获取数据，一个负责将回调传递给第一个模块。
这是第一个非常基本的模块：
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 依赖项不会改变任何东西......
有没有办法改变 jasmine 插件运行器？