E2E模拟$ httpBackend实际上并没有为我传递

Question

虽然我相信我按照这里的说明设置$ httpBackend将选定的请求传递给服务器,但它对我不起作用.

这是一个带有失败测试的Plunkr,它显示了我正在做的事情并在评论中解释了什么似乎出了问题.

我的洞察力表明,由于某种原因,模拟$httpBackend没有真实的内部副本,$httpBackend因此,当需要通过XHR请求时,它会将其传递给模拟$httpBackend.第二个调用抛出异常,因为它不知道如何处理请求.

对dtabuenc的回应

我很遗憾地记得你在中途测试的帖子.您确定了一系列重要的集成测试,它们介于单元测试和E2E测试之间.我站在那个中间地带.

我觉得你根本不是很讽刺.你的答案是完全合理的......或者如果不与" API reference/ngMockE2E/$ httpBackend " 的文本相矛盾,那将是合理的.我引用:

此实现可用于经由所述静态或动态响应响应whenAPI及其快捷方式(whenGET,whenPOST等)和任选地通过请求传递到实际$httpBackend用于特定请求(例如与某些远程的API交互或者从网络服务器获取模板) ...

[I] n端到端测试场景或在使用模拟替换真实后端api开发应用程序的情况下,通常需要某些类别的请求绕过模拟并发出真实的http请求 ....要使用此行为配置后端,请使用passThroughwhen 的请求处理程序而不是respond.[强调我的].

该文档没有提及$httpBackendJasmine环境中的E2E 使用问题.我想不出有理由排除它.如果有这样的理由,他们应该清楚说明.说真的,谁读了一个模拟组件,并没有预料到在测试环境中使用它？

" 将请求传递给真实$httpBackend的特定请求,例如与某些远程api进行交互 "正是我打算做的.除了该组件的非模拟版本之外,"真正的$ httpBackend"可能意味着什么呢？

我不明白你的说法

该ngMocksE2E模块设计用于执行实际角度应用程序的"服务器"端.

"服务器"这个词在该页面上出现了3次,而不是曾经暗示任何应用程序代码都会在"服务器"上执行.我不知道你在"服务器"方面执行的"实际角度应用"是什么意思.

文档非常明确,E2E $httpBackend不仅限于E2E测试.它也适用于" 正在开发应用程序并将真实后端api替换为模拟 "的情况.

这距离我使用真正的后端api 测试应用程序的情况只有半步之遥."

在我的场景中,SUT正在调用从服务器获取数据的组件.我的测试用于验证此依赖组件是否成功完成了对真实后端的此类请求,并将以预期方式检索或保存数据.这是一种集成测试,通过模拟后端的行为无法充分满足.

当然,我可以使用模拟XHR响应来测试(并进行测试)组件能够正确响应我预测的后端行为.这与验证组件对实际后端的行为做出适当响应是不同的......这可能随着应用程序的发展而变化,并以某种显着的方式偏离模拟的响应.

如果我知道如何将它交换到SUT的代码路径,我会考虑使用你的中途测试仪.我不.我认为发出XHR请求的组件是您无法访问的ngMidwayTester.但我知道如果必须的话,如何将真正的XHR帮助器堵塞到管道中.

这就是我现在所处的位置.

有人可以展示如何$httpBackend将某些请求传递到服务器 - 正如文档所宣称的那样 - 或者我将passThrough使用有效的XHR实现替换实现.

我更喜欢第一种选择.如果被推到第二个,我将在这里提供一个链接,以便分享我的需求的其他人和我对API文档的解释.

我缺少第三种方式吗？

Answer 1

我偶然发现了同样的问题,但是没有实现丰富的API或者替换原始的角度模拟,只需在以下帮助器中添加:

angular.module('httpReal', ['ng'])
    .config(['$provide', function($provide) {
        $provide.decorator('$httpBackend', function() {
            return angular.injector(['ng']).get('$httpBackend');
        });
    }])
    .service('httpReal', ['$rootScope', function($rootScope) {
        this.submit = function() {
            $rootScope.$digest();
        };
    }]);

它修补了两个阻止HTTP请求通过的问题:

1. 恢复原创$httpBackend;

2. 提供一种方法来满足请求,否则它们将在AngularJS的队列中等待摘要循环.

