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.
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)
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
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)
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';
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.
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';
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
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';`
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.
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.
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
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().
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");
});
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.
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.