Test your JavaScript
   Mike Williams, Rob Mitchell
   at Web Directions South ’09
For the love of God,


Test your JavaScript
                                       (automatically)
              ... or su...
Browser
Browser   Web/Application server
Browser   Web/Application server
           Framework
                            Lib


                            Lib
Browser   Web/Application server
           Framework
                            Lib
              Your
              cod...
Browser   Web/Application server
           Framework
                            Lib
                                   E...
Browser           Web/Application server
                   Framework
                                    Lib
            ...
Browser           Web/Application server
                    Framework
                                     Lib
          ...
Browser                 Web/Application server
                          Framework
           Lib                         ...
Browser              Web/Application server
                         Framework
             Lib                          L...
Why test?
Why test?
Variety
Variety
The problem with success



                                      ↑
                                   risk of
           ...
The problem with success



                                      ↑
                                   risk of
           ...
The problem with success



                                      ↑
                                   risk of
           ...
Where to start?
what will cause the most
  damage, if it breaks?
what’s most likely to be
        broken?
Manual regression testing
Manual regression testing
Manual regression testing



    $
Manual regression testing



    $           ⌛
Cost of testing
Cost of testing




quarter    month   fortnight   week      few days   day
                   Release frequency →
Cost of testing
                                manual tests



    ↑
 Testing
Cost, Delay




        quarter    month   ...
Fear
Fear

Disincentive to
Fear

Disincentive to

 ‣ add features
Fear

Disincentive to

 ‣ add features
 ‣ refactor
Fear

Disincentive to

 ‣ add features
 ‣ refactor
 ‣ release!
Automation
Cost of testing
Cost of testing

    ↑
 Testing
Cost, Delay




        quarter    month   fortnight   week      few days   day
          ...
Cost of testing
                              manual tests
                              automated tests

    ↑
 Testing
C...
Confidence
Test strategy
Browser         Web/Application server
                  Framework
           Lib                     Lib
Your            ...
Browser                Web/Application server
                         Framework
           Lib                           ...
Browser                      Web/Application server
                              Framework
          Lib                 ...
Component tests
                      (assorted)


 Browser                 Web/Application server
                       ...
End-to-end tests
End-to-end tests
End-to-end tests
Big
End-to-end tests
  Big
Powerful
End-to-end tests
   Big
 Powerful
Convincing
End-to-end tests
   Big
 Powerful
Convincing
    ...
End-to-end tests
   Big
 Powerful
Convincing
    ...
  Slow
End-to-end tests
   Big
 Powerful
Convincing
    ...
  Slow
 In-exact
End-to-end tests
      Big
    Powerful
   Convincing
       ...
     Slow
    In-exact
High-maintenance
Unit tests
Unit tests
Unit tests
Small
Unit tests
Small
Quick
Unit tests
 Small
Quick
Focused
Unit tests
 Small
 Quick
Focused
Resilient
Unit tests
 Small
 Quick
Focused
Resilient
   ...
Unit tests
 Small
 Quick
Focused
Resilient
   ...
Limited
Speed
            Annoyingly slow




Very fast




Unit test    End-to-End test
Speed
                        Annoyingly slow




    ↑
Execution
  Time      Very fast




            Unit test    End-t...
Balance
many fast tests             a few slow tests
Favour FAST tests over SLOW tests
The Healthy Test Pyramid
                    manual    few



          end-to-end         some
            (automated)   ...
Tools
Browser         Web/Application server
Emulator
                  Framework
       Lib                        Lib
Your    ...
Browser         Web/Application server
                  Framework
           Lib                     Lib
Your            ...
Browser


           Lib
Your
 JS
code
           Lib

 Unit-test
framework

Test scripts
Browser
 Emulator

            Lib
Your
 JS
code
            Lib

 Unit-test
framework

Test scripts
pls can we haz demo!
Testability
Testability

• Coherent modules
Testability

• Coherent modules
• Coherent tests
Testability

• Coherent modules
• Coherent tests
• Unobtrusive JavaScript
Testability

• Coherent modules
• Coherent tests
• Unobtrusive JavaScript
• Write the tests first!
Write the tests first!


