The document discusses Test Driven Development (TDD) in AngularJS. It provides examples of writing unit tests for an AngularJS password strength controller and directive. The key points are: 1) Examples are given of writing unit tests for an AngularJS password strength controller that tests the grading of password strength based on length. 2) An example directive for adding a greeting is shown, and a test is written to ensure it replaces the element and binds the greeting name correctly. 3) TDD in AngularJS involves writing tests before code, keeping code testable by separating concerns, and using tests to ensure code works as intended. If code is hard to test it likely has design issues

1. TDD in AngularJS
Andrey Alpert

2. 
Developer with 9 years experience

Working for 2 years as Frontend developer

Using Angular in commercial projects for more
than a year

6. 
It is all about not mixing concerns

Follow the guidelines

If it is hard to make a test, probably your code is
wrong

7. function PasswordCtrl() {
var msg = $('.ex1 span');
var input = $('.ex1 input');
var strength;
this.grade = function() {
msg.removeClass(strength);
var pwd = input.val();
password.text(pwd);
if (pwd.length > 8) {
strength = 'strong';
} else if (pwd.length > 3) {
strength = 'medium';
} else {
strength = 'weak';
}
msg
.addClass(strength)
.text(strength);
}}

8. function PasswordCtrl() {
var msg = $('.ex1 span');
var input = $('.ex1 input');
var strength;
this.grade = function() {
msg.removeClass(strength);
var pwd = input.val();
password.text(pwd);
if (pwd.length > 8) {
strength = 'strong';
} else if (pwd.length > 3) {
strength = 'medium';
} else {
strength = 'weak';
}
msg
.addClass(strength)
.text(strength);
}}
var input = $('<input type="text"/>');
var span = $('<span>');
$('body').html('<div class="ex1">')
.find('div')
.append(input)
.append(span);
var pc = new PasswordCtrl();
input.val('abc');
pc.grade();
expect(span.text()).toEqual('weak');
$('body').html('');

9. function PasswordCtrl() {
var msg = $('.ex1 span');
var input = $('.ex1 input');
var strength;
this.grade = function() {
msg.removeClass(strength);
var pwd = input.val();
password.text(pwd);
if (pwd.length > 8) {
strength = 'strong';
} else if (pwd.length > 3) {
strength = 'medium';
} else {
strength = 'weak';
}
msg
.addClass(strength)
.text(strength);
}}
var input = $('<input type="text"/>');
var span = $('<span>');
$('body').html('<div class="ex1">')
.find('div')
.append(input)
.append(span);
var pc = new PasswordCtrl();
input.val('abc');
pc.grade();
expect(span.text()).toEqual('weak');
$('body').html('');

10. function PasswordCtrl($scope) {
$scope.password = '';
$scope.grade = function() {
var size = $scope.password.length;
if (size > 8) {
$scope.strength = 'strong';
} else if (size > 3) {
$scope.strength = 'medium';
} else {
$scope.strength = 'weak';
}
};}
var $scope = {};var pc = $controller('PasswordCtrl', {
$scope: $scope });
$scope.password = 'abc';
$scope.grade();
expect($scope.strength).toEqual('weak');

11. 
Directive is a unique and powerful feature, available
only in Angular

Directives let you invent new HTML tags

They can add:

Behaviors

Data Binding

Replace or extend HTML elements
<div ng-controller="AlertDemoCtrl">
<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">
{{alert.msg}}
</alert>
<button class='btn' ng-click="addAlert()">Add Alert</button></div>

12. app.directive('greeting', function () {
return {
restrict: 'E',
replace: true,
scope: {
'grName': '@'
}
template: '<div>hi there, {{grName}}</div>'
};});

13. describe('Test directive', function() {
var $compile;
var $rootScope;
beforeEach(module('myApp'));
beforeEach(inject(function(_$compile_, _$rootScope_){
$compile = _$compile_;
$rootScope = _$rootScope_;
}));
it('Replaces the element', function() {
var element = $compile('<greeting gr-name="Andrey"></greeting>')($rootScope);
$rootScope.$digest();
expect(element.html()).toContain("hi there, Andrey");
});});

16. npm install -g karma
karma init
karma start
karma run

19. Thanks for your time
and Happy testing