Front-End Testing: Demystified
43
Web Applications TESTING
-
Upload
seth-mclaughlin -
Category
Software
-
view
604 -
download
0
description
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.
Transcript of Front-End Testing: Demystified
Web ApplicationsTESTING
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 driverunit testing
integration tests
end to end testing
functional tests
mocha
phantomjs
casperjsTDD
testacular
karma
venus
sinonstubs
mocks
spiesfixtures
test harnessCI
expect
jasmine
intern
selenium headless browser
hudson travis
web driver
js test driverunit testing
integration tests
end to end testing
functional tests
mocha
phantomjs
casperjsTDD
testacular
karma
venus
sinonstubs
mocks
spiesfixtures
test harnessCI
expect
jasmine
intern
selenium headless browser
hudson travis
web driver
???
PHILOSOPHIES
TDD, CI
CONSTRUCTStest 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
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 (validation) { result = validation.check(input); return !result.valid; }); return result; }
CODE
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('[email protected]'); expect(result.valid).to.be(true);
CODE
TEST
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 multiple browsers
JS PYTHON RUBY …
Run locally
Run in CI
Pick key features / user actions
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
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
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
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
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
CONSTRUCTS
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 TestingEnd to End Testing
LIBRARIES
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 TestingEnd to End Testing
TOOLS
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 TestingEnd to End Testing
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 TestingEnd to End Testing
YOU’RE GONNA HAVE A BAD TIME
IF YOU DON’T HAVE A DEMO…
Demohttps://github.com/sethmcl/testing_web_applications
Seth McLaughlinwww.sethmcl.com
ReferencesIntroduction 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 !!!!
