Overcome the challenges of testing client side applications. How to write tests for rendering, the DOM, and AJAX requests.

1. BUILDING RELIABLE WEB
APPS
A Guide to Client Side
Testing
GLENN STOVALL

2. MOVING TO THE CLIENT SIDE
More applications are moving more code from the server side to the
client side.
▸ Greater decoupling of rendering & business logic.
▸ More responsive UX.
▸ More Devices = More API-centric approach.

3. JAVASCRIPT IS A 1ST CLASS CITIZEN
This means we should treat it the same way we treat our server side
languages, and that means it needs to be tested.

4. WHO AM I?
AND WHY SHOULD YOU CARE?
▸ Glenn Stovall
▸ Technical Consultant
▸ Have worked on large scale front end applications.
▸ Worked with multiple tech companies to improve their internal
practices.

5. WHAT THIS TALK IS

6. ▸ Overview of the challenges we face.
▸ Tools and techniques to overcome them.
▸ As platform agnostic as possible
▸ 3 Examples using the user story > test > code cycle (BDD)

7. 4 CHALLENGES
OF FRONT END TESTING
a.k.a excuses

8. 1.NOT IN THE TERMINAL
▸ The client side feels 'separate' from our usual tool chain.
▸ Doesn't integrate with other CI tools.

9. 2. THE DOM
▸ Difficult to simulate browser behavior.

10. 3. APIS
▸ Client-side applications are rarely self contained.
▸ Still dependant on Server-Side and 3rd party applications

11. 4. ASYNC
▸ How can you test code when you don't know when it's going to be
done?

12. OUR 3 STORIES
1. Testing a simple string manipulation function.
2. Testing a "read more" button (DOM Manipulation).
3. Testing code reliant on a 3rd party API.

13. THE TOOLS

14. 1. NODEJSSERVER SIDE JAVASCRIPT.

15. 2. GRUNTJAVASCRIPT TASK RUNNER.

16. 3. JASMINEJAVASCRIPT TESTING FRAMEWORK.

17. 4. JQUERYDOM MANIPULATION, SIMULATION, AND
SELECTION.

18. 5. PHANTOMJSBROWSER SIMULATION.

19. SETTING UP OUR
ENVIRONMENT

20. STEP 0: INSTALL NODEJS
http://nodejs.org/
download/

21. STEP 1: DOWNLOAD JASMINE STANDALONE
▸ https://github.com/jasmine/jasmine/tree/
master/dist
▸ Can open SpecRunner.html in a browser to see tests.
▸ Remove example tests if you want.

22. STEP 2: INSTALL GRUNT + GRUNT-JASMINE
From the project root directory:
▸ npm install grunt
▸ npm install grunt-jasmine

