lundi 23 novembre 2015

Testing Controllers using jasmine

I am new to Jasmine. i used jasmine for unit testing an app. i started with testing controllers. i used this code to test a controller SpecRunner.html

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v2.3.4</title>

<link rel="shortcut icon" type="image/png" href="scripts/jasmine-2.3.4/jasmine_favicon.png">
 <link rel="stylesheet" href="scripts/jasmine-2.3.4/jasmine.css">

<script src="scripts/jasmine-2.3.4/jasmine.js"></script>
<script src="scripts/jasmine-2.3.4/jasmine-html.js"></script>
<script src="scripts/jasmine-2.3.4/boot.js"></script>
<script src="scripts/angular-mocks.js"></script>


<script type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="scripts/jquery-ui.js"></script>
    <script type="text/javascript" src="scripts/angular.min.js"></script>
    <script type="text/javascript" src="scripts/angular-route.js"></script>
    <script type="text/javascript" src="scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="scripts/raphael-min.js"> </script>
    <script type="text/javascript" src="scripts/morris.min.js"> </script>
    <script type="text/javascript" src="scripts/angular-base64-upload.js">    </script>
    <script type="text/javascript" src="scripts/angular-scrollable-table.min.js"></script>
    <script type="text/javascript" src="scripts/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="scripts/angular-animate.min.js"></script>
    <script type="text/javascript" src="scripts/angular-sanitize.min.js"></script>
    <script type="text/javascript" src="scripts/angular-strap.js"></script>
    <script type="text/javascript" src="scripts/angular-strap.tpl.js"></script>
    <script type="text/javascript" src="scripts/angular-strap.docs.tpl.js"></script>
    <script type="text/javascript" src="scripts/angular-mocks.js"></script>
    <script type="text/javascript" src="scripts/FileSaver.js"></script>
    <script type="text/javascript" src="scripts/jasmine-2.3.4/jasmine.js"></script>
    <script type="text/javascript" src="scripts/jasmine-2.3.4/jasmine-html.js"></script> 




</head>
<body>
 <!-- include source files here... -->
 <script type="text/javascript" src="app/app.js"></script>
 <script type="text/javascript" src="app/service/websrvices.js"></script>
 <script type="text/javascript" src="app/controller/LoginController.js">    </script>
 <!--<script data-main="scripts/main.js" src="scripts/require.js"></script>-->

  <!-- include spec files here... -->

  <script src="scripts/specs/app_spec.js"></script>
 <script>
  var jasmineEnv = jasmine.getEnv();

  // Tell it to add an Html Reporter
  // this will add detailed HTML-formatted results
  // for each spec ran.
  jasmineEnv.addReporter(new jasmine.HtmlReporter());

  // Execute the tests!
  jasmineEnv.execute();
  </script>


</body>
</html>

and my controller file is LoginController.js

app.controller('LoginController', ['$scope', '$location', 'webservicesFactory', '$window', '$timeout', function ($scope, $location, webservicesFactory, $window, $timeout){
$scope.loginErrorToggle = false;
$('#dashboardHeader').addClass('displayNone');
$('#machineNavBar').addClass('displayNone');
$('#loginHeader').addClass('displayNone');

$scope.loginClicked = function(username, password){
    webservicesFactory.loginUser(username, password)
      .success(function (response, status, headers, config) {
          if(response.Code === 200){
                $window.sessionStorage.setItem('sessionTokenID', response.Result['token']);
                $window.sessionStorage.setItem('logedUser', response.Result['username']);
                $window.sessionStorage.setItem('logedUserRole', response.Result['role_name']);
                $location.path('/dashboard'); 
          }else if(response.Code === 501 && response.Message === 'Password reset is required'){
              $location.path('/changePassword');  
          } else{
              $scope.loginErrorToggle = true;
              $scope.loinErrorMsg = response.Message;
          }
      })
      .error(function (response, status, headers, config) {
          $scope.loginErrorToggle = true;
          $scope.loinErrorMsg = 'Please enter valid credentials';
      });
}

$scope.readJSON = function(){
    webservicesFactory.getDataForLogin()
      .success(function (response, status, headers, config) {
        if(response.Code == 200){
           $location.path('/dashboard'); 
           $window.sessionStorage.setItem('logedUser', 'kuldeep.bhimte');
           $window.sessionStorage.setItem('logedUserRole', 'RSE');

            var hyphenStr = "Kuldeep-BHimte-27-Bengaluru";
            var newstr  = hyphenStr.replace('-','/');
            console.log('hyphenStr123'+newstr);
        }
      })
      .error(function (response, status, headers, config) {
        console.log('Login txt error');
      });
}
}]);

and app_spec.js is defines as follows

describe('Controller: LoginCtrl', function() {

 // Define this test's local variables
  var $scope = null,
  $location,
  MainCtrl;

  // Load the controller's module
  beforeEach(angular.module('MyApp', []));

  /* jshint camelcase:false */
  // Initialize the controller and scope
  beforeEach(inject(function($controller, $rootScope,$location) {
    $scope : $rootScope.new();
    spyOn($location, 'path');

   MainCtrl = $controller('LoginController', {
      $scope: $scope,
      $location: $location,

    });

  }));

  it('should be defined', function() {
    expect(MainCtrl).toBeDefined();
  });

  describe('when created', function() {

it('should call $location accordingly', function () {
    $scope.loginClicked("a@a.com","Aa@123456")
  expect($location.path).toHaveBeenCalledWith('/dashboard');
});

  });

});

If i run the spec runner it shows an error message indicating scope is not defined. Please tell me where i have gone wrong

Aucun commentaire:

Enregistrer un commentaire