A walkthrough inside testing core concepts and how to apply them with AngularJS, plus an overview on the tools.

1. Testing!
AngularJS

2. Jacopo Nardiello
Padawan Programmer
Presentation code on Github:
github.com/jnardiello/angularjsday-testing-angular

3. Why?

4. Fail in
Production

5. Fail in dev

6. Thanks to testing
we…

7. fail fast

8. No Debugging

9. Machines handles
bug hunting

10. Tests are a tool to handle
complexity

11. Angular is
no exception

12. Rock solid code
Benefits

13. Fast Dev Cycle
Benefits
Rock solid code

14. Relaxed Team
Benefits
Fast Dev Cycle
Rock solid code

15. Relaxed Team
Benefits
Fast Dev Cycle
Rock solid code
Relaxed PM

16. Testing Javascript

17. Testing Javascript
describe(“…”, function() {
it(“should do something", function() {
expect(true).toBe(true);
});
});

18. Testing Javascript
describe(“…”, function() {
it(“should do something", function() {
expect(true).toBe(true);
});
});

19. Types of tests

20. Unit tests
• Small portions of code
• Code is isolated
• Quick and easy

21. Integration tests
Interaction between elements

22. • From the product
owner point of view
• They are
(computationally)
expensive and slow
Acceptance tests

23. Angular is special

24. Misko Hevery
“Agile Coach at Google where he is
responsible for coaching Googlers to
maintain the high level of automated
testing culture”
- misko.hevery.com/about/

25. Misko Hevery
+

26. “Angular is written with
testability in mind”
- Angular Doc

27. Why is Angular easily
testable?

28. Dependency
Injection

29. DI
As a Pattern Framework

30. DI as Pattern
function Car() {
var wheel = new Wheel();
var engine = Engine.getInstance();
var door = app.get(‘Door’);
!
this.move = function() {
engine.on();
wheel.rotate();
door.open();
}
}

31. DI as Pattern
function Car() {
var wheel = new Wheel();
var engine = Engine.getInstance();
var door = app.get(‘Door’);
!
this.move = function() {
engine.on();
wheel.rotate();
door.open();
}
}

32. DI as Pattern
function Car(wheel, engine, door) {
this.move = function() {
engine.on();
wheel.rotate();
door.open();
}
}

33. The problem
function main() {
var fuel = new Fuel();
var electricity = new Electricity();
var engine = new Engine(fuel);
var door = new Door(Electricity);
var wheel = new Wheel();
var car = new Car(wheel, engine, door);
car.move();
}

34. The problem
function main() {
var fuel = new Fuel();
var electricity = new Electricity();
var engine = new Engine(fuel);
var door = new Door(Electricity);
var wheel = new Wheel();
var car = new Car(wheel, engine, door);
car.move();
}

35. The problem
function main() {
var fuel = new Fuel();
var electricity = new Electricity();
var engine = new Engine(fuel);
var door = new Door(Electricity);
var wheel = new Wheel();
var car = new Car(wheel, engine, door);
car.move();
}

36. The problem
function main() {
var fuel = new Fuel();
var electricity = new Electricity();
var engine = new Engine(fuel);
var door = new Door(Electricity);
var wheel = new Wheel();
var car = new Car(wheel, engine, door);
car.move();
}

37. DI as framework
function main() {
var injector = new Injector(….);
var car = injector.get(Car);
car.move();
}

38. DI as framework
function main() {
var injector = new Injector(….);
var car = injector.get(Car);
car.move();
}
Car.$inject = [‘wheel’, ‘engine’, ‘door’];
function Car(wheel, engine, door) {
this.move = function() {
…
}
}

39. DI as framework
function main() {
var injector = new Injector(….);
var car = injector.get(Car);
car.move();
}
Car.$inject = [‘wheel’, ‘engine’, ‘door’];
function Car(wheel, engine, door) {
this.move = function() {
…
}
}

40. Angular testability
is super-heroic!
but…

41. “you still have to do the right thing.”
- Angular Doc

