jqgrid 的 Qunit 测试用例

Question

许多功能是使用 jqgrid 编写的。所以我打算用 Qunit 编写测试用例..

但不熟悉如何使用 Qunit 为 jqgrid 编写 TC。我在 google 中搜索了一些示例。但我没有找到。

如果有人写过一些测试用例，请分享一个示例。

Answer 1

我不得不从下面的话开始：我在QUnit方面表现不佳。尽管如此，因为我看到没有其他人给你写答案，所以我决定写下我的答案。

最多的问题是如何使用单元测试。我知道很多人试图设置一些 "best practice rules" 并保持在那里非常非常奇怪。像"how to organize the tests in groups"之类的科目很多。我是实用主义者。所以我认为最重要的是制定单元测试的主要目标。如果达到了主要目标，那么我就已经很满意了。所以我只创建了一些基础测试来演示您可以做什么以及 QUnit 如何帮助我们。

The demo 显示了 jqGrid 使用 QUnit 的示例。重要的是要了解必须自己实施每个测试，而 QUnit 在这里帮不了我们。所以如果你想验证初始空 <table id="grid"></table> 是否成功转换为 jqGrid 我们必须知道 什么是 jqGrid 以及我们如何测试功能。

例如，在创建 jqGrid 期间，许多外部 div 将在主 <table> 上创建。网格的所有元素都将在 <div class="ui-jqgrid ..." id="gbox_grid" ...>...</div> 内。所以为了验证这一点，我们可以使用这样简单的测试

QUnit.test("gbox exists", function(assert) {
    var $grid = $("#grid");
    assert.equal($grid.closest(".ui-jqgrid").length, 1, "Passed!" );
});

测试验证 $("#grid").closest(".ui-jqgrid").length 是否等于 1。

一个更常见的测试。每个内部 jqGrid 方法测试它是否将通过主 <table> 的 DOM 元素的 grid expando 的存在来应用 jqGrid。以getCell方法的代码the line为例。所以可以通过以下测试来做同样的事情：

QUnit.test("grid expando exists", function(assert) {
    var $grid = $("#grid");
    assert.notEqual($grid[0].grid, undefined, "Passed!" );
});

所以我们必须确切地知道你需要测试什么以及如何测试。 QUnit 只能帮助我们显示测试结果。

我在我的演示中包含了两个失败的 "pseudo" 测试。第一个测试如下。我最近在 github the new version of free jqGrid 4.8. As you probably know Tony, the developer of jqGrid, have changed the licence agreement of jqGrid after publishing of jqGrid 4.7. So jqGrid 4.7 is the last version of "the original jqGrid" available under MIT licences. After that I started my own fork of jqGrid under the name "free jqGrid", included many functionality and fixed many bugs. As one of the new features I changed the structure of Navigator Bar. I describe the changes in details in the wiki article 上发表了文章。简而言之，导航栏现在是 <div> 而不是以前使用的 <table>。所以测试通过了 free jqGrid（在我的 jqGrid 分支上），但在 jqGrid 4.7

上失败了

QUnit.test("the navigator bar is DIV", function(assert) {
    var $grid = $("#grid"), pagerIdSelector = $grid.jqGrid("getGridParam", "pager");
    assert.equal($(pagerIdSelector).find(".navtable")[0].nodeName.toUpperCase(), "DIV", "Passed!" );
});

同时下一个测试在免费的 jqGrid 上失败，但在原始 jqGrid 上通过了：

QUnit.test("the navigator bar is TABLE", function(assert) {
    var $grid = $("#grid"), pagerIdSelector = $grid.jqGrid("getGridParam", "pager");
    assert.equal($(pagerIdSelector).find(".navtable")[0].nodeName.toUpperCase(), "TABLE", "Passed!" );
});

测试结果如下：

所以 QUnit 帮助我们以更易读的形式显示结果。

我在演示中包含的另一个 "pseudo-failed" 测试如下。我阅读了关于 getRowData 的一行内容，然后使用 QUnit 的 assert.deepEqual 方法将结果与预期对象进行比较。我在比较对象中包含故意输入错误（我使用 amount: 400 而不是 amount: "400.00"）。测试失败的结果会显示在下方

显然，QUnit 的这种功能使测试结果的分析变得容易。

我想再强调一次，QUnit 仍然无法帮助我们编写测试本身。因此，在编写针对 jqGrid 功能的特定测试时，仍然有很多无聊的工作。

无论如何，我计划在未来为我的 jqGrid 分支（免费的 jqGrid）编写这样的测试。我计划编写一个测试列表，并在将来使用它来验证 jqGrid 代码的更改。我希望它有助于使免费的 jqGrid 对更改更加稳定。我的意思是我想验证 jqGrid 的某些功能 对代码的每个新更改 。所以我希望功能不会被建议的更改破坏。这是我对单元测试的期望。

jqgrid 的 Qunit 测试用例

Qunit Test Cases for the jqgrid

jqgrid

qunit