在最简单的测试中，我试图测试以下功能：
addPercentSign: function (oEvent, control) {
var inputVal = oEvent.getParameters().value;
var inputNumber = parseFloat(inputVal);
if (inputNumber) {
if (inputNumber < 50 || inputNumber > 100) {
//see learningCurveFormatCheck
return null;
} else {
var finalVal = inputNumber.toFixed(1);
var finalOutput = finalVal + "%";
control.learningCurve.setValue(finalOutput);
return finalOutput;
};
}
}
上述函数是输入字段上的事件侦听器（id =＆＃34; learningCurveInput＆＃34;）。当用户在字段中键入值，然后触发“提交”＃39;事件（通过＆＃34; ENTER＆＃34;按键），＆＃39; addPercentSign＆＃39;函数被调用。
我理解通过单元测试，我们的想法是“隔离”。尽可能从任何依赖项进行测试。因此，要测试DOM操作，可以将元素附加到div下的test.html：
$('<input id="learningCurveInput" type="text"/>').appendTo('#qunit-fixture');
有人可以解释下一步该做什么吗？该函数依赖于传入的Event对象来检索输入值。我不确定如何在测试中重新创建它。我在下面附上了我的单元测试，但这只是为了展示我的想法：
...,
function (formatter, viewControls) {
"use strict";
QUnit.module("Formatter Object Exists")
QUnit.test("Learning Curve Input Value", function (assert) {
$('<input id="learningCurveInput" type="text"/>').appendTo('#qunit-fixture');
$("#learningCurveInput").val("55");
var result = '55';
equals(result, $('#learningCurveInput').val(), "testing input value");
});
QUnit.test("addPecentSign Function", function (assert) {
//how to test this dom-dependent function?
});
}
);
摘要问题
我如何单独测试“addPercentSign”＆＃39;被调用的函数＆＃39;提交＆＃39;输入字段？
答案 0 :(得分：11)
我建议将这些部分分开：
"51" -> "51.0%" input值的方法是否有效如果所有这些测试都成功，您可以假设将它们链接在一起也可以。
为了测试转换方法，我建议将其逻辑转换为单独的纯函数。我在下面粘贴了您的格式逻辑并删除了setValue副作用。我包括了一些测试（您应该检查它们，看看您是否需要更多/它们符合您的要求）。我把两个失败的测试作为一个例子。
function addPercentSign(val) {
var inputNumber = parseFloat(val);
if (inputNumber) {
if (inputNumber < 50 || inputNumber > 100) {
//see learningCurveFormatCheck
return null;
} else {
var finalVal = inputNumber.toFixed(1);
var finalOutput = finalVal + "%";
return finalOutput;
};
};
};
module("String formatting");
test("Returns undefined for unparseable strings", function() {
["foo", null, NaN, "0.0.0"]
.forEach(function(result, i, arr) {
var result = addPercentSign(result);
strictEqual(result, undefined, arr[i] + " produces " + result);
});
});
test("Returns null for values below 50 and above 100", function() {
["0", "0.0", "25", "49.99999", "100.00000001", "10300", Infinity]
.forEach(function(result, i, arr) {
var result = addPercentSign(result);
strictEqual(result, null, arr[i] + " produces " + result);
});
});
test("Appends a % sign for values between 50 and 100", function() {
strictEqual(addPercentSign("51.0"), "51.0%");
// ...
});
test("Appends a digit for values without one", function() {
strictEqual(addPercentSign("51"), "51.0%");
// ...
});
test("Removes and rounds digits for values with more than one", function() {
strictEqual(addPercentSign("51.999"), "52.0%");
strictEqual(addPercentSign("51.06"), "51.1%");
// ...
});<link href="https://code.jquery.com/qunit/qunit-1.12.0.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/qunit/qunit-1.12.0.js"></script>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
现在您已经涵盖了此方法，您需要了解是否可以从中检索值并将值写入输入字段。这些与您已经写过的类似：
value
function createInput() {
return $('<input id="learningCurveInput" type="text" value="hello world"/>')
.appendTo('#qunit-fixture');
}
module("Writing and reading to input", {})
test("writes to value", function(assert) {
var $input = createInput();
var result = "55";
// Whatever you're using to set:
// in your code, I read `control.learningCurve.setValue`
// if that's what you're using, that's the method you should test
$input.val(result);
strictEqual($input.val(), result);
});
test("reads from value", function(assert) {
var $input = createInput();
// Whatever you're using to get the value
$input.val();
strictEqual($input.val(), "hello world");
});<link href="https://code.jquery.com/qunit/qunit-1.12.0.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/qunit/qunit-1.12.0.js"></script>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
现在您知道可以（a）正确转换值，（b）正确读取和写入值，您需要测试获取值 - ＆gt;变换值 - ＆gt;设定值序列将由正确的输入触发。例如：
jQuery有一些方便的方法来附加和触发事件监听器。您可以在没有参数的情况下使用.change或submit来模仿UI输入。或者，您可以在提交按钮上触发click。
function createForm() {
return $("<form></form>")
.append(createInput());
}
function createInput() {
return $('<input id="learningCurveInput" type="text" value="hello world"/>')
.appendTo('#qunit-fixture');
}
module("Form event listeners", {})
test("input executes method on change", function(assert) {
var called = false;
var onChange = function() { called = true; };
var $input = createInput();
$input.change(onChange);
$input.val("test");
strictEqual(called, false);
$input.change();
strictEqual(called, true);
});
test("form executes method on submit", function(assert) {
var called = false;
var onSubmit = function() { called = true; };
var $form = createForm();
var $input = $form.find("input");
$form.submit(onSubmit);
strictEqual(called, false);
$form.submit();
strictEqual(called, true);
});<link href="https://code.jquery.com/qunit/qunit-1.12.0.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/qunit/qunit-1.12.0.js"></script>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
现在，您可以确定测试是否涵盖了代码的实现：
$("form").submit(function() { // Tested in test 3
var $input = $(this).find("input");
var originalValue = $input.val(); // Tested in test 2
var newValue = addPercentSign(originalValue); // Tested in test 1
$input.val(newValue); // Tested in test 2
});
请注意，它主要是第一个具有自定义逻辑和要求的测试模块。如果你正在使用已经经过严格测试的jQuery，你将不需要为.val()等方法重新实现测试：检查他们的公共回购以查看这些方法的覆盖范围。如果您要实现与DOM交互的自定义方法，那么做需要对它们进行测试。
因此，简而言之：将addPercentageSign重写为一个纯函数，它接受一个字符串并返回一个字符串;确保它经过全面测试。通过经过测试的库与DOM交互，或者为DOM编辑和事件监听编写测试。