Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/1y83Vwi. Pamela Selle introduces testing to JavaScript developers, showing how to make sure that the /js folder is not becoming a load of technical debt. Filmed at qconnewyork.com. Pam Selle is an engineer in Philadelphia, PA where she works at Comcast on xfinity.com. Pam speaks at user groups and conferences on JavaScript, HTML5, and CSS. She organizes Philadelphia's premier JavaScript user group, Philadelphia JavaScript Developers, and organizes the yearly Philly Code Retreat that introduces many local developers to test-driven development.

1. Zero to Testing in
JavaScript
Basics of testing in JS

2. Watch the video with slide
synchronization on InfoQ.com!
http://www.infoq.com/presentations
/tdd-javascript-2014
InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• News 15-20 / week
• Articles 3-4 / week
• Presentations (videos) 12-15 / week
• Interviews 2-3 / week
• Books 1 / month

3. Presented at QCon New York
www.qconnewyork.com
Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide

4. About me
• Software developer for Xfinity.com
• Online: thewebivore.com, @pamasaur
• Co-organizer of Philadelphia JavaScript Developers
• Testing fanatic

5. Agenda
• My testing story
• Writing your first JavaScript test
• Testing frameworks
• Working testing into your workflow

6. My testing story

7. My Testing Story
• Code Retreat
• TDD
• Pairing
• Throw-away code
• Testing at work
• Now: test coverage drops
break the build

8. What’s the deal with testing?
• When you break it, it breaks!
• Secondary line of documentation defense
• Design tool

9. What do you call code without tests?
Legacy code.

10. Testing front-end code
• The debt in your /js folder
• Front-end code has logic too!
If you have logic, you need tests

11. BDD/TDD
• Behavior Driven Development
• Test-Driven Development
“Write tests to inform how you write your code”
• BDD: Describe, it, before, after, beforeEach, afterEach
• TDD: Suite, test, setup, teardown

12. Test Ever vs. Test Never

13. Writing your first JavaScript test

14. Writing your first JavaScript test
• Setting up your base
• Writing the test*
• Making it pass*
* The order of these is debatable

15. Jasmine
• jasmine.github.io
• Download a standalone version on GitHub from pivotal/jasmine
• Or use RubyGems for a Ruby environment

16. Mocha
• visionmedia.github.io/mocha
• Node!
• npm install –g mocha

17. Anatomy of a test
Describe [thing you’re testing]
It [does something you expect it to do]
Rinse and repeat.

18. Example test walk-through
with Mocha

19. var assert = require('assert');
describe("An area of my application", function() {
it("should know that 2 and 2 is 4", function(){
assert.equal(4, 2+2);
});
});

20. describe("An area of my application", function() {
it("should know that 2 and 2 is 4", function(){
assert.equal(4, 2+2);
});
});

21. var assert = require('assert');
describe( , function() {
it("should know that 2 and 2 is 4", function(){
assert.equal(4, 2+2);
});
});

22. var assert = require('assert');
describe("An area of my application", {
it("should know that 2 and 2 is 4", {
assert.equal(4, 2+2);
});
});

23. var assert = require('assert');
describe("An area of my application", function() {
it( , function(){
});
});

25. Testing concepts: Unit testing
Test your code

26. Spies, stubs, and mocks
• Spy: an object that records its interactions
• Stubs: fake objects
• Mocks: fake objects with expected behavior
Generally, you can SPY on a function, STUB an
object, and MOCK a service.

27. Live coding?
Write a test with me!

28. Testing Tools

29. Test describers
• Jasmine
• Mocha
• QUnit
• node-tap
• YUI Test

30. Assertions
• Chai
• should.js
• Expect.js
• better-assert

31. Spies, stubs, and mocks
• Sinon.js
• Jest from Facebook

32. Test runners
• Karma
• Teaspoon
• YUI Yeti

33. Bringing testing into the fold
3 tips for making testing a regular part of your world

34. #1: Teach testing
• Attend talks like this!
• Practice (ex. Code Retreat)
• Pair programming

35. #2: Code coverage
• Istanbul
• Blanket.js
• hrcov (Mozilla)
• JSCover

36. #3: Code review
• Quality assurance
• Mentoring
• Don’t accept without tests!

37. What’d we learn?
• Writing a JavaScript test
• Tools in JavaScript for testing
• Ways to create a testing culture

38. Thank you!
• Find me online at
• @pamasaur
• thewebivore.com (blog)
• turing.cool (podcast)
• bleedingedgepress.com (upcoming book on JS frameworks)

39. Watch the video with slide synchronization on
InfoQ.com!
http://www.infoq.com/presentations/tdd-javascript-
2014