TDD in AngularJS
Andrey Alpert


Developer with 9 years experience



Working for 2 years as Frontend developer



Using Angular in commercial project...


It is all about not mixing concerns



Follow the guidelines



If it is hard to make a test, probably your code is

...
function PasswordCtrl() {
var msg = $('.ex1 span');
var input = $('.ex1 input');
var strength;
this.grade = function() {
m...
function PasswordCtrl() {
var msg = $('.ex1 span');
var input = $('.ex1 input');
var strength;
this.grade = function() {
m...
function PasswordCtrl() {
var msg = $('.ex1 span');
var input = $('.ex1 input');
var strength;
this.grade = function() {
m...
function PasswordCtrl($scope) {
$scope.password = '';
$scope.grade = function() {
var size = $scope.password.length;
if (s...


Directive is a unique and powerful feature, available
only in Angular



Directives let you invent new HTML tags



T...
app.directive('greeting', function () {
return {
restrict: 'E',
replace: true,
scope: {
'grName': '@'
}
template: '<div>hi...
describe('Test directive', function() {
var $compile;
var $rootScope;
beforeEach(module('myApp'));

beforeEach(inject(func...
npm install -g karma
karma init
karma start
karma run
Thanks for your time

and Happy testing
Presentation aalpert v6а+++
Presentation aalpert v6а+++
Presentation aalpert v6а+++
Presentation aalpert v6а+++
Presentation aalpert v6а+++
Presentation aalpert v6а+++
Presentation aalpert v6а+++
Upcoming SlideShare
Loading in …5
×

Presentation aalpert v6а+++

2,261 views

Published on

Published in: Technology

Presentation aalpert v6а+++

  1. 1. TDD in AngularJS Andrey Alpert
  2. 2.  Developer with 9 years experience  Working for 2 years as Frontend developer  Using Angular in commercial projects for more than a year
  3. 3.  It is all about not mixing concerns  Follow the guidelines  If it is hard to make a test, probably your code is wrong
  4. 4. 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); }}
  5. 5. 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('');
  6. 6. 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('');
  7. 7. 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');
  8. 8.  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>
  9. 9. app.directive('greeting', function () { return { restrict: 'E', replace: true, scope: { 'grName': '@' } template: '<div>hi there, {{grName}}</div>' };});
  10. 10. 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"); });});
  11. 11. npm install -g karma karma init karma start karma run
  12. 12. Thanks for your time and Happy testing

×