6

在端到端测试期间修改场景.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 从服务器上名为 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();
  });

});
4

3 回答 3

4

您应该使用ngMockE2E 模块中的 $httpBackend来模拟 http 请求。看看文档。

于 2012-12-17T13:38:02.010 回答
1

看来，目前您不能只修改场景.js 以包含 $httpBackend 模拟。您将不得不添加一些其他代码来支持它。

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

在包含“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); 
});

然后添加一个使用新的 myAppTest.js 的单独的 test-index.html。请注意，您需要包含 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>

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

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

我改编了这个例子：

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

于 2013-07-31T11:41:10.483 回答
0

首先，将 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); 
});
于 2012-12-24T04:32:06.270 回答