Cross-browser JavaScript Unit Testing with Code Coverage

5. Documents & Defines the expected
input and output of your code
Makes it Easier to Refactor.
Helps you write Better, re-usable code.
Enables Automated testing.

6. Unit Testing requires you change
the way you write your code.
(But this is good);

7. JavaScript is interpreted at runtime.
Across a variety of different browsers.
Mutable , Loosely-typed ,, Global scope.
SUDDEN DEATH Mode

8. Tests should::
● Run in a real browser environment
● Run in any & all browsers
● Integrate with our CI setup
● Output code coverage metrics
● Easy to write
● Be reliable, execute fast

10. http://karma-runner.github.io/.

11. http://pivotal.github.io/jasmine/.

12. 1. Karma runs a server
2. Real-world browsers connect
3. Karma serves your tests
4. Browsers execute tests
5. Karma collates the output

13. > karma init karma.config.js
> karma start

14. ● Tests written in JavaScript
● BDD syntax
● Anything you can do with JavaScript,
you can test with JavaScript

15. describe("A suite", function() {
it("contains spec with an expectation", function() {
expect(true).toBe(true);
expect(true).not.toBe(false);
});
});

16. ● describe(name, function)
● it(name, function)
● beforeEach(function) / afterEach(function)
● expect(condition).toBe(value);
● expect(condition).not.toBe(value);
● .toEqual() / .toBeTruthy() / .toBeFalsy()
● waitsFor(function) / runs(function)
Writing tests in Jasmine

17. it('checks that the Quicknav control navigates to a page', function() {
loadFixtures('simple-fixture.html');
var activeTextInstance = new ActiveText(...);
waitsFor(function() { return activeTextInstance.ready; }, 500);
runs(function() {
var element = $('.quicknav input');
element.focus();
element.val("5");
var e = jQuery.Event("keydown");
e.which = ActiveText.Keymap.ENTER;
$(element).trigger(e);
e = jQuery.Event("keyup");
e.which = ActiveText.Keymap.ENTER;
$(element).trigger(e);
expect(element.val()).toBe("Pages 4–5 of 26");
expect(activeTextInstance.model.getCurrentIndex()).toBe(3);
expect(activeTextInstance.model.getCurrentPageNumber()).toBe(4);
});
});

18. Console Output;

19. CI Integration;

20. LCOV Output;