Download as PDF, PPTX
Uploaded bySeth McLaughlin
Front-End Testing: Demystified
The document discusses web application testing, highlighting various testing methodologies, including unit testing, integration testing, and end-to-end testing. It emphasizes the importance of test-driven development (TDD) and continuous integration (CI) in the development process while referencing several tools and libraries used for testing such as Mocha, Jasmine, PhantomJS, and Selenium. Additionally, it includes examples and constructs such as mocks, stubs, and test harnesses crucial for effective testing practices.
More Related Content
Similar to Front-End Testing: Demystified
Front-End Testing: Demystified
- 1.
- 2.
- 3. Does my codework? 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 findingand fixing bugs increases over time
- 5.
- 6. js test driver unittesting 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 unittesting 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.
- 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) commitscode determines tests to run executes tests report test results DEVELOPER CI SYSTEM
- 16. Continuous Integration (CI) commitscode determines tests to run executes tests report test results DEVELOPER CI SYSTEM
- 17. Continuous Integration (CI) commitscode determines tests to run executes tests report test results DEVELOPER CI SYSTEM
- 18. Continuous Integration (CI) commitscode determines tests to run executes tests report test results DEVELOPER CI SYSTEM
- 19. Continuous Integration (CI) commitscode determines tests to run executes tests report test results DEVELOPER CI SYSTEM
- 20.
- 21. Unit Testing start codingfeature complete ship it!
- 22. Unit Testing start codingfeature 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 codingfeature 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 codingfeature complete ship it!
- 25. TestingEnd to EndTestingFunctionalIntegrationScenario
- 26. TestingEnd to End startcoding feature complete ship it!
- 27. TestingEnd to End startcoding 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 startcoding 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 startcoding 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 startcoding 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 startcoding 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 startcoding 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.
- 34. TEST HARNESS! A specialweb 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.
- 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.
- 38. PHANTOMJS / SLIMERJS! PhantomJSis 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 HAVEA BAD TIME IF YOU DON’T HAVE A DEMO…
- 41.
- 42.
- 43. References Introduction to writingtestable 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 ! ! ! !