Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

UI-Test with QUnit, JQuery and an iframe - how to wait until new page is loaded?

Tags:

jquery

wait

qunit

I am using QUnit and JQuery and want to test user interface of my website. My webapp resides in an iframe. I want to click on a navigation-Link, then wait until the new page is loaded and then I want to select a few items via JQuery to make sure that the correct page was loaded.

How to achieve this?

I read about setTimeout(), delay(), ajaxSetup(), setInterval(), up to now: no success.

Here is a code snippet:

// Klick auf Unternehmen und vergleiche h1-Ueberschrift.
        test("Klick Unternehmen, checke Ueberschrift", function() {
            var mes = "test: Klick Unternehmen, checke Ueberschrift;";
            var exp = "Unternehmen";
            jQuery.ajaxSetup({ async: false }); //turn off async so tests will wait for ajax results
            jQuery('#testframe').attr('src', './../index/unternehmen/').delay(3000);
            var t = setTimeout('doNothing()', 2000);
            //alert('now');
            var act = jQuery('h1').eq(1);
            //var act = "Unternehmen";
            //console.log(mes);
            equal(act, exp, mes);
        });

UPDATE: I was able to call the ressource by ajax. Anyway still no idea how to call click() - wait() - compare().

// Klick auf Unternehmen und vergleiche h1-Ueberschrift, Ajax S. 250
        test("Klick Unternehmen, checke Ueberschrift", function() {
            jQuery.ajax({
                url: "./../index/unternehmen/",
                async: false,
                success: function(response){
                    if (response){
                        jQuery('#ajaxcontent').html(response);
                    }
                },
                context: document.body,
                type: "POST"
            });
            var mes = "test: Klick Unternehmen, checke Ueberschrift;";
            var exp = "Unternehmen";
            var act = jQuery('#ajaxcontent h1').eq(0).text();
            equal(act, exp, mes);
        });
like image 471
Jochen Avatar asked Nov 04 '22 23:11

Jochen


1 Answers

You should try

$("#yourIframeID").load(function(){
    //do your testing stuff here..

})

There's also a way for async testing in QUnit, but I'm nor sure it applies to your case (asyncTest( name, expected, test ))

like image 120
Adrián Avatar answered Nov 20 '22 16:11

Adrián