0
TESTING JAVASCRIPT APPLICATIONS
by Alexander Gerasimov and Dmitrey Gerasimov
¿POR QUÉ?
¡PORQUE!
refactoring
organization, modularization, extensibility
documentation
defect prevention
collaboration
"Any feature without a test doesn’t exist"
Steve Loughran HP Laboratories
TDD & BDD
TESTS FIRST
RED/GREEN/REFACTOR
Red: Write a failing test
RED/GREEN/REFACTOR
Green: Make it pass
RED/GREEN/REFACTOR
Refactor: Eliminate redundancy
STRUCTURE
Setup: Put the Unit Under Test (UUT) or the overall test system in the state needed
to run the test.
Execution: ...
TDD ASSERTIONS
var assert = chai.assert;
assert.typeOf(foo, 'string');
assert.equal(foo, 'bar');
assert.lengthOf(foo, 3)
a...
BDD
Behavior-driven development
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 st...
CUCUMBER
Feature: Addition
In order to avoid silly mistakes
As a math idiot
I want to be told the sum of two number
Scenar...
CUCUMBER
Given /I have entered (.*) into the calculator do
calculator = new Calculator();
calculator.push(n);
end
EXPECT
var expect = require("chai").expect
, foo = "bar"
, beverages = { tea: [ "chai", "matcha", "oolong" ] };
expect(foo...
SHOULD
var should = require("chai").should()
, foo = "bar"
, beverages = { tea: [ "chai", "matcha", "oolong" ] };
foo.shou...
FUNCTIONAL TESTING
UX/BEHAVIOR VERIFICATION
Unit tests just prove that your code doesn't work
AUTOMATION & CONTROL
↓
METRICS & PROFILING
Execution time
Loading, rendering, painting
CPU & Memory
Google Chrome Metrics
HELPS QA TESTERS
Why not let QA guys concentrate on quality rather than
routine?
TOOLS & EXAMPLES
generators
frameworks
[assertion] libraries
plugins
stat tools
complex solutions + Grunt
TECHNIQUES
DUMMIES
STUBS
MOCKS
SPIES
FIXTURES
JASMINE
What is it?..
JASMINE
Suites & specs
describe("A suite is just a function", function() {
var a;
it("and so is a spec", function() {
a = ...
JASMINE
Matchers
expect(x).toEqual(y);
expect(x).toBe(y);
expect(x).toMatch(pattern);
expect(x).toBeDefined();
expect(x).t...
JASMINE
Spies
SPIES
Tracks
Functions calls
Arguments
Number of calls
SPIES
Access
All calls of function
Every argument of every call
SPIES
Can
Track and delegate
Substitute returning values
Call faked functions
Create mock objects
JASMINE
Any
describe("jasmine.any", function() {
it("matches any value", function() {
expect({}).toEqual(jasmine.any(Objec...
JASMINE
Clock
beforeEach(function() {
timerCallback = jasmine.createSpy("timerCallback"); //create spy
jasmine.Clock.useMo...
JASMINE
Async
It exists, but...
JASMINE
Reporter
describe("Jasmine", function() {
it("makes testing JavaScript awesome!", function() {
expect (yourCode).toBeLotsBetter();
...
MOCHA
['mɔkə]
MOCHA
Supports TDD assertions and BDD should/expect
Reporting & CI integration
JavaScript API
Browser Test Runner
MOCHA
describe('Array', function(){
describe('#indexOf()', function(){
it('should return -1 when the value is not present'...
MOCHA
describe('User', function(){
describe('#save()', function(){
it('should save without error', function(done){
var use...
MOCHA
Hooks: before(), after(), beforeEach(), afterEach()
beforeEach(function(done){
db.clear(function(err){
if (err) retu...
MOCHA
MOCHA
Console reporter
MOCHA
HTML reporter
MOCHA
Nyan reporter
CHAI
CHAI
Assert, expect/should
chai.should();
foo.should.be.a('string');
foo.should.equal('bar');
foo.should.have.length(3);
t...
QUESTION TIME!
How would you test an RNG?
CHAI
Plugins
here
CASPERJS
PhantomJS
API
SlimerJS
SpookyJS
CASPERJS
var casper = require('casper').create();
casper.start('http://domain.tld/page.html', function() {
if (this.exists...
QUESTION TIME!
What happens if not everyone on the team adopts TDD/BDD?
CODE COVERAGE
INSTRUMENTATION
INSTRUMENTATION
ISTANBUL
Statement, branch, and function coverage
Test running tools
HTML & LCOV reporting
esprima-based
TESTING + CI = ❤
fail builds
statistics & reporting
Github is integration paradise
GITHUB IS INTEGRATION PARADISE
IRL, 100% COVERAGE IS A LIE
legacy & untestable code
permissive tests
not applicable to functional testing
MUTATION TESTING
Who tests tests?
Coverage is paramount! (it isn't)
Mutations: remove lines, alter operators, rename ident...
QUESTION TIME!
What do you do when you're offerred a project without TDD?
YOU RUN LIKE HELL
THE END
Testing JavaScript Applications
Upcoming SlideShare
Loading in...5
×

Testing JavaScript Applications

1,347

Published on

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

Published in: Software, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,347
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Testing JavaScript Applications"

  1. 1. TESTING JAVASCRIPT APPLICATIONS by Alexander Gerasimov and Dmitrey Gerasimov
  2. 2. ¿POR QUÉ?
  3. 3. ¡PORQUE! refactoring organization, modularization, extensibility documentation defect prevention collaboration
  4. 4. "Any feature without a test doesn’t exist" Steve Loughran HP Laboratories
  5. 5. TDD & BDD
  6. 6. TESTS FIRST
  7. 7. RED/GREEN/REFACTOR Red: Write a failing test
  8. 8. RED/GREEN/REFACTOR Green: Make it pass
  9. 9. RED/GREEN/REFACTOR Refactor: Eliminate redundancy
  10. 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. 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. 12. BDD Behavior-driven development
  13. 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. 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. 15. CUCUMBER Given /I have entered (.*) into the calculator do calculator = new Calculator(); calculator.push(n); end
  16. 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. 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. 18. FUNCTIONAL TESTING
  19. 19. UX/BEHAVIOR VERIFICATION Unit tests just prove that your code doesn't work
  20. 20. AUTOMATION & CONTROL ↓
  21. 21. METRICS & PROFILING Execution time Loading, rendering, painting CPU & Memory Google Chrome Metrics
  22. 22. HELPS QA TESTERS Why not let QA guys concentrate on quality rather than routine?
  23. 23. TOOLS & EXAMPLES generators frameworks [assertion] libraries plugins stat tools complex solutions + Grunt
  24. 24. TECHNIQUES
  25. 25. DUMMIES
  26. 26. STUBS
  27. 27. MOCKS
  28. 28. SPIES
  29. 29. FIXTURES
  30. 30. JASMINE
  31. 31. What is it?..
  32. 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. 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. 34. JASMINE Spies
  35. 35. SPIES Tracks Functions calls Arguments Number of calls
  36. 36. SPIES Access All calls of function Every argument of every call
  37. 37. SPIES Can Track and delegate Substitute returning values Call faked functions Create mock objects
  38. 38. JASMINE Any describe("jasmine.any", function() { it("matches any value", function() { expect({}).toEqual(jasmine.any(Object)); expect(12).toEqual(jasmine.any(Number)); }); });
  39. 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. 40. JASMINE Async It exists, but...
  41. 41. JASMINE Reporter
  42. 42. describe("Jasmine", function() { it("makes testing JavaScript awesome!", function() { expect (yourCode).toBeLotsBetter(); }); });
  43. 43. MOCHA ['mɔkə]
  44. 44. MOCHA Supports TDD assertions and BDD should/expect Reporting & CI integration JavaScript API Browser Test Runner
  45. 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. 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. 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. 48. MOCHA
  49. 49. MOCHA Console reporter
  50. 50. MOCHA HTML reporter
  51. 51. MOCHA Nyan reporter
  52. 52. CHAI
  53. 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. 54. QUESTION TIME! How would you test an RNG?
  55. 55. CHAI Plugins here
  56. 56. CASPERJS PhantomJS API SlimerJS SpookyJS
  57. 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. 58. QUESTION TIME! What happens if not everyone on the team adopts TDD/BDD?
  59. 59. CODE COVERAGE
  60. 60. INSTRUMENTATION
  61. 61. INSTRUMENTATION
  62. 62. ISTANBUL Statement, branch, and function coverage Test running tools HTML & LCOV reporting esprima-based
  63. 63. TESTING + CI = ❤ fail builds statistics & reporting Github is integration paradise
  64. 64. GITHUB IS INTEGRATION PARADISE
  65. 65. IRL, 100% COVERAGE IS A LIE legacy & untestable code permissive tests not applicable to functional testing
  66. 66. MUTATION TESTING Who tests tests? Coverage is paramount! (it isn't) Mutations: remove lines, alter operators, rename identifiers The Future of Unit Testing
  67. 67. QUESTION TIME! What do you do when you're offerred a project without TDD?
  68. 68. YOU RUN LIKE HELL
  69. 69. THE END
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×