Question

在端到端测试期间修改scenario.js以模拟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>

从服务器上名为player.json的文件中正确获取播放器，并通过以下测试。如何将不同的json传递给此测试并阻止获取回服务器？

/*
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();
  });

});

Answer 1

您应该使用$httpBackend from ngMockE2E module来模拟http请求。看看文档。

Answer 2

看来目前你不能只修改scenario.js来包含$ httpBackend mocking。您将不得不添加一些其他代码来支持它。

对我来说，最好的方法似乎是以下

在包含'ngMockE2E'的测试文件夹中添加myAppTest.js，这样您就不需要污染现有的app.js

'use strict';

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

然后添加一个单独的test-index.html，它使用新的myAppTest.js。请注意，您需要包含angular-mocks.js。（这使您的生产html文件保持完整且没有嘲笑）

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

然后在您的scenario.js中，在运行其他测试之前，只需引用新的test-index.html。

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

我改编了这个例子：

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

Answer 3

首先，添加angular-mocks.js和文件（例如app.js），您将在其中创建包含ng-app声明的index.html页面的模块。

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

然后在app.js文件中定义模块并添加模拟响应。

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

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

如何模拟AJAX请求？

3 个答案: