Testing JavaScript Applications

1,826 views
1,615 views

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,826
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×