Your SlideShare is downloading. ×
0
Web Applications
TESTING
https://www.greendot.com
Sponsored
by
Does my code work?
Is my app too slow?
Do users enjoy my product?
Are my users safe from attack?
Does my code work?
time
cost
cost of finding and fixing bugs increases over time
TESTING IS GOOD,
MMMKAY?
js test driver
unit testing
integration tests
end to end testing
functional tests
mocha
phantomjs
casperjs
TDD
testacular
...
js test driver
unit testing
integration tests
end to end testing
functional tests
mocha
phantomjs
casperjs
TDD
testacular
...
PHILOSOPHIES
TDD, CI
CONSTRUCTS
test harness, mocks, fixtures,
stubs, spies, headless browser,
web driver
LIBRARIES
mocha, ...
PHILOSOPHIES
Test Driven Development (TDD)
write tests write code
run tests
DEVELOPER
Test Driven Development (TDD)
write tests write code
run tests
DEVELOPER
Test Driven Development (TDD)
write tests write code
run tests
DEVELOPER
Test Driven Development (TDD)
write tests write code
run tests
DEVELOPER
Test Driven Development (TDD)
write tests write code
run tests
DEVELOPER
Continuous Integration (CI)
commits code determines tests to run
executes tests
report test results
DEVELOPER CI SYSTEM
Continuous Integration (CI)
commits code determines tests to run
executes tests
report test results
DEVELOPER CI SYSTEM
Continuous Integration (CI)
commits code determines tests to run
executes tests
report test results
DEVELOPER CI SYSTEM
Continuous Integration (CI)
commits code determines tests to run
executes tests
report test results
DEVELOPER CI SYSTEM
Continuous Integration (CI)
commits code determines tests to run
executes tests
report test results
DEVELOPER CI SYSTEM
METHODOLOGIES
Unit Testing
start coding feature complete ship it!
Unit Testing
start coding feature complete ship it!
function validateInput(input) {
var result;

validations.some(function...
Unit Testing
start coding feature complete ship it!
function validateInput(input) {
var result;

validations.some(function...
Unit Testing
start coding feature complete ship it!
TestingEnd to End TestingFunctionalIntegrationScenario
TestingEnd to End
start coding feature complete ship it!
TestingEnd to End
start coding feature complete ship it!
define user scenarios
automate scenarios
test the tests
run in mul...
TestingEnd to End
start coding feature complete ship it!
define user scenarios
automate scenarios
test the tests
run in mul...
TestingEnd to End
start coding feature complete ship it!
define user scenarios
automate scenarios
test the tests
run in mul...
TestingEnd to End
start coding feature complete ship it!
define user scenarios
automate scenarios
test the tests
run in mul...
TestingEnd to End
start coding feature complete ship it!
define user scenarios
automate scenarios
test the tests
run in mul...
TestingEnd to End
start coding feature complete ship it!
define user scenarios
automate scenarios
test the tests
run in mul...
CONSTRUCTS
TEST HARNESS!
A special web page which includes only the
scripts and other resources necessary to run a
specific unit test....
LIBRARIES
MOCHA / JASMINE / QUNIT!
Provide APIs for writing and organizing unit
tests.
!
CHAI / EXPECT!
Provide APIs for writing tes...
TOOLS
PHANTOMJS / SLIMERJS!
PhantomJS is a headless Webkit based
browser. SlimerJS is a “mostly” headless
browser based on Firef...
SELENIUM!
Collection of tools / APIs which enable
programmatic control of a web browser.
!
NIGHTWATCH!
Provides abstractio...
YOU’RE GONNA HAVE A BAD TIME
IF YOU DON’T HAVE A DEMO…
Demo
https://github.com/sethmcl/testing_web_applications
Seth McLaughlin
www.sethmcl.com
References
Introduction to writing testable JavaScript!
http://www.smashingmagazine.com/2012/06/27/introduction-to-javascr...
Upcoming SlideShare
Loading in...5
×

Front-End Testing: Demystified

3,670

Published on

Confused by testing terms and jargon? This talk walks through testing web applications, explaining the difference between unit testing and end to end testing. Several tools and concepts are also explored through a demo section.

Sample projects can be found at https://github.com/sethmcl/testing_web_applications.

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

No Downloads
Views
Total Views
3,670
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
92
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

Transcript of "Front-End Testing: Demystified"

  1. 1. Web Applications TESTING
  2. 2. https://www.greendot.com Sponsored by
  3. 3. Does my code work? Is my app too slow? Do users enjoy my product? Are my users safe from attack? Does my code work?
  4. 4. time cost cost of finding and fixing bugs increases over time
  5. 5. TESTING IS GOOD, MMMKAY?
  6. 6. js test driver unit testing integration tests end to end testing functional tests mocha phantomjs casperjs TDD testacular karma venus sinon stubs mocks spies fixtures test harness CI expect jasmine intern selenium headless browser hudson travis web driver
  7. 7. js test driver unit testing integration tests end to end testing functional tests mocha phantomjs casperjs TDD testacular karma venus sinon stubs mocks spies fixtures test harness CI expect jasmine intern selenium headless browser hudson travis web driver ???
  8. 8. PHILOSOPHIES TDD, CI CONSTRUCTS test harness, mocks, fixtures, stubs, spies, headless browser, web driver LIBRARIES mocha, jasmine, qunit chai, expect, sinon METHODOLOGIES unit testing, functional tests, end to end testing, integration tests TOOLS phantomjs, casperjs, nightwatch, venus, js test driver, karma, protractor, testacular, intern, hudson, jenkins, travis, selenium
  9. 9. PHILOSOPHIES
  10. 10. Test Driven Development (TDD) write tests write code run tests DEVELOPER
  11. 11. Test Driven Development (TDD) write tests write code run tests DEVELOPER
  12. 12. Test Driven Development (TDD) write tests write code run tests DEVELOPER
  13. 13. Test Driven Development (TDD) write tests write code run tests DEVELOPER
  14. 14. Test Driven Development (TDD) write tests write code run tests DEVELOPER
  15. 15. Continuous Integration (CI) commits code determines tests to run executes tests report test results DEVELOPER CI SYSTEM
  16. 16. Continuous Integration (CI) commits code determines tests to run executes tests report test results DEVELOPER CI SYSTEM
  17. 17. Continuous Integration (CI) commits code determines tests to run executes tests report test results DEVELOPER CI SYSTEM
  18. 18. Continuous Integration (CI) commits code determines tests to run executes tests report test results DEVELOPER CI SYSTEM
  19. 19. Continuous Integration (CI) commits code determines tests to run executes tests report test results DEVELOPER CI SYSTEM
  20. 20. METHODOLOGIES
  21. 21. Unit Testing start coding feature complete ship it!
  22. 22. Unit Testing start coding feature complete ship it! function validateInput(input) { var result; validations.some(function (validation) { result = validation.check(input); return !result.valid; }); return result; } CODE
  23. 23. Unit Testing start coding feature complete ship it! function validateInput(input) { var result; validations.some(function (validation) { result = validation.check(input); return !result.valid; }); return result; } result = validateInput('seth@true.com'); expect(result.valid).to.be(true); CODE TEST
  24. 24. Unit Testing start coding feature complete ship it!
  25. 25. TestingEnd to End TestingFunctionalIntegrationScenario
  26. 26. TestingEnd to End start coding feature complete ship it!
  27. 27. TestingEnd to End start coding feature complete ship it! define user scenarios automate scenarios test the tests run in multiple browsers JS PYTHON RUBY … Run locally Run in CI Pick key features / user actions
  28. 28. TestingEnd to End start coding feature complete ship it! define user scenarios automate scenarios test the tests run in multiple browsers JS PYTHON RUBY … Run locally Run in CI Pick key features / user actions
  29. 29. TestingEnd to End start coding feature complete ship it! define user scenarios automate scenarios test the tests run in multiple browsers JS PYTHON RUBY … Run locally Run in CI Pick key features / user actions • • Login! • Create Account! • Complete Purchase! • Send Message
  30. 30. TestingEnd to End start coding feature complete ship it! define user scenarios automate scenarios test the tests run in multiple browsers JS PYTHON RUBY … Run locally Run in CI Pick key features / user actions
  31. 31. TestingEnd to End start coding feature complete ship it! define user scenarios automate scenarios test the tests run in multiple browsers JS PYTHON RUBY … Run locally Run in CI Pick key features / user actions
  32. 32. TestingEnd to End start coding feature complete ship it! define user scenarios automate scenarios test the tests run in multiple browsers JS PYTHON RUBY … Run locally Run in CI Pick key features / user actions
  33. 33. CONSTRUCTS
  34. 34. TEST HARNESS! A special web page which includes only the scripts and other resources necessary to run a specific unit test. ! MOCK / SPY / STUB! Simulates components and functions which are not available in the isolated unit testing environment. ! FIXTURE! Fake data used to simulate user input or other information needed for code to execute. ! HEADLESS BROWSER! Browser with no UI, useful for testing. Popular example is PhantomJS. http://phantomjs.org/ ! WEB DRIVER! API browsers can implement to support automation with tool such as Selenium. http://www.w3.org/TR/webdriver/ Unit Testing End to End Testing
  35. 35. LIBRARIES
  36. 36. MOCHA / JASMINE / QUNIT! Provide APIs for writing and organizing unit tests. ! CHAI / EXPECT! Provide APIs for writing test assertions. Some libraries come with assertions built-in (Jasmine, QUnit), and some let you to select your own (Mocha). ! SINON! Helper library which provides mocks, stubs, spies and other testing constructs. ! Unit Testing End to End Testing
  37. 37. TOOLS
  38. 38. PHANTOMJS / SLIMERJS! PhantomJS is a headless Webkit based browser. SlimerJS is a “mostly” headless browser based on Firefox. ! CASPERJS! Higher-level abstraction over PhantomJS API, to make it easier to write end to end tests. ! VENUS / KARMA / INTERN! Test runners (or, the “glue”) that ties all the other tools together. Testacular was the original name for Karma. ! HUDSON / JENKINS / TRAVIS! Continuous Integration tools. Travis is available as a hosted service, with easy integration for Github repositories. It is also free for open source projects. Unit Testing End to End Testing
  39. 39. SELENIUM! Collection of tools / APIs which enable programmatic control of a web browser. ! NIGHTWATCH! Provides abstraction on top of Selenium API to make writing end to end tests easier. ! ! Unit Testing End to End Testing
  40. 40. YOU’RE GONNA HAVE A BAD TIME IF YOU DON’T HAVE A DEMO…
  41. 41. Demo https://github.com/sethmcl/testing_web_applications
  42. 42. Seth McLaughlin www.sethmcl.com
  43. 43. References Introduction to writing testable JavaScript! http://www.smashingmagazine.com/2012/06/27/introduction-to-javascript-unit-testing-2/ http://www.youtube.com/watch?v=-IYqgx8JxlU&index=13&list=PLZDyxA22zzGxzzIC21pyyfaAjbtCVG-tn ! Venus.js Test Runner! http://www.venusjs.org/ http://www.youtube.com/watch?v=fvHk7KWa25o ! Karma Test Runner! http://www.youtube.com/watch?v=YG5DEzaQBIc http://karma-runner.github.io/0.12/index.html ! Nightwatch (built on Selenium WebDriver)! http://nightwatchjs.org/ ! Selenium Architecture (deep dive)! http://aosabook.org/en/selenium.html ! ! ! !
  1. A particular slide catching your eye?

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

×