Some brief overview of technologies and frameworks that are used for testing front-end and javascript.

1. TESTING JAVASCRIPT APPLICATIONS
by Alexander Gerasimov and Dmitrey Gerasimov

2. ¿POR QUÉ?

3. ¡PORQUE!
refactoring
organization, modularization, extensibility
documentation
defect prevention
collaboration

4. "Any feature without a test doesn’t exist"
Steve Loughran HP Laboratories

5. TDD & BDD

6. TESTS FIRST

7. RED/GREEN/REFACTOR
Red: Write a failing test

8. RED/GREEN/REFACTOR
Green: Make it pass

9. RED/GREEN/REFACTOR
Refactor: Eliminate redundancy

10. STRUCTURE
Setup: Put the Unit Under Test (UUT) or the overall test system in the state needed
to run the test.
Execution: Trigger/drive the UUT to perform the target behavior and capture all
output, such as return values and output parameters.
Validation: Ensure the results of the test are correct.
Cleanup: Restore the UUT or the overall test system to the pre-test state.
http://en.wikipedia.org/wiki/Test-driven_development#Test_structure

11. TDD ASSERTIONS
var assert = chai.assert;
assert.typeOf(foo, 'string');
assert.equal(foo, 'bar');
assert.lengthOf(foo, 3)
assert.property(tea, 'favors');
assert.lengthOf(tea.flavors, 3);

12. BDD
Behavior-driven development

13. GIVEN-WHEN-THEN
Story: Returns go to stock
In order to keep track of stock
As a store owner
I want to add items back to stock when they're returned
Scenario 1: Refunded items should be returned to stock
Given a customer previously bought a black sweater from me
And I currently have three black sweaters left in stock
When he returns the sweater for a refund
Then I should have four black sweaters in stock

14. CUCUMBER
Feature: Addition
In order to avoid silly mistakes
As a math idiot
I want to be told the sum of two number
Scenario: Add two numbers
Given I have entered 50 into the calculator
And I have entered 70 into the calculator
When I press add
Then the result should be 120 on the screen

15. CUCUMBER
Given /I have entered (.*) into the calculator do
calculator = new Calculator();
calculator.push(n);
end

16. EXPECT
var expect = require("chai").expect
, foo = "bar"
, beverages = { tea: [ "chai", "matcha", "oolong" ] };
expect(foo).to.be.a("string");
expect(foo).to.equal("bar");
expect(foo).to.have.length(3);
expect(beverages).to.have.property("tea").with.length(3);

17. SHOULD
var should = require("chai").should()
, foo = "bar"
, beverages = { tea: [ "chai", "matcha", "oolong" ] };
foo.should.be.a("string");
foo.should.equal("bar");
foo.should.have.length(3);
beverages.should.have.property("tea").with.length(3);

18. FUNCTIONAL TESTING

19. UX/BEHAVIOR VERIFICATION
Unit tests just prove that your code doesn't work

20. AUTOMATION & CONTROL
↓

21. METRICS & PROFILING
Execution time
Loading, rendering, painting
CPU & Memory
Google Chrome Metrics

22. HELPS QA TESTERS
Why not let QA guys concentrate on quality rather than
routine?

23. TOOLS & EXAMPLES
generators
frameworks
[assertion] libraries
plugins
stat tools
complex solutions + Grunt

24. TECHNIQUES

25. DUMMIES

26. STUBS

27. MOCKS

28. SPIES

29. FIXTURES

30. JASMINE

31. What is it?..

32. JASMINE
Suites & specs
describe("A suite is just a function", function() {
var a;
it("and so is a spec", function() {
a = true;
expect(a).toBe(true);
});
});

33. JASMINE
Matchers
expect(x).toEqual(y);
expect(x).toBe(y);
expect(x).toMatch(pattern);
expect(x).toBeDefined();
expect(x).toBeUndefined();
expect(x).toBeNull();
expect(x).toBeTruthy();
expect(x).toBeFalsy();
expect(x).toContain(y);
expect(x).toBeLessThan(y);
expect(x).toBeGreaterThan(y);
expect(function(){fn();}).toThrow(e);

34. JASMINE
Spies

35. SPIES
Tracks
Functions calls
Arguments
Number of calls

36. SPIES
Access
All calls of function
Every argument of every call

37. SPIES
Can
Track and delegate
Substitute returning values
Call faked functions
Create mock objects

38. JASMINE
Any
describe("jasmine.any", function() {
it("matches any value", function() {
expect({}).toEqual(jasmine.any(Object));
expect(12).toEqual(jasmine.any(Number));
});
});

39. JASMINE
Clock
beforeEach(function() {
timerCallback = jasmine.createSpy("timerCallback"); //create spy
jasmine.Clock.useMock(); //use wrepper of system timer
});
it("causes a timeout to be called synchronously", function() {
setTimeout(function() {
timerCallback();
}, 100);
expect(timerCallback).not.toHaveBeenCalled();
jasmine.Clock.tick(101); //make time to go
expect(timerCallback).toHaveBeenCalled();
});

40. JASMINE
Async
It exists, but...

41. JASMINE
Reporter

42. describe("Jasmine", function() {
it("makes testing JavaScript awesome!", function() {
expect (yourCode).toBeLotsBetter();
});
});

43. MOCHA
['mɔkə]

44. MOCHA
Supports TDD assertions and BDD should/expect
Reporting & CI integration
JavaScript API
Browser Test Runner

45. MOCHA
describe('Array', function(){
describe('#indexOf()', function(){
it('should return -1 when the value is not present', function(){
[1,2,3].indexOf(5).should.equal(-1);
[1,2,3].indexOf(0).should.equal(-1);
})
})
})

46. MOCHA
describe('User', function(){
describe('#save()', function(){
it('should save without error', function(done){
var user = new User('Luna');
user.save(function(err){
if (err) throw err;
done();
});
})
})
})

47. MOCHA
Hooks: before(), after(), beforeEach(), afterEach()
beforeEach(function(done){
db.clear(function(err){
if (err) return done(err);
db.save([tobi, loki, jane], done);
});
})

48. MOCHA

49. MOCHA
Console reporter

50. MOCHA
HTML reporter

51. MOCHA
Nyan reporter

52. CHAI

53. CHAI
Assert, expect/should
chai.should();
foo.should.be.a('string');
foo.should.equal('bar');
foo.should.have.length(3);
tea.should.have.property('flavors')
.with.length(3);

54. QUESTION TIME!
How would you test an RNG?

55. CHAI
Plugins
here

56. CASPERJS
PhantomJS
API
SlimerJS
SpookyJS

57. CASPERJS
var casper = require('casper').create();
casper.start('http://domain.tld/page.html', function() {
if (this.exists('h1.page-title')) {
this.echo('the heading exists');
}
});
casper.run();

58. QUESTION TIME!
What happens if not everyone on the team adopts TDD/BDD?

59. CODE COVERAGE

60. INSTRUMENTATION

61. INSTRUMENTATION

63. ISTANBUL
Statement, branch, and function coverage
Test running tools
HTML & LCOV reporting
esprima-based

64. TESTING + CI = ❤
fail builds
statistics & reporting
Github is integration paradise

65. GITHUB IS INTEGRATION PARADISE

66. IRL, 100% COVERAGE IS A LIE
legacy & untestable code
permissive tests
not applicable to functional testing

67. MUTATION TESTING
Who tests tests?
Coverage is paramount! (it isn't)
Mutations: remove lines, alter operators, rename identifiers
The Future of Unit Testing

68. QUESTION TIME!
What do you do when you're offerred a project without TDD?

69. YOU RUN LIKE HELL

70. THE END