Testing Web Applications

Testing!
Web Applications
presented by Seth McLaughlin @sethmc

E N G I N E E R I N G
www.shapesecurity.com

how to effectively test JavaScript code
in your web applications?

Start Commit Code Staging QA Sign-off In ProdCode Review
DEV
Right away!
PM
Build me
feature X ASAP!

DEV
working for
the man…

every night
and day!
DEV

DEV
everyone’s
a critic

DEV
hallelujah!

DEV
my work here
is done.

DEV
my work here
is done.
QA
we’ll see
about that!

QA
ship it!

CUSTOMER
feature X is
awesome!

elapsed time: 0 days
start coding!

start code review

commit code

deploy code to staging

QA ﬁnds a bug in staging

ﬁx bug

code review ﬁx

commit ﬁxed code

deploy (again) to staging

QA is happy

shipped to production

Dev ﬁnds the bug while coding

could have saved over 5 days
by catching bug sooner
alternatively…

ﬁnd bugs as early
as possible.

Static Analysis
var config = {!
name: this.name,!
style: 'solo',!
};
blows up in IE7

Static Analysis
function getObjs(paths) {
return paths.map(function (p) {
var obj = null;
!
try {
obj = require(p);
} catch (e) {
console.error('Cannot load path', p);
}
}).filter(function (obj) {
return obj !== null;
});
}

Static Analysis
ESLint
• Find common errors and enforce coding style
• Run every time you save a ﬁle! (automatically)
• Fast!
www.jshint.com www.eslint.org
JS Hint
DEV
eslint ftw!

Unit Tests
• Test code at a granular level
• Test as you develop (TDD)
• Great traceability
• Fast! Fun!
DEV
I ♥ unit tests
visionmedia.github.io/mocha
simple, ﬂexible, fun
jasmine.github.io
www.qunitjs.com
mocha

Continuous Integration
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

End to End Tests
• 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

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

Selenium
Client API
Test Script Selenium Grid
VM #1
VM #2
VM #5
IE 7
VM #4
IE 8
VM #6
IE 9

module.exports = {
'Get free VMs': function (browser) {
browser
.url('http://www.modern.ie')
.assert.title('Modern.IE')
.end();
}
};
Nightwatch.js

Unit Testing with Mocha (node.js)
test_ﬁle.js
Node.js
test_ﬁle.js
code_to_test.js
mocha
test results

module.exports = {
name: function (title, first, last) {
return [title, first, last].join();
}
};
formatter.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

Unit Testing with Venus & Mocha (browser)
test_ﬁle.js
Venus
Node.js Browser
test_ﬁle.js
code_to_test.js
mocha
test results

function formatName(title, first, last) {
return [title, first, last].join();
}
!
formatter.js

/**
* @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

<!DOCTYPE html>
<html>
<head>
<title>Test for Formatter</title>
<script type="text/javascript" src=“mocha.js”></script>
<script type="text/javascript" src=“venus_client.js”></script>
<script type="text/javascript" src="formatter.js"></script>
<script type="text/javascript" src=“specs/formatter.spec.js”></script>
<script type="text/javascript">
testLibrary.run();
</script>
</head>
<body>
<div id="results"></div>
</body>
</html>
test_harness.html

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

Example: Mock
XMLHttpRequestmyLib jQuery Web Server

Example: Mock
Mock XMLHttpRequestmyLib jQuery

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" }]));

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/

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/

Testing Web Applications

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Testing Web Applications (20)

More from Seth McLaughlin (8)

Recently uploaded (20)

Testing Web Applications