用$ httpBackend測試AngularJS with Jasmine/Karma不工作

我想通過Karma單元測試我的應用程序構建在Angular上與Jasmine。該應用程序涉及到調用GitHub API並提取用戶的所有倉庫的名稱並用這些名稱填充數組。我試圖測試數組正在被填充，但我有一些問題與$ httpBackend。

我控制器的相關部分：

readmeSearch.controller('ReadMeSearchController', ['RepoSearch', function(RepoSearch) { 

    var self = this; 
    self.gitRepoNames = []; 

    self.doSearch = function() { 
    var namesPromise = 
     RepoSearch.query(self.username) 
     .then(function(repoResponse) { 
      addRepoNames(repoResponse); 
     }).catch(function(error) { 
      console.log('error: ' + error); 
     }); 
    return namesPromise; 
    }; 

    addRepoNames = function(response) { 
    self.repoSearchResult = response.data; 
    for(var i = 0; i < self.repoSearchResult.length; i++) { 
     var name = self.repoSearchResult[i]['name'] 
     self.gitRepoNames.push(name); 
    }; 
    }; 

}]);

我RepoSearch廠是：

readmeSearch.factory('RepoSearch', ['$http', function($http) { 

    return { 
    query: function(searchTerm) { 
     return $http({ 
     url: 'https://api.github.com/users/' + searchTerm + '/repos', 
     method: 'GET', 
     params: { 
      'access_token': gitAccessToken 
     } 
     }); 
    } 
    }; 

}]);

和有關試驗是這樣的：

describe('ReadMeSearchController', function() { 
    beforeEach(module('ReadMeter')); 

    var ctrl; 

    beforeEach(inject(function($controller) { 
    ctrl = $controller('ReadMeSearchController'); 
    })); 

    describe('when searching for a user\'s repos', function() { 

    var httpBackend; 

    beforeEach(inject(function($httpBackend) { 
     httpBackend = $httpBackend 
     httpBackend 
     .expectGET('https://api.github.com/users/hello/repos?access_token=' + gitAccessToken) 
     .respond(
     { data: items } 
    ); 
    })); 

    afterEach(function() { 
     httpBackend.verifyNoOutstandingExpectation(); 
     httpBackend.verifyNoOutstandingRequest(); 
    }); 

    var items = [ 
     { 
     "name": "test1" 
     }, 
     { 
     "name": "test2" 
     } 
    ]; 

    it('adds search results to array of repo names', function() { 
     ctrl.username = 'hello'; 
     ctrl.doSearch(); 
     httpBackend.flush(); 
     expect(ctrl.gitRepoNames).toEqual(["test1", "test2"]); 
    }); 

    }); 

});

當我運行測試我收到錯誤

預期[]等於['test1'，'test2']。

顯然這是因爲self.gitRepoNames未被填充。當我剛剛在測試之前的預期控制檯日誌ctrl.repoSearchResult我得到

Object{data: [Object{name: ...}, Object{name: ...}]}

這是哪裏出了問題，我覺得，因爲當它在被稱爲在addRepoNames功能迴路self.repoSearchResult.length是不確定的。

所以我的問題是爲什麼response.data在測試中的addRepoNames函數中調用時返回數組？

任何幫助將不勝感激。

編輯：我應該提到，應用程序在服務器上運行時工作正常。

來源

2015-12-10 dbatten

ctrl.doSearch是一個異步功能。你應該在async way中處理它。試試：

it('adds search results to array of repo names', function(done) { 
    ctrl.username = 'hello'; 
    ctrl.doSearch().then(function() { 
    expect(ctrl.gitRepoNames).toEqual(["test1", "test2"]); 
    done(); 
    }); 
    httpBackend.flush();  
});

來源

2015-12-10 15:14:25 yarons

嗨@yarons謝謝你的回覆。我已經根據你的響應修改了測試（在'done（）'上有'setTimeout'，因爲它引起了'$ digest'的問題），但我仍然遇到同樣的問題。 – dbatten

爲什麼'setTimeout'？ '$ digest'有什麼問題？ – yarons

我得到了'$ digest已在進行中'。從我用'done（）'和'httpBackend.flush（）'讀取的內容經常會導致問題。我提到[這個問題]（http://stackoverflow.com/questions/24341544/getting-digest-already-in-progress-in-async-test-with-jasmine-2-0） – dbatten

用$ httpBackend測試AngularJS with Jasmine/Karma不工作

回答

相關問題