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,
Hi Angel,
Thank you very much for your help! I'm changing the dataset of a 'igCombo' element and I got this far with my test:
test("updateComboDatasource()", function () { var mockDatasource = [{Text: "OTP-test1", Value: "OTP-value1"}]; updateComboDatasource(mockDatasource ); var mockCombo = $("#igCombo").data('igCombo').options; var expectedData = mockCombo.dataSource;
equal(expectedData, data, 'Data has been updated');});
and the function to test is:
function updateComboDatasource(data) { var combo = $("#igCombo"); var comboOptions = combo.data('igCombo').options; <---- here the test crashes, "Unable to get value of the property 'options': object is null or undefined" comboOptions.dataSource = data; combo.igCombo('dataBind');}
Any help is highly appreciated... maybe I should have initialized the igCombo inside the test?
Hello Zora,
jQuery UI have changed the naming of their widgets in the latest versions so if your test crashes with this then you should try:
var comboOptions = combo.data('ui-igCombo').options;
Let us know if this works in your case!
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,
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://es.infragistics.com/support
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