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.