Your SlideShare is downloading. ×
What the HTML? - The Holy Grail
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

What the HTML? - The Holy Grail

1,771
views

Published on

Cross-browser JavaScript Unit Testing with Code Coverage

Cross-browser JavaScript Unit Testing with Code Coverage


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,771
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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