23. STEP 3: WRITE YOUR GRUNTFILE.JS
module.exports = function(grunt) {
grunt.initConfig({
jasmine : {
src : 'src/*.js',
options: {
specs : 'spec/*Spec.js',
helpers: 'spec/*Helper.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-jasmine');
};

24. You can now run your front end tests on the back end by calling grunt
jasmine.
And we are done with setting up our environment.

25. FEATURE #1
STRING REVERSE
FUNCTION

26. "As a developer, I should be able to
reverse a string, so that I can learn
about testing"

27. spec/ReverseSpec.js
describe('strReverse function', function() {
it('should return the inverse of a string', function() {
var result = strReverse('hello');
expect(result).toBe('olleh');
});
});

28. FAIL

29. /src/Util.js
function strReverse(str) {
return str.split("").reverse().join("");
}

30. PASS

31. FEATURE #2
READ MORE
BUTTON

32. "As a user, I should be able to click a
button labeled“read more”in order to
view the content of an article, so I can
read it."

33. BUT FIRST...

34. JASMINE-JQUERY
▸ Add on library that gives us additional tools for testing HTML & CSS
related functionality.
▸ Download this file and place it in /vendor directory.
▸ We'll load jQuery from a CDN (because we can)

35. Gruntfile.js
grunt.initConfig({
jasmine:
...
vendor: [
"http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js",
"https://raw.githubusercontent.com/velesin/jasmine-jquery/master/lib/jasmine-jquery.js"
],
...
});
Vendor scripts are loaded first.

36. FIXTURES
▸ HTML Template files you can use in your tests.
▸ Add this line to spec/SpecHelper.js and create the
directory:
jasmine.getFixtures().fixturesPath = 'spec/fixtures/html';

37. spec/fixtures/html/post.html
<section class='post'>
This is a summary.
<button class='read-more'>read more</button>
<article>This is the full article.</article>
</section>

38. SET UP + TEAR DOWN
▸ beforeAll() : runs once at the beginning of the suite.
▸ beforeEach(): runs before every test.
▸ afterEach(): runs after every test.
▸ afterAll() : runs once at the end of the suite.

39. /spec/PostSpec.js
describe('article', function() {
var content = null;
beforeEach(function() {
content = $(readFixtures("post.html"));
$('body').append(content);
});
afterEach(function() {
$('body').remove(".post");
});
});

40. /spec/PostSpec.js
it('should not display the content by default', function() {
expect(content.find("article")).toBeHidden();
});

41. FAIL

42. STYLE FIXTURES
▸ CSS files you can use in your tests.
▸ Add this line to spec/SpecHelper.js and create the
directory:
jasmine.getStyleFixtures().fixturesPath = 'spec/fixtures/css';

43. /spec/fixtures/css/post.css
.post > article {
display: none;
}

44. /spec/PostSpec.js
beforeEach(function() {
loadStyleFixtures("post.css");
...
});

45. PASS

46. TESTING THE 'READ MORE' BUTTON
/spec/PostSpec.js
it('should display the article when you click "read more"', function() {
content.find(".read-more").click();
expect(content.find("article")).toBeVisible();
});

47. FAIL

48. /src/Post.js
$(document).ready(function() {
$("body").on("click", ".post > .read-more", function(e) {
$(this).siblings("article").show();
});
});

49. PASS

50. FEATURE #3
REDDIT API +
AJAX

51. “As a user, I would like to see the cutest
animal of the month according to
Reddit, so that I can bring some joy
into an other wise listless and dreary
existance."

52. PRO TIP
You can change any URL on Reddit to an API call by adding .json to
the end of the URL.
http://www.reddit.com/r/aww/top.json?sort=top&t=month

53. BUT FIRST...

54. JSON FIXTURES
▸ JSON Files you can use in your tests.
▸ Add this line to spec/SpecHelper.js and create the
directory:
jasmine.getJSONFixtures().fixturesPath = 'spec/fixtures/json';`

55. /spec/fixtures/json/aww.json
{
"kind" : "listing",
"data" : {
"children" : [
{
"data" : {
"title" : "Our indoor cat moved from a gray apartment block view to this",
"url" : "http://i.imgur.com/3rYHhEu.jpg"
}
}
]
}
}

56. SPIES
▸ Can track when functions are called.
▸ Can be called before or After functions.
▸ Can be called instead of functions and return values.
We can use spies to mock Service objects, so that we can test other
code that relies on these objects without being dependant on them.

57. src/AwwService.js
var AwwService = {};
AwwService.query = function() {
return null;
}

58. spec/AwwServiceSpec.js
beforeEach(function() {
spyOn(AwwService, 'query').and.callFake( function(params) {
return getJSONFixture('aww.json');
});
});

59. PROBLEMS WITH THIS APPROACH
▸ Functions can't return values from async calls
▸ We could use async: false, but this approach is slow.
▸ Instead, query() should take a callback, and we can test against
that.

60. src/AwwService.js
AwwService.query = function(callback) {
$.ajax({
url: "http://www.reddit.com/r/aww/top.json",
data : {
"sort" : "top",
"t" : "month"
},
success: callback
});
}

61. TIMING AJAX CALLS
▸ beforeEach() and it() have an optional done paramater.
▸ Tests will not run until done() is called.
▸ By adding done() to our callbacks, we can test async behavior

62. src/AwwSerivce.js
AwwService.displayTopResult = function(listings) {
var img = $("<img>").attr("src",listings.data.children[0].data.url);
$("body").append(img);
}

63. By placing the logic in a separate function we achieve the following:
▸ Test this functionality on its own (using our JSON fixture).
▸ Use this callback in the app itself.
▸ Create our own callback for testing, which will call done().

64. spec/AwwService.js
describe('AwwService', function() {
describe('query Function', function() {
beforeEach(function(done) {
AwwService.query(function(results) {
AwwService.displayTopResult(results);
done();
});
});
afterEach(function(done) {
$("body").remove("img");
done();
});
});
});

65. NOW WE CAN WRITE OUR FIRST TEST
(FINALLY).

66. spec/AwwService.js
it('should run the callback provided', function() {
var imgs = $("body").find("img");
var firstImg = img.first();
expect(imgs.length).toBe(1);
expect(firstImg.attr("src")).toEqual("http://i.imgur.com/3rYHhEu.jpg");
});

67. PASSBUT...

68. PROBLEMS WITH THIS APPROACH
▸ This test is dependant on the Reddit API.
▸ The first assertion will fail if the API is ever unavailable.
▸ The second assertion will fail if the result changes.
▸ We need to mock the result of HTTP request.

69. JASMINE-AJAX
▸ Jasmine provides a library that can intercept calls.
▸ Allows us to control when they are called, and how they respond.
▸ Need to download the file, add it to our vendor directory.
▸ Let's add this to our test, and create a mock response.

70. spec/AwwServiceSpec.js
beforeEach(function() {
jasmine.Ajax.install();
});
afterEach(function() {
jasmine.Ajax.uninstall();
});

71. FAIL

72. spec/AwwSerivce.js
beforeEach(function() {
// ...our original AJAX call...
var responseText = JSON.stringify({ ... });
jasmine.Ajax.requests.mostRecent().respondWith({
'status': 200,
'content/type': 'application/javascript',
'responseText': responseText
});
});

73. PASS

74. PROBLEM WITH THIS APPROACH
▸ jasmine-jquery uses AJAX calls to load fixtures.
▸ jasmine-ajax intercepts and breaks these calls.
▸ You can use preloadFixtures() before the
jasmine.Ajax.install() call to load HTML fixtures into
the cache.
▸ There is currently no preloading for CSS/JSON.

75. CONCLUSION
▸ This should be more than enough to get you started on client side
testing.
▸ Any tests are better than no tests.
▸ Client side applications aren't going to get any less complicated.

76. FURTHER INFORMATION
▸ http://glennstovall.com
▸ glenn@concordantsolutions.com
▸ @GSto
- LINK TO SHOW NOTES
ANY QUESTIONS