使用 karma 和 qUnit 测试按钮单击的简单 UI

Question

我已经知道如何使用 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">&nbsp;</td>
        <td>clr</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>&divide;</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？

Answer 1

我不得不使用 DOM 元素点击方法：

$('td:contains("1")')[0].click();