Front-End Testing: Demystified

  • 1,482 views
Uploaded 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 …

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.

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,482
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
28
Comments
0
Likes
7

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. Web Applications TESTING
  • 2. https://www.greendot.com Sponsored by
  • 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. time cost cost of finding and fixing bugs increases over time
  • 5. TESTING IS GOOD, MMMKAY?
  • 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. 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. 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. PHILOSOPHIES
  • 10. Test Driven Development (TDD) write tests write code run tests DEVELOPER
  • 11. Test Driven Development (TDD) write tests write code run tests DEVELOPER
  • 12. Test Driven Development (TDD) write tests write code run tests DEVELOPER
  • 13. Test Driven Development (TDD) write tests write code run tests DEVELOPER
  • 14. Test Driven Development (TDD) write tests write code run tests DEVELOPER
  • 15. Continuous Integration (CI) commits code determines tests to run executes tests report test results DEVELOPER CI SYSTEM
  • 16. Continuous Integration (CI) commits code determines tests to run executes tests report test results DEVELOPER CI SYSTEM
  • 17. Continuous Integration (CI) commits code determines tests to run executes tests report test results DEVELOPER CI SYSTEM
  • 18. Continuous Integration (CI) commits code determines tests to run executes tests report test results DEVELOPER CI SYSTEM
  • 19. Continuous Integration (CI) commits code determines tests to run executes tests report test results DEVELOPER CI SYSTEM
  • 20. METHODOLOGIES
  • 21. Unit Testing start coding feature complete ship it!
  • 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. 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. Unit Testing start coding feature complete ship it!
  • 25. TestingEnd to End TestingFunctionalIntegrationScenario
  • 26. TestingEnd to End start coding feature complete ship it!
  • 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. 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. 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. 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. 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. 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. CONSTRUCTS
  • 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. LIBRARIES
  • 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. TOOLS
  • 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. 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. YOU’RE GONNA HAVE A BAD TIME IF YOU DON’T HAVE A DEMO…
  • 41. Demo https://github.com/sethmcl/testing_web_applications
  • 42. Seth McLaughlin www.sethmcl.com
  • 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 ! ! ! !