Test driven angularjs development

33
ANGULARJS Adetunji Sunmonu Test Driven Development

description

An introduction to angularjs development. It explains how to organise and test your code base

Transcript of Test driven angularjs development

Page 1: Test driven angularjs development

ANGULARJS Adetunji Sunmonu

T e s t D r i v e n D e v e l o p m e n t

Page 2: Test driven angularjs development

Any application that can be written in JavaScript, will eventually be written in

JavaScript.

2

Jeff Atwood

Page 3: Test driven angularjs development

WHY ANGULARJS?

3

Page 4: Test driven angularjs development

EMBEDDABLE AngularJS works great with other technologies

4

Page 5: Test driven angularjs development

POJO Just JavaScript

5

Page 6: Test driven angularjs development

TESTING Easy to test

6

Page 7: Test driven angularjs development

DEPENDENCY INJECTION Getting things to work effectively together

7

Page 8: Test driven angularjs development

DATA BINDING Automatic synchronization of data between model and the view components

8

Page 9: Test driven angularjs development

STRUCTURE YOUR CODE Organize your code for efficiency.

9

Page 10: Test driven angularjs development

PILES ON THE FLOOR

•  Js/ ●  app.js ●  controllers.js ●  directives.js ●  filters.js ●  services.js

10

Page 11: Test driven angularjs development

SOCK THE DRAWER

■  Controllers

●  LoginController.js

●  RegistrationController.js

●  ProductDetailCOntroller.js

■  Directive.js

■  Filters.js

■  Services/

●  CartService.js

●  UserService.js

●  ProductService.js

11

Page 12: Test driven angularjs development

MODULARITY

12

§  Cart/

§  CartService.js §  CartController.js

§  Common/ §  Directive.js §  Filter.js §  Product/

§  ProductDetailController.js §  ProductService.js §  Search/ §  SerachResultsController §  SearchResultsService.js

§  User/ §  LoginController.js §  RegistrationController.js §  UserService.js

Page 13: Test driven angularjs development

13

Page 14: Test driven angularjs development

TOOLS 14

Page 15: Test driven angularjs development

UNIT TEST

•  Jasmine – JavaScript testing framework o  http://jasmine.github.io/1.3/introduction.html

•  Mocha/chai/sinon o  http://visionmedia.github.io/mocha/ - test Framework

o  http://chaijs.com/ - assertion library

o  http://sinonjs.org/ - test spies, stubs and mocks

15

Page 16: Test driven angularjs development

FUNCTIONAL/END-TO-END TEST

Ø Selenium Ø  http://docs.seleniumhq.org/

Ø Protractor Ø  https://github.com/angular/protractor

16

Page 17: Test driven angularjs development

OTHER TOOLS

•  Test Runner o  Karma - http://karma-runner.github.io/0.12/index.html

o  Chutpzah - http://chutzpah.codeplex.com/

•  Task Runner o  Grunt – http://gruntjs.com/

o  Gulp - http://gulpjs.com/

17

Page 18: Test driven angularjs development

START YOUR APP

18

Page 19: Test driven angularjs development

CONTROLLERS Set up the initial state of the scope object and add behaviour to it

19

Page 20: Test driven angularjs development

CONTROLLER

20

Page 21: Test driven angularjs development

VIEW

21

Page 22: Test driven angularjs development

CONTROLLER TEST

22

Page 23: Test driven angularjs development

SERVICES

23

To organize and share code across your application Lazily instantiated Singletons

Page 24: Test driven angularjs development

SERVICES

24

Page 25: Test driven angularjs development

SERVICE TEST

25

Page 26: Test driven angularjs development

PROMISES A promise represents the eventual result of an asynchronous operation

26

Page 27: Test driven angularjs development

CALLBACK HELL!

27

Page 28: Test driven angularjs development

WONDERS OF PROMISES

28

Page 29: Test driven angularjs development

SERVICE USING PROMISES

Page 30: Test driven angularjs development

CONTROLLER TEST

Page 31: Test driven angularjs development

CONTROLLER TEST USING MOCKS

Page 32: Test driven angularjs development

SERVICE TEST

Page 33: Test driven angularjs development

THANK YOU Questions or suggestions: