title: Using QUnit to test if item has a certain class
body: <p>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. </p>
  
  <p>I'm using QUnit to test if these elements gets the class or not. Any ideas? </p>
  
  <p>Codepen: 
  <a href="http://codepen.io/eplehans/pen/xVYMLp" rel="nofollow">http://codepen.io/eplehans/pen/xVYMLp</a></p>
  
  <h3>HTML looks roughly like this:</h3>
  
  <pre><code>&lt;label for="password"&gt;Password input&lt;/label&gt;
  &lt;input pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[a-z]).*$" id="password" name="password" type="password"&gt;
  
  &lt;ul class="input-requirements-list"&gt;
      &lt;li class="input-requirements-list__item" data-psw-req="8-chars"&gt;8 characters minimum&lt;/li&gt;
      &lt;li class="input-requirements-list__item" data-psw-req="1-special-char"&gt;1 special character&lt;/li&gt;
  &lt;/ul&gt;`
  </code></pre>
  
  <h3>JS looks roughly like this:</h3>
  
  <pre><code>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 &gt;= 8) {
             okCheck($charChecker, true);
          } else {
          okCheck($charChecker, false);
          }
  
          //Special character match
          if (currentVal.match(/[-!$%^&amp;*()@øæåØÆÅ_+|~=`{}\[\]:";'&lt;&gt;?,.\/]/)) {
             okCheck($specialCharChecker, true);
          } else {
            okCheck($specialCharChecker, false);
          }
      });
  }
  </code></pre>
  
  <h3>QUnit test looks like this:</h3>
  
  <pre><code>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!");
  });
  </code></pre>