an introduction to testing in angularjs applications
TRANSCRIPT
Once upon a time..
jQuery- Is good at
- DOM manipulation (selectors)- Cross browser JavaScript compatibility- Ajax
..
- Is NOT good at - Structuring web application- Separation of concern (mvc)- Code de-coupling - Maintaining application state
MVC in JavaScript / Angular js
ModelController
Router
View
DOM
User Interaction
Updates Fire Event
Manipulate
Browser Hash changes
Filters
Services
Constant
Config
How Angular fits in MVC
MVW (Model View Whatever)- Controller (+ Model) , Directives + Templates (View)
- How other parts fits in angular like routes, services, config, filters, constant - Dependency Injection & Data-binding
What is Unit Testing?
- If I am writing a function, it should return expected output- how will I test it?
- by calling it and checking whether its returning expected output// my functionfunction add (a, b) { return a + b;}
// test for functionexpect(add(1,2)).toEqual(3);
What is TDD?
- Writing a unit test first- Test should fail- Writing a code for test- Test should pass- Refactor
1) expect(add(1,2)).toEqual(3);
3) function add (a, b) { return a + b; }
2) Run Test: fail
4) Run Test: Pass
What is BDD?
- In Given situation- When something happens- Then expect thisdescribe("Given particular javascript class", function () {
describe("When add function called with params 1 & 2 respectively", function () {
it("Should return 3", function () {
expect( add(1, 2) ).toEqual(3);
});
});
});
What Jasmine js provides?Suits : describeSetup : beforeEach, afterEachSpecs : itMatchers : toBe, toEqual, toBeDefined, toBeNull, toBeTruthy, toThrow etc.Spies : spyOn, toHaveBeenCalled, andCallThrough etc.Mocks & Stub : andReturn, and.stub etc.Asynchronous support : done
Spies
In order to test something - it need to be isolated- Spies: Replaces entire function
View A
Filter B
Service C
sortByName()
fetchNames()
When we need what?describe("Given particular javascript class", function () {
beforeEach( function () {
// initialising or creating instance of JavaScript class
});
describe("When add function called with params 1 & 2 respectively", function () {
var output;
beforeEach( function () {
output = add(1, 2);
});
it("Should return 3", function () {
expect( output ).toEqual(3);
});
});
});
Angular js with jasmine
- Provides angular-mock.js - Angular has extended jasmine functionality
- Providers support to inject and mock Angular services into unit tests
- Extends core ng services such that they can be inspected and controlled in a synchronous manner within test code (eg. $httpBackend)
- Installation- Need to include ‘angular-mock.js’ into test
We need more tests..
Protractor- e2e testing framework- Demo
Disadvantages- Code is written by someone else and someone else is testing it - It's time consuming and need to do lot of setup (car example) - Can't reach to route of problem - They can be flaky.
Karma- Collect all test together n run - Configuration for all testing attribute like browser, file paths etc
Yeoman
- Yeoman angular- To create angular class and related tests faster - Ready with basic setup- Demo