【问题标题】:Angular E2E testing with mocked httpBackend?使用模拟的 httpBackend 进行角 E2E 测试?
【发布时间】:2012-12-20 09:00:14
【问题描述】:

我和我的老板之间就Angular E2E testing. 进行了热烈的讨论,根据vojitajina pull request 我们需要运行一个服务器才能运行e2e 测试。所以,运行e2e测试涉及到一个真实的服务器,一个真实的服务器涉及到DB。这会使测试变慢。好吧,现在的问题是如何在不涉及真实服务器的情况下测试 e2e ?有没有办法使用 httpBackend 和 e2e 角度 API,我可以在其中使用 browser()、element()、select() 进行测试?

【问题讨论】:

    标签: angularjs karma-runner


    【解决方案1】:

    [参见下面的编辑] 我们使用 shell 脚本定期从我们的种子测试服务器捕获 curl 请求。然后通过 $httpBackend.whenGet(...).respond() 返回这些响应以拦截并返回该数据。

    所以,在我们的 index.html 中

    if (document.location.hash === '#test') {
      addScript('/test/lib/angular-mocks.js');
      addScript('/test/e2e/ourTest.js');
      window.fixtures = {};
      addScript('/test/fixtures/tasks/tasks_p1.js');
      // the tasks_p1.js is generated and has "window.fixtures.tasks_p1 = ...json..."
      addScript('/test/fixtures/tasks/tasks_p2.js');
      // the tasks_p2.js is generated and has "window.fixtures.tasks_p2 = ...json..."
      addScript('/test/e2e/tasks/taskMocks.js\'><\/script>');
    }
    

    ourTest.js

    angular.module('ourTestApp', ['ngMockE2E','taskMocks']).
        run(function ($httpBackend, taskMocks) {
          $httpBackend.whenGET(/views\/.*/).passThrough();
          $httpBackend.whenGET(/\/fixtures.*\//).passThrough();
    
          taskMocks.register();
    
          $httpBackend.whenGET(/.*/).passThrough();
        });
    

    taskMocks.js

    /*global angular */
    angular.module('taskMocks', ['ngMockE2E']).
      factory('taskMocks', ['$httpBackend', function($httpBackend) {
      'use strict';
      return {
        register: function() {
          $httpBackend.whenGET(..regex_for_url_for_page1..).respond(window.fixtures.tasks_p1);
          $httpBackend.whenGET(..regex_for_url_for_page2..).respond(window.fixtures.tasks_p2);
        }
      };
    }]);
    

    在少数情况下,我们的数据与当前日期相关;例如“本周的任务”,所以我们在 register() 方法中处理捕获的数据。

    编辑 我们现在使用Rosie 为我们的模拟对象创建工厂。因此,对于预期的 json 响应,不再需要 CURLing 测试服务器。 index.html 不再加载这些 ".js" 固定装置,模拟看起来像:

    taskMocks.js

    /*global angular */
    angular.module('taskMocks', ['ngMockE2E']).
      factory('taskMocks', ['$httpBackend', function($httpBackend) {
      'use strict';
      var tasks_p1 = [ Factory.build('task'), Factory.build('task')], 
          tasks_p2 = [ Factory.build('task'), Factory.build('task')] 
      return {
        register: function() {
          $httpBackend.whenGET(..regex_for_url_for_page1..).respond(tasks_p1);
          $httpBackend.whenGET(..regex_for_url_for_page2..).respond(tasks_p2);
        }
      };
    }]);
    

    【讨论】:

    • 对不起,我什么都不懂。
    • 什么是“curl requests”,种子测试服务器是什么意思?
    • 对不起 - 试图给你足够的让你度过难关。 curl 是一个用于发出 Web 请求的命令行工具。
    • 此设置是否适用于业力?此外,“ourTestApp”是您的应用程序的名称还是用于测试的单独应用程序的名称,如下面的答案?
    • @wakandan 它与 karma 一起工作,“ourTestApp”是我们单独的测试应用模块的名称。
    【解决方案2】:

    要回答您的问题,是的,有一种方法可以在不涉及真实服务器的情况下做到这一点,您可以使用 $httpBackend 在 e2e 测试中模拟响应,但它不像在单元测试中模拟它们那么简单。您还需要在 index.html 中包含 angular-mocks.js 以及在 app.js 中包含“ngMockE2E”。

    How to mock an AJAX request?

    【讨论】:

    • 如果您要投反对票,请说明原因。问题是“如何在不涉及真实服务器的情况下测试 e2e?有没有办法使用 httpBackend 和 e2e 角度 API,我可以在其中使用 browser()、element()、select() 进行测试?”我相信我已经回答了!
    • 这就是我的做法,它的工作原理——所以这是我的赞成票
    猜你喜欢
    • 1970-01-01
    • 2021-05-06
    • 1970-01-01
    • 2015-09-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-04-23
    相关资源
    最近更新 更多