javascript - 使用 QUnit 测试项目是否具有某个类

Question

我创建了一个密码输入模块，它有几个正则表达式和下面的列表，告诉用户要满足哪些要求才能创建密码，也就是提交表单。我在 keyup 上为每个需求列表项添加/删除一个类，具体取决于它是否满足需求。

我正在使用 QUnit 来测试这些元素是否获得类。有任何想法吗？

代码笔: http://codepen.io/eplehans/pen/xVYMLp

HTML 大致如下所示:

<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 大概长这样:

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 测试如下所示:

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!");
});

Answer 1

您必须触发与用户在写入时触发的事件相同的事件。在这里我触发了 keyup 事件，就像用户完成输入时所做的那样。

http://codepen.io/tomkarachristos/pen/MyQxbQ

QUnit.test("Expect li[data-psw-req=8-chars] to have affirmative class when password input has 8 or more characters", function(assert) {

    $passwordInput.val('123456789dddddd');
    $passwordInput.keyup();
    ok($reqItem1.hasClass(affirmativeClass), true, "It has the class!");

});