Qunit Test Cases for the jqgrid

Question

Lot of funcationality was written using the jqgrid. So i was planning to write the test cases using Qunit..

But not familier on how to write a TC for the jqgrid using the Qunit. I searched for the some examples in google. but i don't find any.

If any one has written some testcases, please share a sample.

Answer 1

I have to start with the following words: I'm not good in QUnit. Nevertheless because I see that nobody else wrote an answer to you I decided to write my answer.

The most problem is how to use unit tests. I know a lot of people who try to set some "best practice rules" and to hold there very very strange. There are a lot of subjects like "how to organize the tests in groups" and so on. I'm pragmatist. So I think that the most important thing is to formulate the main goal of unit tests. If the main goal is reached, then I'm already satisfied. So I created only some basis tests to demonstrate what you can do and how QUnit could help us.

The demo shows an example of usage QUnit for jqGrid. It's important to understand that one have to implement every test yourself and QUnit can't help us here. So If you want to verify that initial empty <table id="grid"></table> is successfully converted to jqGrid we have to know what is jqGrid and how we can test the functionality.

For example during creating of jqGrid many outer divs will be created over the main <table>. All elements of the grid will be inside of <div class="ui-jqgrid ..." id="gbox_grid" ...>...</div>. So to verify this we can use such simple test

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

The test validate whether $("#grid").closest(".ui-jqgrid").length is equal to 1.

One more common test. Every internal jqGrid method test whether it will be applied of jqGrid by existence of grid expando of DOM element of the main <table>. See the line of the code of getCell method as an example. So one can do the same by the following test:

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

So we have to know exactly what you need to test and how to test. QUnit can help us only to display the results of the tests.

I included in my demo two "pseudo" tests which failed. The first test is the following. I published recently on 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. Shortly say the navigator bar is now <div> instead of <table> used before. So the test passed on free jqGrid (on my fork of jqGrid), but it failed on 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!" );
});

At the same time the next test failed on free jqGrid, but passed on original 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!" );
});

The results of tests looks as following:

So QUnit help us just to display the results in more readable form.

One more "pseudo-failed" test which I included in the demo is the following. I read the content of one row with respect of getRowData and then compare the results with expected object using assert.deepEqual method of QUnit. I included deliberately typing error in the compared object (I used amount: 400 instead of amount: "400.00"). The results of failed test will be displayed below

It's clear that such functionality of QUnit makes the analyzing of testing results easy.

I want to stress one more time that QUnit still don't help us in writing the tests itself. So one have still a lot of boring work in writing the tests which are specific for jqGrid functionality.

In any way I plan in the future to write such tests for my fork of jqGrid (for free jqGrid). I plan to write a list of tests and to use it to validate the changes of jqGrid code in the future. I hope that it will help to make free jqGrid more stable to changes. I mean that I want to validate some functionality of jqGrid on every new changes of the code. So I want that the functionality will be not broken by the suggested changes. It's what I expect from the unit tests.