describe('my service', function() {
    var myService, httpReal;

    beforeEach(module('myModule', 'httpReal'));

    beforeEach(inject(function( _myService_, _httpReal_ ) {
        myService = _myService_;
        httpReal = _httpReal_;
    }));

    it('should return valid data', function(done) {
        myService.remoteCall().then(
            function(data) {
                expect(data).toBeDefined();
                done();
            }, function(error) {
                expect(false).toBeTruthy();
                done();
            });

        httpReal.submit();
    });
});

Answer 2

以下是$httpBackend对ngMockE2E模块中目的的解释.

该ngMockE2E模块根本没有设计,也不打算在茉莉花规格中使用.

在进行端到端测试时,测试有两个方面.一个是正​​在测试的角度应用程序,另一个是生活在Jasmine规范中的角度场景代码.

在E2E测试中,没有角度模块,或ng-mocks,或任何与茉莉花方面有关的东西(除了场景转轮).

该ngMocksE2E模块设计用于执行实际角度应用程序的"服务器"端.它的主要目的是使我们能够预先响应,以便集成级UI测试可以比每个页面实际进入服务器以获取JSON更快地进行.

当使用jasmine时ng-mocks,angular将始终用模拟后端替换$ httpBackend.添加ngMocksE2E模块时,它将无法获得任何"真实",$httpBackend并且正如您已经发现的那样,只需将模拟包装并在传递中委托给它.

您尝试编写的测试类似乎是不测试UI集成的测试,而是测试应用程序javascript和服务器集成.

这是完全合法的测试方式(在角度社区中称为"midwayTesting").您的问题是您使用的是错误的工具.

我会看看这个:

https://github.com/yearofmoo/ngMidwayTester

您将使用哪个而不是angular-mocks和angular.module()来促进我假设您想要进行的测试.

你可以在这里读更多关于它的内容:

http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-karma.html

(如果你已经在那里联系了道歉)

编辑:(以解决有关的其他评论)

你有一个真正的牛肉,因为文档不清楚,ngMockE2E不能在端到端测试设置的客户端(即业力/茉莉花)方面使用.解释像解释它们之类的东西并不是不合理的,但它并没有改变解释错误的事实.

如果在应用程序的服务器端而不是客户端使用时,ngMockE2E将通过请求.这意味着您仍然可以将某些难以模拟的请求作为预先设置的响应进行传递.客户端和服务器端的意思是端到端测试有两个目的.您有一个由标准应用程序服务器提供服务的应用程序,并且您拥有驱动应用程序的测试代码,该应用程序通常在Karma或其他测试运行程序中执行,该测试运行程序使用标准HTTP请求与正在执行的应用程序进行通信.另一个过程.

如果您查看文档以及如何设置,ngMockE2E您会注意到没有提及Jasmine,并且说明如何在真正的角度应用程序中进行设置:

myAppDev = angular.module('myAppDev', ['myApp', 'ngMockE2E']);
myAppDev.run(function($httpBackend) {
  phones = [{name: 'phone1'}, {name: 'phone2'}];

  // returns the current list of phones
  $httpBackend.whenGET('/phones').respond(phones);

  // adds a new phone to the phones array
  $httpBackend.whenPOST('/phones').respond(function(method, url, data) {
    phones.push(angular.fromJson(data));
  });
  $httpBackend.whenGET(/^\/templates\//).passThrough();
  //...
});

正如您在此示例中所看到的,他们正在模拟所有JSON数据指令,同时让它仍然从服务器获取模板.

为了从茉莉花中使用它,设置将完全不同,使用angular.mock.module('ngMockE2E')然后设置$httpBackend.whenGET()in beforeEach()而不是a module.run().

至于ngMidwayTester我把你联系到了,我相信这事实上是兼容的ngMockE2E.基本上ngMidwayTester取代angular.mock.module()并inject()使用它自己的实现.所以你可以像这样使用它:

beforeEach(function(){
  tester = ngMidwayTester('app', 'ngMockE2E');
  $http = tester.inject('$http');
  $httpBackend = tester.inject('$httpBackend');
  $rootScope = tester.inject('$rootScope');
});

这应该有效,因为您不再使用ngMock模块(使用时总是包含该模块angular.mock.module()).事情应该像你希望他们使用一样工作ngMidwayTester.