Post
Ask Question

Creating and Testing Custom Filters in AngularJs

For creating controller and custom filters in Angular applications follow the below steps,
  1. Create a Student controller as StudentController.js. Add the following code to it to create a new module,
    1. var app = angular.module('app', []);   
  2. Now create a controller in controller file and create AvgMarks function. Add the following code in Student controller,
    1. app.controller('studentController', function($scope)   
    2. {  
    3.   
    4.     $scope.helloAngular = 'I Learn';  
    5.   
    6.     $scope.FirstName = 'Deepak';  
    7.   
    8.     $scope.LastName = 'Upreti';  
    9.   
    10.     $scope.studentdata = [  
    11.   
    12.         {  
    13.             Name: 'Deepak Upreti',  
    14.             Id: 1,  
    15.             Sub1Marks: 80,  
    16.             Sub2Marks: 50,  
    17.             Sub3Marks: 40  
    18.         },  
    19.   
    20.         {  
    21.             Name: 'Manu',  
    22.             Id: 2,  
    23.             Sub1Marks: 80,  
    24.             Sub2Marks: 70,  
    25.             Sub3Marks: 60  
    26.         }  
    27.   
    28.     ];  
    29.   
    30.     $scope.AvgMarks = function(sub1, sub2, sub3) {  
    31.   
    32.         var total = sub1 + sub2 + sub3;  
    33.   
    34.         return (total / 3);  
    35.   
    36.     };  
    37.   
    38. }); 
  3. Now create a custom Filter as nameReverse for reversing the name. Also if you want you can create a separate JS file for the filter's logical separation. Add the following code,
    1. app.filter("nameReverse", function()   
    2. {  
    3.   
    4.     return function(name)   
    5.     {  
    6.   
    7.         return name.split("").reverse().join("");  
    8.   
    9.     };  
    10.   
    11. });  
  4. Now insert the following code to your view, in this case, Index.cshtml file,
    1. <!DOCTYPE html>  
    2.   
    3. <html ng-app="app">  
    4.   
    5. <head>  
    6.   
    7.     <title> Angular Page</title>  
    8.   
    9. </head>  
    10.   
    11. <body>  
    12.   
    13.     <div ng-controller="studentController">  
    14.   
    15.         {{helloAngular}}  
    16.   
    17.     </div>  
    18.   
    19.     <div ng-controller="studentController">  
    20.   
    21.         Full Name: {{FirstName + " " + LastName}}  
    22.   
    23.     </div>  
    24.   
    25.     <br/><br/><br/>  
    26.   
    27.   
    28.     <div class="table-responsive">  
    29.   
    30.         <table border="1" style="width:800px" ng-controller="studentController">  
    31.   
    32.   
    33.             <tr>  
    34.   
    35.                 <td><b>Name</b></td>  
    36.   
    37.                 <td><b>ReverseName</b></td>  
    38.   
    39.                 <td><b>Id</b></td>  
    40.   
    41.                 <td><b>Sub1Marks</b></td>  
    42.   
    43.                 <td><b>Sub2Marks</b></td>  
    44.   
    45.                 <td><b>Sub3Marks</b></td>  
    46.   
    47.                 <td><b>AverageMarks</b></td>  
    48.   
    49.             </tr>  
    50.   
    51.             <tr ng-repeat="s in studentdata">  
    52.   
    53.                 <td>{{s.Name}}</td>  
    54.   
    55.                 <td>{{s.Name | nameReverse}}</td>  
    56.   
    57.                 <td>{{s.Id}} </td>  
    58.   
    59.                 <td>{{s.Sub1Marks}} </td>  
    60.   
    61.                 <td>{{s.Sub2Marks}} </td>  
    62.   
    63.                 <td>{{s.Sub3Marks}} </td>  
    64.   
    65.                 <td>{{AvgMarks(s.Sub1Marks,s.Sub2Marks,s.Sub3Marks)}} </td>  
    66.   
    67.             </tr>  
    68.   
    69.         </table>  
    70.   
    71.     </div>  
    72.   
    73.     <script src="../../Scripts/angular.min.js"></script>  
    74.   
    75.     <script src="../../Scripts/Controller/StudentController.js"></script>  
    76.   
    77. </body>  
    78.   
    79. </html>  
  5. Run the application and you will get the following output, 
  6. Now test the controller and new custom filter we created (“nameReverse”) 
  • Create a folder as a Unit Test. And add a JavaScript file as appfilterTest. Add the following code to it,
    1. /// <reference path="../Scripts/angular.js" />  
    2. /// <reference path="../Scripts/angular-mocks.js" />  
    3. /// <reference path="../Scripts/Controller/StudentController.js" />  
    4. describe('Reverse Filter', function()  
    5. {  
    6.   
    7.     var reverseFilter;  
    8.   
    9.     beforeEach(module('app'));  
    10.   
    11.     var scope;  
    12.   
    13.   
    14.     beforeEach(inject(function($controller, $rootScope) {  
    15.   
    16.         scope = $rootScope.$new();  
    17.   
    18.         var ctrl = $controller('studentController', {  
    19.             $scope: scope  
    20.         });  
    21.   
    22.     }));  
    23.   
    24.   
    25.     it('AvgMarks function test', function() {  
    26.   
    27.         var result = scope.AvgMarks(4, 4, 4);  
    28.   
    29.         expect(result).toEqual(4);  
    30.   
    31.     });  
    32.   
    33.   
    34.     beforeEach(inject(function(_nameReverseFilter_) {  
    35.   
    36.         reverseFilter = _nameReverseFilter_;  
    37.   
    38.     }));  
    39.   
    40.     it('testing reverse filter', function() {  
    41.   
    42.         expect(reverseFilter('deepak')).toEqual('kapeed');  
    43.   
    44.     });  
    45.   
    46. });    
  • Go ahead and run the test cases and you will get the result as testing reverse filter and AvgMarks function test as PASS,