2012-12-16 46 views
6

Cách đơn giản nhất để sửa đổi scenario.js là gì để giả lập một yêu cầu AJAX trong một bài kiểm tra đầu cuối?Làm thế nào để thử một yêu cầu AJAX?

<!doctype html> 
<html lang="en" ng-app="myApp"> 
<head> 
    <meta charset="utf-8"> 
    <title>My Test AngularJS App</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular-resource.min.js"></script> 

    <script language="javascript" type="text/javascript"> 
     angular.module('myApp', ['ngResource']); 
     function PlayerController($scope,$resource){ 
     $scope.player = $resource('player.json').get(); 
     } 
    </script> 

</head> 
    <body ng-controller="PlayerController"> 
    <p>Hello {{player.name}}</p> 
    </body> 
</html> 

Trình phát được lấy đúng từ tệp có tên player.json trên máy chủ và các kiểm tra sau đây. Làm thế nào để vượt qua json khác nhau trong thử nghiệm này và ngăn chặn lấy lại cho máy chủ?

/* 
How do I pass in 
player.json -> {"name":"Chris"} 
*/ 
describe('my app', function() { 

    beforeEach(function() { 
    browser().navigateTo('../../app/index.html'); 
    }); 

    it('should load player from player.json', function() { 
    expect(element('p:first').text()). 
     toMatch("Hello Chris"); 
    pause(); 
    }); 

}); 

Trả lời

4

Bạn nên sử dụng $httpBackend from ngMockE2E module để yêu cầu http giả. Hãy xem các tài liệu.

+3

Quan điểm của tôi là tôi không thấy ví dụ ngMockE2E trong tài liệu. Tôi đang tìm vài dòng mã để thêm vào scenario.js. – Chris

+0

Bạn không cần phải sửa đổi kịch bản.js nếu tôi hiểu chính xác câu hỏi của bạn. Câu trả lời của Caio là cách tiêu chuẩn để xử lý tình huống này –

+3

Ok. Hãy để tôi được rõ ràng. Tôi không hiểu làm thế nào để làm những gì Caio được giới thiệu. Có một số ma thuật đang được giả định bởi các tài liệu như "Sau đó, khởi động ứng dụng của bạn với mô-đun mới này". Làm thế nào để làm điều đó? – Chris

0

Khi bắt đầu, hãy thêm angular-mocks.js và tệp (ví dụ app.js) nơi bạn sẽ tạo mô-đun vào trang index.html chứa khai báo ng-app.

<html lang="en" ng-app="myApp"> 
    <head> 
    <script src="js/app.js"></script> 
    <script src="../test/lib/angular/angular-mocks.js"></script> 
    ... 

Sau đó, trong tệp app.js, hãy xác định mô-đun và thêm phản hồi giả.

var myAppDev = angular.module('myApp', ['ngResource','ngMockE2E']); 

myAppDev.run(function($httpBackend) { 
    var user = {name: 'Sandra'}; 
    $httpBackend.whenGET('/api/user').respond(user); 
}); 
0

Dường như hiện tại bạn không thể CHỈ sửa đổi scenario.js để bao gồm $ httpBackend mocking. Bạn sẽ phải thêm một số mã khác để hỗ trợ nó.

Đối với tôi, cách tốt nhất có vẻ là sau

Thêm một myAppTest.js trong thư mục thử nghiệm của bạn trong đó bao gồm 'ngMockE2E', do đó bạn không cần phải làm ô nhiễm app.js hiện tại của bạn

'use strict'; 

angular.module('myAppTest', ['myApp', 'ngMockE2E']) 
.run(function($httpBackend) { 
    var user = {name: 'Sandra'}; 
    $httpBackend.whenGET('/api/user').respond(user); 
}); 

Sau đó, thêm một test-index.html riêng biệt sử dụng myAppTest.js mới. Lưu ý rằng bạn cần bao gồm angular-mocks.js. (Đây lá tập tin html sản xuất của bạn còn nguyên vẹn và hoàn toàn miễn mocks)

<!doctype html> 
<html lang="en" ng-app="myAppTest"> 
<head> 
    <script src="lib/angular/angular.js"></script> 
    <script src="lib/angular/angular-resource.js"></script> 
    <script src="../test/lib/angular/angular-mocks.js"></script> 
    <script src="js/app.js"></script> 
    <script src="js/controllers.js"></script> 
    <script src="../test/e2e/myAppTest.js"></script> 
</head> 
<body> 
    <div ng-view></div> 
</body> 
</html> 

Sau đó, trong scenarios.js bạn chỉ cần tham khảo mới kiểm tra-index.html của bạn trước khi chạy các bài kiểm tra khác.

beforeEach(function() { 
    browser().navigateTo('../../app/test-index.html#/'); 
}); 

Tôi đã thích nghi ví dụ này từ:

https://github.com/stephennancekivell/angular_e2e_http/tree/ngMockE2E

+1

chính xác thì bạn sẽ thử nghiệm các tuyến đường trong ứng dụng gốc của mình như thế nào? Các tuyến đường được định cấu hình với tên ứng dụng – wakandan

Các vấn đề liên quan