针对jqgrid的Qunit测试用例

Question

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

但是如何使用Qunit为jqgrid编写TC并不熟悉。我在谷歌搜索了一些例子。但我找不到任何。

如果有人写了一些测试用例，请分享一个样本。

Answer 1

我必须从以下几个字开始：我在QUnit 中表现不佳。然而，因为我看到没有其他人给你写过答案我决定写下我的答案。

最大的问题是如何使用单元测试。我认识很多人试图制定一些最佳实践规则＆＃34;而且非常奇怪。有许多主题，如＆＃34;如何组织测试＆＃34;等等。我是实用主义者。所以我认为最重要的是制定单元测试的主要目标。如果达到主要目标，那么我已经满意了。因此，我只创建了一些基础测试来演示您可以做什么以及QUnit如何帮助我们。

The demo 显示了jqGrid的使用情况QUnit的示例。了解一个人必须自己实施每个测试并且QUnit无法在这里帮助我们，这一点非常重要。因此，如果您想验证初始空<table id="grid"></table>是否已成功转换为jqGrid ，我们必须知道什么是jqGrid以及我们如何测试功能。

例如，在创建jqGrid期间，将在主<table>上创建许多外部div。网格的所有元素都在<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方法测试是否将通过主grid的DOM元素的<table> expando的存在来应用jqGrid。请参阅getCell方法代码的the line作为示例。所以可以通过以下测试做同样的事情：

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

因此，我们必须确切地知道您需要测试什么以及如何测试。 QUnit可以帮助我们只显示测试结果。

我在演示中加入了两个＆＃34;伪＆＃34;测试失败了。第一个测试如下。我最近在github上发布了免费jqGrid 4.8的新版本。您可能知道jqGrid的开发人员Tony在发布jqGrid 4.7后更改了jqGrid的许可协议。所以jqGrid 4.7是＆＃34;最初的jqGrid＆＃34;的最后一个版本。根据MIT许可证提供。之后，我以名称＆＃34;免费jqGrid＆＃34; 开始了我自己的jqGrid分支，包括许多功能并修复了许多错误。作为新功能之一，我改变了Navigator Bar的结构。我在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帮助我们以更易读的形式显示结果。

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

下面

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

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

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