258 / 478
jQuery magic starts here!
$
is the jQuery Swiss Army knife. It’s used to find bits
of the DOM. Its first argument is a CSS selector; here, we’re telling it to find all
elements that have the class “error”. It returns an object that represents one or
more DOM elements. That, in turn, has various useful methods that allow us to
manipulate or find out about those elements.
One of which is
.is
, which can tell us whether an element matches a particular
CSS property. Here we use
:visible
to check whether the element is displayed
or hidden.
We then use jQuery’s
.hide()
method to hide the div. Behind the scenes, it
dynamically sets a
style="display: none"
on the element.
And finally we check that it’s worked, with a second
equal
assertion.
If you refresh the browser, you should see that all passes:
Expected results from QUnit in the browser.
2 assertions of 2 passed, 0 failed.
1. smoke test (0, 2, 2)
Time to see how fixtures work. Let’s just dupe up this test:
lists/static/tests/tests.html.
<script>
/*global $, test, equal */
test
(
"smoke test"
,
function
() {
equal
(
$
(
'.has-error'
).
is
(
':visible'
),
true
);
$
(
'.has-error'
).
hide
();
equal
(
$
(
'.has-error'
).
is
(
':visible'
),
false
);
});
test
(
"smoke test 2"
,
function
() {
equal
(
$
(
'.has-error'
).
is
(
':visible'
),
true
);
$
(
'.has-error'
).
hide
();
equal
(
$
(
'.has-error'
).
is
(
':visible'
),
false
);
});
</script>
Slightly unexpectedly, we find one of them fails—see
Figure 13-2 .230
|
Chapter 13: Dipping Our Toes, Very Tentatively, into JavaScript