Presented at dev.Objective() http://www.devobjective.com/
May 14, 2015
11:30 AM - 12:30 PM
More info and resources related to presentation available here
http://www.gpickin.com/devobj2015/testablejavascript/
Everyone who wasn't writing JavaScript, probably is now. Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript. That's great, but how do we test it. In ColdFusion we have CFCs, most languages have classes... but JavaScript doesn't have classes (yet). So how do I write unit tests, what units are there, and how do I make my code look like that.
JavaScript is a flexible language, and with great flexibility comes great complexity and responsibility. Take your JavaScript spaghetti and make it unit testable.
Attendees will learn
Different types and ways to test JavaScript
Structuring your JavaScript to be unit testable
Overview of testing tools
Building testing into your workflow
You are one of many that are not testing your JavaScript
Attendees should have some exposure to JavaScript, but this is for the Professional Newbie... who always needs to learn and adapt.
2. *
* Who Am I?
* State of the Room?
* Ways to test Javascript?
* Different Testing Environments?
* Overview of Testing Tools
* Using Testing in your Workflow
* Spaghetti Javascript
* Refactor Spaghetti into Testable Javascript
* Installing Jasmine + Live Demo
3. *
* Gavin Pickin – developing Web Apps since late 90s
* What else do you need to know?
* Blog - http://www.gpickin.com
* Twitter – http://twitter.com/gpickin
* Github - https://github.com/gpickin
* Lets get on with the show.
5. *
* Click around in the browser yourself
* Setup Selenium / Web Driver to click
around for you
* Structured Programmatic Tests
6. *
* Black/White Box
* Unit Testing
* Integration Testing
* Functional Tests
* System Tests
* End to End Tests
* Sanity Testing
* Regression Test
* Acceptance Tests
* Load Testing
* Stress Test
* Performance Tests
* Usability Tests
* + More
7. *
* Integration Tests several of the
pieces together
* Most of the types of tests are
variations of an Integration Test
* Can include mocks but can full end
to end tests including DB / APIs
8. *
“unit testing is a software verification
and validation method in which a
programmer tests if individual units of
source code are fit for use. A unit is the
smallest testable part of an application”
- wikipedia
9. *
* Can improve code quality -> quick error
discovery
* Code confidence via immediate
verification
* Can expose high coupling
* Will encourage refactoring to produce >
testable code
* Remember: Testing is all about behavior
and expectations
10. *
* TDD = Test Driven Development
* Write Tests
* Run them and they Fail
* Write Functions to Fulfill the Tests
* Tests should pass
* Refactor in confidence
* Test focus on Functionality
11. *
* BDD = Behavior Driven Development
Actually similar to TDD except:
* Focuses on Behavior and Specifications
* Specs (tests) are fluent and readable
* Readability makes them great for all levels of
testing in the organization
* Hard to find TDD examples in JS that are not
using BDD describe and it blocks
12. *
Test( ‘Email address must not be
blank’, function(){
notEqual(email, “”, "failed");
});
20. *
* Jasmine comes ready to go out of the box
* Fluent Syntax – BDD Style
* Includes lots of matchers
* Has spies included
* Very popular, lots of support
* Angular uses Jasmine with Karma (CLI)
* Headless running and plays well with CI
servers
21. *
* Async testing in 1.3 can be a
headache
* Expects *spec.js suffix for test files
* This can be modified depending on
how you are running the tests
22. *
describe("Hello world function", function() {
it(”contains the word world", function() {
expect(helloWorld()).toContain("world");
});
});
23. *
* Simple Setup
* Simple Async testing
* Works great with other Assertion
libraries like Chai ( not included )
* Solid Support with CI Servers, with
Plugins for others
* Opinion says Mocha blazing the trail for
new features
24. *
* Requires other Libraries for key features
* No Assertion Library included
* No Mocking / Spied included
* Need to create the runner manually
* Newer to the game so not as popular or
supported as others but gaining traction.
25. *
var expect = require('chai').expect;
describe(’Hello World Function', function(){
it('should contain the word world', function(){
expect(helloWorld()).to.contain(’world');
})
})
26. *
* The oldest of the main testing frameworks
* Is popular due to use in jQuery and age
* Ember’s default Unit testing Framework
27. *
* Development slowed down since
2013 (but still under development)
* Syntax – No BDD style
* Assertion libraries – limited
matchers
32. *
* Things to refactor to make your code testable
* Code should not be one big chunk of
Javascript in onReady()
* Deep nested callbacks & Anon functions
cannot easily be singled out and tested
* Remove Tight Coupling – DOM access for
example
33. *
* Lets look at some code
* This isn’t BEST PRACTICE, its BETTER
PRACTICE than you were doing
* Its not really refactoring if you don’t have
tests, its
“moving code and asking for trouble”
37. *
* Run Jasmine – manual
* Run tests at the end of each section of work
* Run Grunt-Watch – automatic
* Runs Jasmine on every file change
* Grunt can run other tasks as well,
minification etc
38. *
* Browser Views
* Eclipse allows you to open files in
web view – uses HTML Runner
* Run Jasmine / Grunt / Karma in IDE
Console
* Easy to setup – See Demo– Sublime Text 2
39. *
* Install / Run Jasmine Standalone for Browser
* Install / Run Jasmine with NodeJs
* Install/ Run Jasmine with Grunt Watch
* Install / Run Grunt Watch inside Sublime Text 2
40. *
Download standalone package from Github (I have 2.1.3)
https://github.com/jasmine/jasmine/tree/master/dist
Unzip into your /tests folder
Run /tests/SpecRunner.html to see example tests
46. *
Edit Jasmine.json to update Locations for Spec Files and Helper Files
{
"spec_dir": "spec",
"spec_files": [
"**/*[sS]pec.js"
],
"helpers": [
"helpers/**/*.js"
]
}
47. *
$ Jasmine
Started
F
Failures:
1) A suite contains spec with an expectation
Message:
Expected true to be false.
Stack:
Error: Expected true to be false.
at Object.<anonymous> (/Users/gavinpickin/Dropbox/Apps/
testApp/www/spec/test_spec.js:3:18)
1 spec, 1 failure
Finished in 0.009 seconds
48. *
* Jasmine-Node is great for Node
* Jasmine Node doesn’t have a headless browser
* Hard to test Browser code
* So what should I use?
49. *
* Install Grunt
npm install grunt
* Install Grunt – Jasmine
npm install grunt-contrib-jasmine
* Install Grunt – Watch
npm install grunt-contrib-watch
* Note: On Mac, I also needed to install Grunt CLI
npm install –g grunt-cli
58. *
* Any questions?
* Come check out my Cordova Hooks session and see
how you can run Unit Tests (and much more)
whenever you’re preparing a build for your cordova
app.