mardi 28 avril 2015

How to (and should we) test UI element visibility in jasmine?

I have a function that hides and shows items on my page based on what a factory provides me:

function toggleMenuItems(config) {
        // hide all our elements first
        $(".js-quickMenuElement").hide();

        config.data = config.data || [];
        config.data.forEach(function (d) {

            if (d === config.viewConfigCatalog.CalendarLink) {
                $("#CalendarLink.js-quickMenuElement").show();
            }

            if (d === config.viewConfigCatalog.ProductCreation) {
                $("#ProductCreation.js-quickMenuElement").show();
            }

            // etc etc etc

        });

    };

We've been using Jasmine for our javascript unit tests and we're discussing whether we should test this function. Some say that we don't need to because testing this is coupling the view to the javascript test, but at the same time, if instead of jquery .show and .hide functions those were wrappers, or other functions we would test them.

Following on this what would be the best way to test this? Making a wrapper function that takes in a string and injects the string name in the jQuery select seems wrong. Another option we thought of is spying on ($.fn, "show") but that would only let us test if show was called X amount of time and not what was hidden...

Thanks,

Aucun commentaire:

Enregistrer un commentaire