A dirty (but works!) way to add a `hasClass` to the test suite

[Dan Course]

Hey TimeTravellers,

Just wanted to share a little snippet of code (it's dirty!) we've written to add a new method at run-time which will assert if an element has a class or not. It uses jQuery's really useful, `hasClass` method.

https://gist.github.com/dancourse/45ad644fe6d4cc55c209

// _addNewFunc is just a function that adds this to the main DalekJS test at run-time

_addNewFunc("hasClass", function (__selector, __needle)
{
    // generate a random name for this element
    var name = "hasClass-" + new Date().getTime(),
        nameElem = "span#"+name;

    return this.dse_self
        .execute(function(__selector, __needle, __name)
        {
            // create a new element to house the result
            var newELEM = $('<span />').attr('id', __name).attr("data-has-class", "false");
            $("body").append(newELEM);

            // use jquery to test if the class exists
            if($(__selector).hasClass(__needle))
            {
                // it exists, change the value
                $(newELEM).attr('data-has-class', 'true');
            }
        }, __selector, __needle, name)

        // test the elem if the data is true
        .assert.attr(nameElem, 'data-has-class', 'true', __selector + " has the class, " + __needle)

        // cleanup
        .execute(function(__nameElem)
        {
            $(__nameElem).remove();
        }, nameElem);
});

We may have missed the method somewhere already, but as far as I'm aware the 'attr' grabs the whole class string.

Feedback and glaring errors welcomed :)

Thanks & Geronimo!

DanC

[par...@nextdoor.com]

When you say at runtime, where are you exactly putting this?

[Dan Course]

Morning Parker,

This goes above the actual tests and attaches itself to the DalekJS object test object

dpc

--
You received this message because you are subscribed to a topic in the Google Groups "DalekJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/dalekjs/axX4A4dtHfI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to dalekjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

-- 
--
linkedin.com/in/dancourse
+44 (0) 7790 138 323

he...@dancourse.co.uk

[par...@nextdoor.com]

Thanks for the quick reply, Dan. I guess what I should have clarified in my question is where is this living in your actual code? Are you throwing this into a util file and requiring it? If so, what would that look like if you don't mind me asking?

[asciidisco]

Hey Dan,

pretty cool work. I will try to get some of it into the Dalek core. Nice!

Cheers

Sebastian

[Dan Course]

Ah sorry, I mis-understood and my semantics weren't right on. They're added when the tests are run, my NodeJS-foo isn't that great yet, so this just appears above all the tests at the top of my default.js file.

I've copied and pasted an example from our code, not entirely sure it works in this form. Have a fiddle, but ask if it's still not playing

Basically, the theory is, create a class which will hold all the extra functions you want to extend DalekJS with, pass it the DalekJS test and it applies all your site's custom functions to the dalekJS test object.

$ grunt tests

default.js
====
`

// This class wraps and extends the Dalek JS test class
var _dse = {

    // public

        // Called first in every test to make it apply your custom functions
        // from _addNewFunc
        this.attachFuncs = function(__test)
        {
            return _applyFunctions(__test);
        };

    // private

        // holds all the extra functions we want to add
        var _aF = [];

        // this applies all the extra methods defined below to the test & "dse" object
        // and prepends them with, "dse_" so they're namespaced away from the
        // core DalekJS methods
        var _applyFunctions = function (__test)
        {
            // loop all the extra functions we want to add to the test suite
            // and add them
            for(var x in _aF)
            {
                var key = x,
                    value = _aF[x];

                // namespace them
                __test['dse_' + key] = value;
            }

            // create a reference to the original DalekJS test object
            __test.theTest = __test;

            return __test;
        };

        // used to add new custom functions to the stack
        var _addNewFunc = function(__key, __func)
        {
            _aF[__key] = __func;
        };

    // Write you custom functions here

        // this adds new core functionality, you access it in the tests with, "dse_hasClass"
        _addNewFunc("hasClass", function (__selector, __needle) {....});

        // this adds a repeat function that the test suite uses a a lot, "dse_login"
        _addNewFunc("login", function(__username, __password) {
            // input username
            // input password
            // click login
            // wait until can see logged in message
        };

        // this logs you out from the site and calls the DalekJS done statement to end a test, "dse_logoutAndDone"
        _addNewFunc("logoutAndDone", function() {
            this.dse_self
                .click("a.logout")
                .done();
        };
};

// DATA
var providers = {
    "default:login": {
        "username": "david",
        "password": "tennant"
    },
};

// Instantiate a new DalekJS Site Extras class
var dse = new _dse();

// TESTS
module.exports = {
    'Default: Website loads': function (__test) {

        // attaches and namespaces your custom functions to the DalekJS test object
        dse.attachFuncs(__test)

        // runs a normal Dalek Test
        .assert.text("h1", 'Welcome to our website', "Can see welcome message")

        .done()
    },
    'Default: Can Login': function (__test) {

        // attaches and namespaces your custom functions to the DalekJS test object
        dse.attachFuncs(__test)

        // calls the custom login function, which is now
        // attached to the DalekJS object as "dse_login"
        .dse_login(providers["default:login"].username, providers["default:login"].password)

        .assert.text("h1", "You are logged in", "Can see logged in welcome message")

        // logs you out and calls done()
        .dse_logoutAndDone();
    },
};`

[par...@nextdoor.com]

Never got a chance to thank you, but thank you very much for posting that, Dan! Super helpful.

[asciidisco]

Definitely. Thank you Dan :)

[Hady Osman]

This is an old thread, but in case anyone is interested, I've created a plugin to fulfill this exact need of registering custom action and assertion plugins to use with Dalek's chainable syntax

https://github.com/hadynz/dalek-pluginize