Presentation aalpert v6а+++
6 likes•2,560 views
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
Presentation aalpert v6а+++
- 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