What the HTML? - The Holy Grail

2,164 views

Published on

Cross-browser JavaScript Unit Testing with Code Coverage

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,164
On SlideShare
0
From Embeds
0
Number of Embeds
1,743
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

What the HTML? - The Holy Grail

  1. 1. 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.
  2. 2. Unit Testing requires you change the way you write your code. (But this is good);
  3. 3. JavaScript is interpreted at runtime. Across a variety of different browsers. Mutable , Loosely-typed ,, Global scope. SUDDEN DEATH Mode
  4. 4. 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
  5. 5. http://karma-runner.github.io/.
  6. 6. http://pivotal.github.io/jasmine/.
  7. 7. 1. Karma runs a server 2. Real-world browsers connect 3. Karma serves your tests 4. Browsers execute tests 5. Karma collates the output
  8. 8. > karma init karma.config.js > karma start
  9. 9. ● Tests written in JavaScript ● BDD syntax ● Anything you can do with JavaScript, you can test with JavaScript
  10. 10. describe("A suite", function() { it("contains spec with an expectation", function() { expect(true).toBe(true); expect(true).not.toBe(false); }); });
  11. 11. ● 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
  12. 12. 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); }); });
  13. 13. Console Output;
  14. 14. CI Integration;
  15. 15. LCOV Output;

×