assertVisible on responsive page

[Andy Orahood]

I've got a page that I'm trying to write tests for in two modes: desktop (wide) interface and mobile (narrow) interface. The page uses Bootstrap and shows/hides navigation elements based on the viewport size. I can do a test that asserts something is visible in the wide mode, but when I try to resize the page and assert that the desktop navigation elements have been hidden, it fails. My code looks like

        casper.options.viewportSize = {1920,1080};

casper.test.begin("Remove services tab for now", function suite(test) {

    casper.start("https://new-test.kb.iu.edu/kmssc-reg", headers, function(response) {
        test.assertNotVisible('div.mobile-only.show-nav-btn');
    });

        // Resize interface to test mobile interface
    casper.viewport(600, 300, function() {
        test.assertVisible('div.mobile-only.show-nav-btn');
    });

    casper.run(function() {
        test.done();
    });

});

The .mobile-only class is visible when the page width is less than about 800px. Am I expecting something that assertVisible doesn't do? Or am I setting this up wrong?

[LC]

I'm interested in this response as well. 

As a workaround, I used "evaluate" to use jQuery to find if the object is hidden.  This example is checking that an iframe is hidden.

            // casperjs can't check visibility of iframe with "assertNotVisible", so use jQuery '#id:visible' selector returns nothing

            var isFormHidden = this.evaluate(function(contactIframeId) {

                return $('#' + contactIframeId + ':visible').length === 0;

              }, contactIframeId);

            test.assertTrue(isFormHidden, 'Contact form is hidden');

Hoping someone can chime in with the "official" way to do this in casperjs.

-Leslie