Testability      Good Design
Build integration

• Very tool-specific

• Trickiness:
   • Stopping and starting servers
   • Stopping and starting browse...
TestSwarm


   TestSwarm
     server




  Test scripts
What now?
JavaScript test frameworks     Browser Drivers
 -   Screw.Unit                 -  Selenium-RC
 -   QUnit        ...
Upcoming SlideShare
Loading in...5
×

Test Your JavaScript

3,234

Published on

an introduction to automated testing of JavaScript-heavy web-apps and web-sites, presented with Rob Mitchell at Web Directions South 2009

Published in: Technology
2 Comments
10 Likes
Statistics
Notes
  • very good slide, thank u!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sample code is available at http://github.com/robmitch/wds-js-testing
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,234
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
98
Comments
2
Likes
10
Embeds 0
No embeds

No notes for slide
  • We’re talking about web-APPS, not just web-sites.
  • We’re talking about web-APPS, not just web-sites.
  • We’re talking about web-APPS, not just web-sites.
  • We’re talking about web-APPS, not just web-sites.
  • We’re talking about web-APPS, not just web-sites.
  • We’re talking about web-APPS, not just web-sites.
  • We’re talking about web-APPS, not just web-sites.
  • We’re talking about web-APPS, not just web-sites.
  • We’re talking about web-APPS, not just web-sites.
  • We’re talking about web-APPS, not just web-sites.
  • We’re talking about web-APPS, not just web-sites.
  • We’re talking about web-APPS, not just web-sites.
  • We’re talking about web-APPS, not just web-sites.
  • We’re talking about web-APPS, not just web-sites.
  • We’re talking about web-APPS, not just web-sites.
  • We’re talking about web-APPS, not just web-sites.
  • So, at what levels can we test?
  • stuff breaks
    Broken stuff makes you look bad
    So ... you fix it!
  • but then you add more features
  • the more stuff you have, the more likely it is to be broken WITHOUT YOU KNOWING
  • the more stuff you have, the more likely it is to be broken WITHOUT YOU KNOWING
  • where should you focus your testing efforts?
  • sure, focus on business value, BUT
  • think about what might be broken ...
    the new stuff, ‘cos you changed it
    the old stuff, ‘cos you’re not looking at it
    ie. EVERYTHING
  • so, you get MORE testers
  • but manual regression testing costs money, and takes lot of time
  • but manual regression testing costs money, and takes lot of time
  • manual testing
  • manual testing
  • manual testing
  • manual testing
  • manual testing
  • manual testing
  • manual testing
  • manual testing
  • manual testing
  • automated testing provides the confidence needed to keep moving forward
  • So, at what levels can we test?
  • test the whole thing, end-to-end
  • At the other extreme: test small components
  • Big because they require a lot of work to create
    Powerful because they exercise many components of the system at once
    Convincing because they prove that the components hang together
    Slow because they exercise all the infrastructure
    In-exact because it can be hard to find the cause of a failure
    High-maintenance because many things may require the test to be modified
  • Big because they require a lot of work to create
    Powerful because they exercise many components of the system at once
    Convincing because they prove that the components hang together
    Slow because they exercise all the infrastructure
    In-exact because it can be hard to find the cause of a failure
    High-maintenance because many things may require the test to be modified
  • Big because they require a lot of work to create
    Powerful because they exercise many components of the system at once
    Convincing because they prove that the components hang together
    Slow because they exercise all the infrastructure
    In-exact because it can be hard to find the cause of a failure
    High-maintenance because many things may require the test to be modified
  • Big because they require a lot of work to create
    Powerful because they exercise many components of the system at once
    Convincing because they prove that the components hang together
    Slow because they exercise all the infrastructure
    In-exact because it can be hard to find the cause of a failure
    High-maintenance because many things may require the test to be modified
  • Big because they require a lot of work to create
    Powerful because they exercise many components of the system at once
    Convincing because they prove that the components hang together
    Slow because they exercise all the infrastructure
    In-exact because it can be hard to find the cause of a failure
    High-maintenance because many things may require the test to be modified
  • Big because they require a lot of work to create
    Powerful because they exercise many components of the system at once
    Convincing because they prove that the components hang together
    Slow because they exercise all the infrastructure
    In-exact because it can be hard to find the cause of a failure
    High-maintenance because many things may require the test to be modified
  • Big because they require a lot of work to create
    Powerful because they exercise many components of the system at once
    Convincing because they prove that the components hang together
    Slow because they exercise all the infrastructure
    In-exact because it can be hard to find the cause of a failure
    High-maintenance because many things may require the test to be modified
  • Big because they require a lot of work to create
    Powerful because they exercise many components of the system at once
    Convincing because they prove that the components hang together
    Slow because they exercise all the infrastructure
    In-exact because it can be hard to find the cause of a failure
    High-maintenance because many things may require the test to be modified
  • Plentiful because they’re cheap
    Quick because they’re low-overhead
    Focused because they point the finger directly at the cause of failure
    Resilient because they’re isolated from unrelated parts of the system
    Limited because, individually, they don’t test very much
  • Plentiful because they’re cheap
    Quick because they’re low-overhead
    Focused because they point the finger directly at the cause of failure
    Resilient because they’re isolated from unrelated parts of the system
    Limited because, individually, they don’t test very much
  • Plentiful because they’re cheap
    Quick because they’re low-overhead
    Focused because they point the finger directly at the cause of failure
    Resilient because they’re isolated from unrelated parts of the system
    Limited because, individually, they don’t test very much
  • Plentiful because they’re cheap
    Quick because they’re low-overhead
    Focused because they point the finger directly at the cause of failure
    Resilient because they’re isolated from unrelated parts of the system
    Limited because, individually, they don’t test very much
  • Plentiful because they’re cheap
    Quick because they’re low-overhead
    Focused because they point the finger directly at the cause of failure
    Resilient because they’re isolated from unrelated parts of the system
    Limited because, individually, they don’t test very much
  • Plentiful because they’re cheap
    Quick because they’re low-overhead
    Focused because they point the finger directly at the cause of failure
    Resilient because they’re isolated from unrelated parts of the system
    Limited because, individually, they don’t test very much
  • Plentiful because they’re cheap
    Quick because they’re low-overhead
    Focused because they point the finger directly at the cause of failure
    Resilient because they’re isolated from unrelated parts of the system
    Limited because, individually, they don’t test very much
  • JavaScript unit tests run really FAST!
  • Talk about why
  • Cross-browser, cross-version testing
    Mainly for libraries - you probably don’t need it
  • Test Your JavaScript

    1. 1. Test your JavaScript Mike Williams, Rob Mitchell at Web Directions South ’09
    2. 2. For the love of God, Test your JavaScript (automatically) ... or suffer the consequences.
    3. 3. Browser
    4. 4. Browser Web/Application server
    5. 5. Browser Web/Application server Framework Lib Lib
    6. 6. Browser Web/Application server Framework Lib Your code Lib
    7. 7. Browser Web/Application server Framework Lib External Your systems code Lib
    8. 8. Browser Web/Application server Framework Lib External Your systems code Lib circa 2000
    9. 9. Browser Web/Application server Framework Lib External JS Your systems code Lib circa 2000 2004
    10. 10. Browser Web/Application server Framework Lib Lib Your External JS Your systems code Lib code Lib circa 2000 2008 2004
    11. 11. Browser Web/Application server Framework Lib Lib Your External Your systems code Lib code Lib Mature test automation Not so much tools and practices
    12. 12. Why test?
    13. 13. Why test?
    14. 14. Variety
    15. 15. Variety
    16. 16. The problem with success ↑ risk of (undetected) #fail time, features, users →
    17. 17. The problem with success ↑ risk of (undetected) #fail time, features, users →
    18. 18. The problem with success ↑ risk of (undetected) #fail time, features, users →
    19. 19. Where to start?
    20. 20. what will cause the most damage, if it breaks?
    21. 21. what’s most likely to be broken?
    22. 22. Manual regression testing
    23. 23. Manual regression testing
    24. 24. Manual regression testing $
    25. 25. Manual regression testing $ ⌛
    26. 26. Cost of testing
    27. 27. Cost of testing quarter month fortnight week few days day Release frequency →
    28. 28. Cost of testing manual tests ↑ Testing Cost, Delay quarter month fortnight week few days day Release frequency →
    29. 29. Fear
    30. 30. Fear Disincentive to
    31. 31. Fear Disincentive to ‣ add features
    32. 32. Fear Disincentive to ‣ add features ‣ refactor
    33. 33. Fear Disincentive to ‣ add features ‣ refactor ‣ release!
    34. 34. Automation
    35. 35. Cost of testing
    36. 36. Cost of testing ↑ Testing Cost, Delay quarter month fortnight week few days day Release frequency →
    37. 37. Cost of testing manual tests automated tests ↑ Testing Cost, Delay quarter month fortnight week few days day Release frequency →
    38. 38. Confidence
    39. 39. Test strategy
    40. 40. Browser Web/Application server Framework Lib Lib Your External Your systems code Lib code Lib
    41. 41. Browser Web/Application server Framework Lib Lib Your External JS Your systems code Lib code Lib “End-to-end” test
    42. 42. Browser Web/Application server Framework Lib Lib External systems Lib Lib Unit tests
    43. 43. Component tests (assorted) Browser Web/Application server Framework Lib Lib Your External JS Your systems code Lib code Lib
    44. 44. End-to-end tests
    45. 45. End-to-end tests
    46. 46. End-to-end tests Big
    47. 47. End-to-end tests Big Powerful
    48. 48. End-to-end tests Big Powerful Convincing
    49. 49. End-to-end tests Big Powerful Convincing ...
    50. 50. End-to-end tests Big Powerful Convincing ... Slow
    51. 51. End-to-end tests Big Powerful Convincing ... Slow In-exact
    52. 52. End-to-end tests Big Powerful Convincing ... Slow In-exact High-maintenance
    53. 53. Unit tests
    54. 54. Unit tests
    55. 55. Unit tests Small
    56. 56. Unit tests Small Quick
    57. 57. Unit tests Small Quick Focused
    58. 58. Unit tests Small Quick Focused Resilient
    59. 59. Unit tests Small Quick Focused Resilient ...
    60. 60. Unit tests Small Quick Focused Resilient ... Limited
    61. 61. Speed Annoyingly slow Very fast Unit test End-to-End test
    62. 62. Speed Annoyingly slow ↑ Execution Time Very fast Unit test End-to-End test
    63. 63. Balance many fast tests a few slow tests
    64. 64. Favour FAST tests over SLOW tests
    65. 65. The Healthy Test Pyramid manual few end-to-end some (automated) slow the stuff in between (automated) fast! “unit” (automated) most
    66. 66. Tools
    67. 67. Browser Web/Application server Emulator Framework Lib Lib Your External Your systems code Lib code Lib Test scripts
    68. 68. Browser Web/Application server Framework Lib Lib Your External JS Your systems code Lib code Lib Browser Driver Test scripts
    69. 69. Browser Lib Your JS code Lib Unit-test framework Test scripts
    70. 70. Browser Emulator Lib Your JS code Lib Unit-test framework Test scripts
    71. 71. pls can we haz demo!
    72. 72. Testability
    73. 73. Testability • Coherent modules
    74. 74. Testability • Coherent modules • Coherent tests
    75. 75. Testability • Coherent modules • Coherent tests • Unobtrusive JavaScript
    76. 76. Testability • Coherent modules • Coherent tests • Unobtrusive JavaScript • Write the tests first!
    77. 77. Write the tests first! Testability Good Design
    78. 78. Build integration • Very tool-specific • Trickiness: • Stopping and starting servers • Stopping and starting browsers
    79. 79. TestSwarm TestSwarm server Test scripts
    80. 80. What now? JavaScript test frameworks Browser Drivers - Screw.Unit - Selenium-RC - QUnit - Watir - JSSpec - WebDriver - YUI Test - unittest.js Browser Emulators - JsUnit - HtmlUnit - and lots more ... http://delicious.com/mdub/javascript+testing
    1. A particular slide catching your eye?

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

    ×