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.

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
!
!
!
!