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,
     
Next Recommended Reading AngularJS Table Sorting Filter And Paging With Static Data