爲什麼我的茉莉花測試失敗，我的Angular應用程序

我有以下代碼...其中一個測試失敗。請幫助我理解爲什麼，併爲我提供一種糾正方法。爲什麼我的茉莉花測試失敗，我的Angular應用程序

<html> 
<head> 
    <!-- Jasmine References --> 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine.min.css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine-html.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/boot.min.js"></script> 
    <!-- Angular and Angular Mock references --> 
    <script type="text/javascript" src="https://code.angularjs.org/1.4.0-rc.2/angular.min.js"></script> 
    <script type="text/javascript" src="https://code.angularjs.org/1.4.0-rc.2/angular-mocks.js"></script> 
    <!-- The code we need to test --> 
    <script type="text/javascript" src="/js/index.js"></script> 
</head> 
<body></body> 
<script type="text/javascript"> 

    var app = angular.module('peoplesearchApp',[]); 

    app.controller('peopleSearchCtrl',function($scope,$http){ 
     $scope.textChanged = function() { 
      // obtain the list of user whose name have the given prefix 
      $http.get('/findusers?q='+$scope.searchString.trim()).success(function(data, status) { 
       $scope.users = data; 
      }).error(function(data, status) { 
       console.log("Error: could not retrieve users"); 
      }); 
     }; 
     // make an initial call to retrieve all users 
     $scope.searchString = ""; 
     $scope.textChanged(); 
    }); 

    describe('search people app tests', function() { 

     var $controller, $httpBackend, $scope; 

     // setup before each test run 
     beforeEach(module('peoplesearchApp')); 
     beforeEach(inject(function (_$controller_, _$httpBackend_) { 
      $controller = _$controller_; 
      $scope = {}; 
      $httpBackend = _$httpBackend_; 
     })); 

     describe('only the users that have their names starting from the search query should be visible', function() { 

      it('should show all users for a blank query', function() { 
       $httpBackend.expectGET('/findusers?q=').respond(['Sean','Yaw','Lucy','Eric','Rory','Heyley']); 
       $controller('peopleSearchCtrl', {$scope: $scope}); 
       $httpBackend.flush(); 
       expect($scope.users).toEqual(['Sean','Yaw','Lucy','Eric','Rory','Heyley']); 
      }); 

      it('should show only Rory for query=r', function() { 
       $httpBackend.expectGET('/findusers?q=r').respond(['Rory']); 
       $controller('peopleSearchCtrl', {$scope: $scope}); 
       $httpBackend.flush(); 
       expect($scope.users).toEqual(['Rory']); 
      }); 

     }); 

    }) 

</script> 
</html>

編輯：問題是，在第二次測試中，我想發出一個假的http請求之前設置$scope.searchString = "r"莫名其妙。我不知道該怎麼做。

的錯誤是：

Error: Unexpected request: GET /findusers?q= 
Expected GET /findusers?q=r

CodePen：http://codepen.io/amarshanand/pen/MeJXdq

來源

2016-06-26 Amarsh

修改一點點代碼

app.controller('peopleSearchCtrl',function($scope,$http){ 
      console.log($scope); 

      $scope.textChanged = function(_searched) { 
       // obtain the list of user whose name have the given prefix 
       $http.get('/findusers?q='+_searched.trim()).success(function(data, status) { 
        $scope.users = data; 
       }).error(function(data, status) { 
        console.log("Error: could not retrieve users"); 
       }); 
      }; 
      // make an initial call to retrieve all users 
      $scope.searchString = ""; 
      $scope.textChanged($scope.searchString); 
     });

的設計失敗的測試它的工作現在：

it('should show only Rory for query=r', function() {  //faking the initialize call of the controller 
        $httpBackend.expectGET('/findusers?q=').respond(['Sean','Yaw','Lucy','Eric','Rory','Heyley']); 
        $httpBackend.expectGET('/findusers?q=r').respond(['Rory']); 
        $controller('peopleSearchCtrl', {$scope: $scope}); 
        $scope.textChanged('r'); 
        $httpBackend.flush(); 
        expect($scope.users).toEqual(['Rory']); 
       });

工作codepen：http://codepen.io/gpincheiraa/pen/pbRKMZ

來源

2016-06-26 03:10:18

沒有工作（它是否適用於您？只需在文本編輯器中複製/粘貼代碼並運行它，如果您有幾分鐘的話）。也許是因爲我設置了$ scope = {};在beforeEach（注入） – Amarsh

請創建一個jsfiddle或codepen示例 –

完成。 http://codepen.io/amarshanand/pen/MeJXdq – Amarsh

眼前的問題我看是這樣的，

