Hi,
I would like to know where to start or if it is even possible to test using QUnit an igCombo DOM element (created with MVC Helpers). I would like to test its datasource and some options if are enabled or not.
Any suggestions are highly appreciated,
Kind regards,
Zora
yes, it is definitely possible to test with QUnit. Actually all our internal DEV tests are relying on QUnit.
on your page, you need to add a reference to the QUnit javascript, then you need to add some markup which has the QUnit CSS classes applied - qunit will use those classes to find the elements where it will inject the test results, something like this:
<div style="float:right;width:400px;overflow:auto;">
<h1 id="qunit-header">Test results</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
</div>
then you can start testing :
$(window).load(function () {
QUnit.init();
QUnit.start();
module("igCombo");
test("mycombotest1", function() {
var comboChild = $('#combo1').find('.someClass);
equals(...); // use the QUnit API here
}
Hope it helps. Thanks,
Angel
hey,
Let me know if you need any additional help with this. Thanks,
Alternatively, you can use a version of jQuery that does not include this breaking change - versions below 1.9.0
Thanks,
Hi Angel, Konstantin,
I am using jQuery 1.7.2, so 'ui-igCombo' property is not the issue. This function works fine, is just the QUnit test that fails:
function updateComboDatasource(data) { <-- function is in external javascript file var combo = $("#igCombo"); var comboOptions = combo.data('igCombo').options; <-- combo.data('igCombo') is undefined comboOptions.dataSource = data; combo.igCombo('dataBind');
Somehow the 'igCombo' element is not recognized like an element of DOM. How can I mock it?
Thank you for your help,
Hey Zora,
This doesn't have to do with the version of jQuery but rather with the version of jQuery-UI. Did you try extracting the data with string "ui-igCombo"?
Thank you for using the Infragistics forums!
Hi Konstantin,
Yes I've replaced $("#igCombo").data('igCombo') with $("#igCombo").data('ui-igCombo') but I got the same error, element undefined. The JQuery UI script is 1.8.7.
I've tried to create the igCombo in javascript, but when I call the function updateComboDatasource(data){} from the javascript file that I'm testing it tells me that $("#igCombo").data('ui-igCombo') is undefined.
Do you have any small example that works? It can be with any infragistics control, any idea is more than welcome...
Hi again,
So have you initialized an igCombo up to the point where your test fails? Please provide the entire code sample.
Thank you for your patience!
Hello Zora ,
I’m just following up to see if you need any further assistance. If you have any questions or concerns or if you need further assistance please let me know.
Best Regards,
Maya Kirova
Developer Support Engineer
Infragistics, Inc.
http://ko.infragistics.com/support
Hi Angel,
Thanks a lot, I've looked at it but unfortunately doesn't give a solution on how to test a dom element existing on a page (unless I recreate the element on the test page). All the paths lead to selenium for that.
Thanks a lot for your help,
Hi Zora,
You may refer to the following article, I think it will be of help to you:
http://haacked.com/archive/2011/12/10/using-qunit-with-razor-layouts.aspx
Thanks
Hey Angel,
I am a beginner in qunit and javascript but let me get this straight:
I should put the script references(qunit, JS script for test) in the aspx page. Then where do I display the results of the tests? I mean this part:
<body> <h1 id="qunit-header">QUnit Test Suite</h1> <h2 id="qunit-banner"></h2> <div id="qunit-testrunner-toolbar"></div> <h2 id="qunit-userAgent"></h2> <ol id="qunit-tests"></ol> <div id="qunit-fixture">test markup</div></body>
Before I had it in another html page, which I was calling directly. How am I testing then, by calling the page where the objects are initialized?
Sorry for still not getting it,
Let me know if you need any additional help with this. Thanks