Introductory overview of testing techniques for web application development. Explains where different testing methods fit in to the software development cycle.
31. Static Analysis
Start Commit Code Staging QA Sign-off In ProdCode Review
ESLint
• Find common errors and enforce coding style
• Run every time you save a file! (automatically)
• Fast!
www.jshint.com www.eslint.org
JS Hint
DEV
eslint ftw!
32. Unit Tests
Start Commit Code Staging QA Sign-off In ProdCode Review
• Test code at a granular level
• Test as you develop (TDD)
• Great traceability
• Fast! Fun!
DEV
I ♥ unit tests
visionmedia.github.io/mocha
simple, flexible, fun
jasmine.github.io
www.qunitjs.com
mocha
33. Continuous Integration
Start Commit Code Staging QA Sign-off In ProdCode Review
Pre-Commit
Post-Commit
example: run eslint and mocha tests
example: run selenium tests
hudson-ci.org
Hudson
jenkins-ci.org
Jenkins
travis-ci.org circleci.com
atlassian.com
Bamboo
jetbrains.com
TeamCity
34. End to End Tests
Start Commit Code Staging QA Sign-off In ProdCode Review
• Scenario driven
• Tests client and server code
• More “realistic” vs. Unit Tests
• Less traceability vs. Unit Tests
• Slower to execute vs. Unit Tests
I ♥ selenium
QAseleniumhq.org
Selenium
saucelabs.com browserstack.com
36. End to End tests with Selenium
Selenium
Client API
Test Script
Selenium
WebDriver
Web
Browser
JavaScript, Java, C#, Python, …
Converts commands to HTTP requests
Communicates with web browser
...
37. End to End tests with Selenium
Selenium
Client API
Test Script Selenium Grid
VM #1
VM #2
VM #5
IE 7
VM #4
IE 8
VM #6
IE 9
38. End to End tests with Selenium
module.exports = {
'Get free VMs': function (browser) {
browser
.url('http://www.modern.ie')
.assert.title('Modern.IE')
.end();
}
};
Nightwatch.js
39. Unit Testing with Mocha (node.js)
test_file.js
Node.js
test_file.js
code_to_test.js
mocha
test results
40. Unit Testing with Mocha (node.js)
module.exports = {
name: function (title, first, last) {
return [title, first, last].join();
}
};
formatter.js
41. Unit Testing with Mocha (node.js)
var fmt = require('../../formatter');
var assert = require('assert');
!
describe('format', function () {
it('should return full name', function () {
var actual = fmt.name('Mr.', 'Bob', 'Rogers');
var expected = 'Mr. Bob Rogers';
!
assert.equal(actual, expected);
});
});
formatter.spec.js
42. Unit Testing with Venus & Mocha (browser)
test_file.js
Venus
Node.js Browser
test_file.js
code_to_test.js
mocha
test results
43. Unit Testing with Venus & Mocha (browser)
function formatName(title, first, last) {
return [title, first, last].join();
}
!
formatter.js
44. Unit Testing with Venus & Mocha (browser)
/**
* @venus-library mocha
* @venus-code formatter.js
*/
describe('format', function () {
var actual = formatName('Mr.', 'Bob', 'Rogers');
var expected = 'Mr. Bob Rogers';
!
it('should return full name', function () {
expect(actual).to.be(expected);
});
});
!
formatter.spec.js
46. Example: Spy
var callback = sinon.spy();
!
PubSub.subscribe('message', callback);
PubSub.publishSync('message');
!
assert(callback.called === true);
!
A function that records information about how it is called.
sinonjs.org
49. A fake implementation of a code dependency.
Sinon.js XHR Mock
var xhr = sinon.useFakeXMLHttpRequest();
var requests = [];
var callback = sinon.spy();
!
xhr.onCreate = function (xhr) { requests.push(xhr); };
!
myLib.getCommentsFor("/some/article", callback);
assertEquals(1, requests.length);
!
requests[0].respond(200,
{ "Content-Type": "application/json" },
'[{ "id": 12, "comment": "Hey there" }]'
);
!
assert(callback.calledWith([{ id: 12, comment: "Hey there" }]));
50. Code Samples
End-to-End test with Selenium
Unit Test node.js code
Unit Test browser code
1
2
3
http://sethmcl.com/testing-web-apps/
51. Learn More.
Introduction to writing testable JavaScript!
LinkedIn Tech Talk
Smashing Magazine
!
Unit Testing with Venus.js !
LinkedIn Tech Talk
Venusjs.org
!
End to End testing with Selenium!
The Selenium Project
Selenium Architecture
Nightwatchjs.org
!
Free Windows VMs and other testing resources!
modern.ie
http://sethmcl.com/testing-web-apps/