beforeEach(inject(function(_$controller_, _$httpBackend_, _$rootScope_) { 
    $controller = _$controller_; 
    scope = _$rootScope_.$new();

你應該從$ rootScope創建新的範圍。

更新：

如果這並不幫助，分享你的錯誤。

it('should show only Rory for query=r', function() { 
    $httpBackend.expectGET('/findusers?q=').respond(['Sean','Yaw','Lucy','Eric','Rory','Heyley']); 
    $httpBackend.expectGET('/findusers?q=r').respond(['Rory']); 

    $controller('peopleSearchCtrl', {$scope: $scope}); 

    $scope.searchString = 'r'; 
    $scope.textChanged();  
    $httpBackend.flush(); 

    expect($scope.users).toEqual(['Rory']); 
});

請檢查是否有幫助。

Codepen的作品 http://codepen.io/anon/pen/ezgjOx

來源

2016-06-26 02:50:16

請看看編輯的OP – Amarsh

更新了我的答案，你能檢查嗎？ –

nope。現在我得到錯誤：不滿意的請求：GET/findusers？q = r – Amarsh

我在附加的代碼中觀察到了幾個問題： 1.您爲每個不正確的測試實例化$ controller。控制器應該在頂層實例化，我們應該在需要的地方使用該控制器實例。這樣我們可以減少代碼重複並提高測試執行時間。

您已添加$ scope.searchString =「」;執行$ scope.textChanged（）;之前的行。從編碼的角度看，這看起來不太好。在textChanged（）本身中，我們應該檢查$ scope.searchString是否爲空或未定義，並根據它來製作Rest URL。
在第二個測試中，我們將必須把下面線路中的開始： httpBackend.when（ 'GET'， '？/ findusers Q ='） .respond（[ '肖恩'， '偏航' '露'， '埃裏克'， '羅裏'， 'Heyley']）;否則，它會抱怨與/ findusers問題Q =網址

我已經修改了上面的代碼位，並使其現在的工作？

<html> 
<head> 
    <!-- Jasmine References --> 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine.min.css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine-html.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/boot.min.js"></script> 
    <!-- Angular and Angular Mock references --> 
    <script type="text/javascript" src="https://code.angularjs.org/1.4.0-rc.2/angular.min.js"></script> 
    <script type="text/javascript" src="https://code.angularjs.org/1.4.0-rc.2/angular-mocks.js"></script> 
</head> 
<body></body> 
<script type="text/javascript"> 

    var app = angular.module('peoplesearchApp',[]); 

    app.controller('peopleSearchCtrl',function($scope,$http){ 
     $scope.textChanged = function() { 
      // obtain the list of user whose name have the given prefix 
      var searchUsers = ($scope.searchString) ? $scope.searchString.trim(): ""; 

      $http.get('/findusers?q=' + searchUsers).success(function(data, status) { 
       $scope.users = data; 
      }).error(function(data, status) { 
       console.log("Error: could not retrieve users"); 
      }); 

     }; 
     // make an initial call to retrieve all users 
     $scope.textChanged(); 
    }); 

    describe('search people app tests', function() { 

     var controller, httpBackend, scope; 

     // setup before each test run 
     beforeEach(module('peoplesearchApp')); 
     beforeEach(inject(function (_$controller_, _$httpBackend_, _$rootScope_) { 
      scope = _$rootScope_.$new(); 
      httpBackend = _$httpBackend_; 

      controller = _$controller_('peopleSearchCtrl', {$scope: scope}); 
     })); 

     describe('only the users that have their names starting from the search query should be visible', function() { 

      it('should show all users for a blank query', function() { 
       httpBackend.when('GET', '/findusers?q=').respond(['Sean','Yaw','Lucy','Eric','Rory','Heyley']); 

       scope.textChanged(); 
       httpBackend.flush(); 
       expect(scope.users).toEqual(['Sean','Yaw','Lucy','Eric','Rory','Heyley']); 
      }); 

      it('should show only Rory for query=r', function() { 
       httpBackend.when('GET', '/findusers?q=') 
         .respond(['Sean','Yaw','Lucy','Eric','Rory','Heyley']); 

       scope.searchString = 'r'; 

       httpBackend.when('GET', '/findusers?q=r') 
         .respond(['Rory']); 
       scope.textChanged(); 
       httpBackend.flush(); 
       expect(scope.users).toEqual(['Rory']); 
      }); 
     }); 

    }) 

</script> 
</html>

我希望它能夠解決您的問題。

乾杯！

來源

2016-06-26 06:18:51

謝謝Sumeet的詳細解釋 – Amarsh

它解決了你的問題嗎？ –

是啊，它沒有...只是@Gonzalo Pincheira Arancibia早些時候回答，因此我標記他的接受。再次感謝 – Amarsh

爲什麼我的茉莉花測試失敗，我的Angular應用程序

回答

相關問題