Writing unit tests and testing accessibility tests

Quail testfiles have grown over the years, and in an effort to capture as many edge cases as possible, the following is a new format for writing tests:

Create your test file

If your test is for running accessibility tests themselves, place the file in test/accessibility-tests, place any other unit tests that work on functionality or components in either test/components, test/core, etc. If your file tests an accessibility test, name the file after the label (i.e. imgHasAlt) of your test. Other tests should have descriptive names.

Test files should be HTML5 (unless they need an additional doctype). If your test is looking for things like doctype where you cannot mix pass/fail situations on the same HTML page, than name your file testName-fail/pass.html.

Include the tests/testrunner.js file

Testrunner will include additional javascript (jQuery, quail, qunit) on the page, and inject necessary CSS files.

<script src="../testrunner.js"></script>

Define your pass/fail elements on the page

In the body of your page, define test sections using a div with the class of quail-test and a unique ID. If this file is testing an accessibility test, then use the data-expected attribute with a value of pass or fail to indicate what the expected result will be, and data-accessibility-test to indicate which test should be run. Finally, if your expecting a failure, add the class quail-failed-element to the element(s) you are expecting to have returned as a failure result.

<div class="quail-test pass" id="imgHasAlt-pass" data-expected="pass" data-accessibility-test="imgHasAlt">
  <img src="rex.jpg" alt="My cat"/>
</div>

<div class="quail-test fail" id="imgHasAlt-pass" data-expected="fail" data-accessibility-test="imgHasAlt">
  <img src="rex.jpg" class="quail-failed-element" />
</div>

<div class="quail-test pass" id="imgHasAlt-pass" data-expected="notApplicable" data-accessibility-test="imgHasAlt">
  <img alt="My cat"/>
</div>

If you need to run some JavaScript before tests are run, and want access to jQuery, then you'll need to attach a testsReady event to the document, which is called after the testrunner has included Quail and jQuery on the page.

document.addEventListener('testsReady', function() {
  $('#link').on('click', function() {
    alert('You clicked on the link');
  });
});

Testing non-accessibility tests code

If you are instead writing a test file for components or another non-accessibility-test, you'll have to write tests just like any QUnit code. There is a global called __testQuail that is available for accessing the quail object. Make sure to wrap these test definitions in the following closure so the runner executes your test only after everything else is ready:

(function(global) {
  global.quailTest = function() {
    //Your test code goes here.
  });
})(this);

Use Grunt to build the list of test files

There is a custom task for either the default grunt or grunt test that will put all the accessibility test files into a path/_tests.json file that QUnit will use to determine which tests to run. You could also keep grunt watch running and it will regenerate these files automatically.