Testing JavaScript Applications

  • 1,103 views
Uploaded on

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

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

More in: Software , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,103
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
16
Comments
0
Likes
1

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. 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
  • 62. ISTANBUL Statement, branch, and function coverage Test running tools HTML & LCOV reporting esprima-based
  • 63. TESTING + CI = ❤ fail builds statistics & reporting Github is integration paradise
  • 64. GITHUB IS INTEGRATION PARADISE
  • 65. IRL, 100% COVERAGE IS A LIE legacy & untestable code permissive tests not applicable to functional testing
  • 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. QUESTION TIME! What do you do when you're offerred a project without TDD?
  • 68. YOU RUN LIKE HELL
  • 69. THE END