我已经想出如何使用 karma 测试运行器测试我的代码,但我不知道如何在网页上测试 UI 功能。
我有一个简单的计算器程序 (calculator.js):
window.onload = function () {
var okResult = /^.*(\+|\*|-|÷)\d$|^\d$|^.*\d((\+|\*|-|÷)|\d)$/,
i, tds = document.getElementsByTagName("td");
var setResult = function (t) {
document.getElementsByTagName("th")[0].innerHTML = t;
};
var appendResult = function (t) {
document.getElementsByTagName("th")[0].innerHTML += t;
};
var getResult = function () {
return document.getElementsByTagName("th")[0].innerHTML;
};
for (i = 0; i < tds.length; i++) {
tds[i].onclick = function () {
var r;
if (this.innerHTML == '=') {
setResult(eval(getResult().replace(/÷+?/g, '/')));
} else if (this.innerHTML == 'clr') {
setResult("0");
} else if (getResult() == '0') {
setResult(this.innerHTML);
} else {
appendResult(this.innerHTML);
}
if (!okResult.test(getResult())) {
r = getResult();
setResult(r.substring(0, r.length - 1));
}
};
}
};
在 HTML DOM (calculator/index.html) 中使用这个简单的表格:
<table>
<tr>
<th id="results" colspan="4">0</th>
</tr>
<tr>
<td colspan="3"> </td>
<td>clr</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>÷</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>*</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>-</td>
</tr>
<tr>
<td>.</td>
<td>0</td>
<td>=</td>
<td>+</td>
</tr>
</table>
我想通过在 DOM 中找到的单元格上触发点击事件来测试它。例如 (calculator-spec.js):
test("Calculator initially displays 0", function () {
equal( $('td#results').text(), "0", "Initial display is 0" );
});
test("Calculator can add numbers", function () {
$('td:contains("1")').trigger('click');
$('td:contains("+")').trigger('click');
$('td:contains("1")').trigger('click');
$('td:contains("=")').trigger('click');
equal( $('td#results').text(), "2", "Initial display is 0" );
});
我正在尝试使用 karma 进行自动化测试,在我的 karma.conf.js 文件中我有:
//要使用的框架 框架:['qunit'],
// list of files / patterns to load in the browser
files: [
'http://code.jquery.com/jquery-1.10.2.min.js',
'**/Examples/Calculator/Complete/calculator.js',
'test/calculator/calculator-spec.js',
{pattern: '**/Examples/Calculator/Complete/index.html', watched: false, included: false, served: true}
],
如何使用 karma 执行 UI 测试。如何使用 qUnit 或 jasmine 模拟鼠标和键盘事件并检查生成的 DOM?
最佳答案
我不得不使用 DOM 元素点击方法:
$('td:contains("1")')[0].click();
关于qunit - 使用 karma 和 qUnit 测试按钮点击的简单 UI,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20292196/