mardi 12 avril 2016

Using QUnit to test if item has a certain class

I've created a password input module which has a couple of regexes and a list underneath telling the user which requirements to meet in order to create the password, aka submit the form. I'm adding/removing a class to each requirement list item on keyup depending on if it meets the requirement or not.

I'm using QUnit to test if these elements gets the class or not. Any ideas?

Codepen: http://ift.tt/1WpIOSn

HTML looks roughly like this:

<label for="password">Password input</label>
<input pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[a-z]).*$" id="password" name="password" type="password">

<ul class="input-requirements-list">
    <li class="input-requirements-list__item" data-psw-req="8-chars">8 characters minimum</li>
    <li class="input-requirements-list__item" data-psw-req="1-special-char">1 special character</li>
</ul>`

JS looks roughly like this:

function passwordRegEx($input, $list) {
    var currentVal;
    var affirmativeClass = 'affirmative';

    function okCheck($el, affirmative) {
        if (affirmative === true) {
        $el.addClass(affirmativeClass);
        } else {
            $el.removeClass(affirmativeClass);
        }
    }

    //Requirements as shown in requirements list underneath password input
    var $charChecker = $list.find('[data-psw-req="8-chars"]'),
    $specialCharChecker = $list.find('[data-psw-req="1-special-char"]');

    $input.keyup(function() {
        currentVal = $input.val();

        //More than 8 characters
        if (currentVal.length >= 8) {
           okCheck($charChecker, true);
        } else {
        okCheck($charChecker, false);
        }

        //Special character match
        if (currentVal.match(/[-!$%^&*()@øæåØÆÅ_+|~=`{}\[\]:";'<>?,.\/]/)) {
           okCheck($specialCharChecker, true);
        } else {
          okCheck($specialCharChecker, false);
        }
    });
}

QUnit test looks like this:

var $passwordInput = $('#password'),
    affirmativeClass = 'affirmative';
var $reqItem1 = $('li[data-psw-req="8-chars"]'),
    reqItem2 = $('li[data-psw-req="1-special-char]');

QUnit.test("Expect [data-psw-req=8-chars] to have class when requirements are met", function(assert) {
    $passwordInput.val('123456789dddddd');
    ok($reqItem1.hasClass(affirmativeClass), true, "It has the class!");
});

Aucun commentaire:

Enregistrer un commentaire