42. Testability
1. Don’t use new
2. Don’t use globals

43. The Angular
Way

44. Solid structured
code

45. Testing components

46. Controller
function RocketCtrl($scope) {
$scope.maxFuel = 100;
$scope.finalCheck = function() {
if ($scope.currentFuel < $scope.maxFuel) {
$scope.check = ‘ko’;
} else {
$scope.check = 'ok';
}
};
}

47. Controller
function RocketCtrl($scope) {
$scope.maxFuel = 100;
$scope.finalCheck = function() {
if ($scope.currentFuel < $scope.maxFuel) {
$scope.check = ‘ko’;
} else {
$scope.check = 'ok';
}
};
}

48. var $scope = {};
var rc = $controller(
'RocketCtrl',
{ $scope: $scope }
);
!
$scope.currentFuel = 80;
$scope.finalCheck();
expect($scope.check).toEqual('ko');
Controller Test

49. Directive
app.directive('rocketLaunchPad', function () {
return {
restrict: 'AE',
replace: true,
template:
‘<rocket-launch-pad>
Rocket here
<rocket-launch-pad>’
};
});

50. Directive Test
it(‘Check launchpad was installed', function() {
var element = $compile(“<rocket-launch-pad></
rocket-launch-pad>”)($rootScope);
!
expect(element.html()).toContain("Rocket here");
});

51. Filter Test
.filter('i18n', function() {
return function (str) {
return translations.hasOwnProperty(str)
&& translations[str]
|| str;
}
})
var length = $filter('i18n');
expect(i18n(‘ciao’)).toEqual(‘hi’);
expect(length(‘abc’)).toEqual(‘abc');

52. Tools

54. Karma
Protractor

55. Test Runner

56. Karma
Run tests against real browsers

57. Karma
Run tests against real browsers
Unit tests

58. Config file
> karma init

59. Config file
> karma init
- frameworks: [‘jasmine’]

60. Config file
> karma init
- frameworks: [‘jasmine’]
- autoWatch: true

61. Config file
> karma init
- frameworks: [‘jasmine’]
- files: [
‘../tests/controllerSpec.js’
],
- autoWatch: true

62. Config file
> karma init
- frameworks: [‘jasmine’]
- files: [
‘../tests/controllerSpec.js’
],
- autoWatch: true
- browsers: ['Chrome']

63. Using Karma
> karma start config.js

64. Using Karma
> karma start config.js

65. • From the product
owner point of view
• They are
(computationally)
expensive and slow
Acceptance tests

66. • They can be very
slow
• Hard to write
• Hard to keep
updated
Acceptance tests

67. Protractor
E2E Angular Testing
Angular wrapper for WebDriver

68. Anatomy of a E2E test
describe(‘…’, function() {
it(‘…’, function() {
browser.get(‘…’);
element(by.model(‘…’)).sendKeys(..);
!
var calculate = element(by.binding(‘…’));
!
expect(some.method()).toEqual(..);
});
});

69. Global Variables
describe(‘…’, function() {
it(‘…’, function() {
browser.get(‘…’);
element(by.model(‘…’)).sendKeys(..);
!
var calculate = element(by.binding(‘…’));
!
expect(some.method()).toEqual(..);
});
});

70. Global Variables
describe(‘…’, function() {
it(‘…’, function() {
browser.get(‘…’);
element(by.model(‘…’)).sendKeys(..);
!
var calculate = element(by.binding(‘…’));
!
expect(some.method()).toEqual(..);
});
});
Super-Happy Panda!

71. Page Objects
Protractor provides

72. Page Objects
Protractor provides
Debugging with superpowers

73. Page Objects
Protractor provides
Debugging with superpowers
Angular-specific functions

75. Get your hands dirty!
https://github.com/jnardiello/angularjsday-testing-angular
Tools in action - http://vimeo.com/86816782

76. Jacopo Nardiello
Twitter: @jnardiello
Say hi!

77. Jacopo Nardiello
Twitter: @jnardiello
Questions?