An Introduction To Testing In AngularJS Applications.

1. Testing Angular js
@RohanChandane

2. Overview of Angular js

3. Once upon a time..
jQuery
- Is good at
- DOM manipulation (selectors)
- Cross browser JavaScript compatibility
- Ajax

4. ..
- Is NOT good at
- Structuring web application
- Separation of concern (mvc)
- Code de-coupling
- Maintaining application state

5. Emerge of MVC frameworks

6. MVC

7. MVC in JavaScript / Angular js
ModelController
Router
View
DOM
User Interaction
Updates Fire Event
Manipulate
Browser Hash
changes
Filters
Services
Constant
Config

8. 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

9. Overview of Unit Testing

10. 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 function
function add (a, b) {
return a + b;
}
// test for function
expect(add(1,2)).toEqual(3);

11. 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

12. What is BDD?
- In Given situation
- When something happens
- Then expect this
describe("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);
});
});
});

13. JavaScript Unit Testing frameworks
… and more

14. What is expected from framework?
Suits
Setup
Specs
Matchers
Spies
Mocks & Stub
Asynchronous support

15. What Jasmine js provides?
Suits : describe
Setup : beforeEach, afterEach
Specs : it
Matchers : toBe, toEqual, toBeDefined, toBeNull, toBeTruthy, toThrow etc.
Spies : spyOn, toHaveBeenCalled, andCallThrough etc.
Mocks & Stub : andReturn, and.stub etc.
Asynchronous support : done

16. Spies
In order to test something
- it need to be isolated
- Spies: Replaces entire function
View A
Filter B
Service
C
sortByName()
fetchNames()

17. Mocks & Stubs
Mocks - Replaces entire object
Stubs - Hijack the return value of the function

18. 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);
});
});
});

19. 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

20. Code examples
- Controller example
- Directive example
- Service example
- Filter example

21. Disadvantages with Unit Testing
Can’t catch all the problem
- Config issues
- Integrations issues

22. 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.

23. Karma
- Collect all test together n run
- Configuration for all testing attribute like browser, file paths etc

24. Yeoman
- Yeoman angular
- To create angular class and related tests faster
- Ready with basic setup
- Demo

25. Grunt
- To automate all tests while building

26. IDE tools
- WebStorm
- Demo