HTML and CSS Reference
In-Depth Information
Make sure you remove the condition— if(window.QUnit == undefined) —in
the production code.
Now, let us write a test to confirm that when a navigation tab is clicked the correct
class is applied to itself by using the following code snippet:
$('.js-tabitem').each(function() {
var $this = $(this);
$this.trigger('click');
test( "navigation tabs", function() {
ok($this.hasClass('t-tab__navitem--active'),
'The clicked navigation item has the correct
active class applied');
});
});
The test() function is a function available from the QUnit test suite. The first ar-
gument is the title of the text, and the second is the actual test function you want to
execute.
We also use ok() , which is one of the assertions from the QUnit test suite to confirm
the class does apply. An assertion is an essential element of unit testing, where you
test if the result of the execution of your code returns the expected value. QUnit has
different kinds of assertions that are all documented at api.qunitjs.com/cat-
egory/assert/ .
In ok() , the first argument we pass to this function is an expression that evaluates
to true or false. The second argument is the message you want to display when the
assertion is executed.
Now, let us test that the inactive navigation items do not contain the class name that
makes a navigation item appear active, by using the following code snippet:
$('.js-tabitem').not(this).each(function() {
ok(!$(this).hasClass('t-tab__navitem--active'),
Search WWH ::




Custom Search