The (quest for the) Holy Grail

Cross-browser JavaScript Unit Testing with Code Coverage Metrics

Transcript

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;