Testing Angular js@RohanChandane

Overview of Angular js

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

Emerge of MVC frameworks

MVC

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

Overview of Unit Testing

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);

});

});

});

JavaScript Unit Testing frameworks

… and more

What is expected from framework?SuitsSetup SpecsMatchersSpiesMocks & StubAsynchronous support

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()

Mocks & Stubs

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

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

Code examples

- Controller example- Directive example- Service example- Filter example

Disadvantages with Unit Testing

Can’t catch all the problem - Config issues- Integrations issues

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

Grunt

- To automate all tests while building

IDE tools- WebStorm- Demo