2016-06-26 8 views
1

私は次のコードを持っています...そして、テストの1つが失敗しています。理由を理解するのを手伝ってください。私に是正の方法を提案してください。私のジャスミンテストが角型アプリケーションで失敗したのはなぜですか?

<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> 

EDIT:問題は、第二の試験では、私は偽のHTTPリクエストを発行する前に何とか$scope.searchString = "r"を設定したいということです。私はそれをする方法を知らない。

エラーは次のとおりです。

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

CodePen:私は見http://codepen.io/amarshanand/pen/MeJXdq

答えて

1

に動作します:

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

+0

didnt work(それはあなたのために機能しますか?テキストエディタでコードをコピー/ペーストして実行してください。おそらく私は$ scope = {}を設定しているからでしょう。 beforeEach(注入) – Amarsh

+0

jsfiddleまたはcodepenの例を作成してください –

+0

完了してください。 http://codepen.io/amarshanand/Pe/MeJXdq – Amarsh

0

当面の問題は、あなたが$ rootScopeから新しいスコープを作成する必要があり、この、

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

です。

更新:

このdoesntのヘルプ場合は、あなたが得るエラーを共有しています。

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あなたのコードの設計

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); 
     }); 

それは今働いて失敗したテストを少し変更 http://codepen.io/anon/pen/ezgjOx

+0

私の答えを更新したOP – Amarsh

+0

の編集を見てください。確認できますか? –

+0

nope。今、私はエラーが出ます:満足していないリクエスト:GET/findusers?q = r – Amarsh

0

添付のコードで確認した問題はいくつかあります。 1.正しくないすべてのテストに対して$ controllerをインスタンス化します。コントローラは最上位レベルでインスタンス化する必要があり、必要なときはいつでもそのコントローラインスタンスを使用する必要があります。コードの重複を減らし、テストの実行時間を短縮できるようにします。

  1. $ scope.searchString = "";を追加しました。 $ scope.textChanged()の実行前の行。コーディングの観点から見栄えが悪い。 textChanged()自体では、$ scope.searchStringが空白か未定義かどうかをチェックし、それに基づいてRest URLを作成する必要があります。 はhttpBackend.when( 'GET'、 '?/ findUsersはQ =') .respond([ 'ショーン'、 'ヨー':我々はスタートで以下の行を配置する必要があります第二の試験で

  2. 「ルーシー」、「エリック」、「ロリー」、「ヘイリー」) ?そうでなければ/ findUsersはとの問題を訴えるだろうQ = URL

私は上記のコードを少し変更して、それが今取り組んで作られた:

<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> 

私はそれはあなたの問題を解決を願っています。

乾杯!

+0

詳しい説明のためのSumeet – Amarsh

+0

あなたの問題を解決しましたか? –

+0

ええ、それは... @Gonzalo Pincheira Arancibiaが以前に返答したので、私は受け入れられたとしてマークしました。再度、感謝します – Amarsh

関連する問題