angularjs - 如何在 Protractor 测试中验证 $httpBackend 模拟期望？

Question

我正在为 REST API 开发前端。我使用 Protractor 进行端到端测试，并模拟出 API，因为我希望能够单独测试前端。

这是我得到的一个简单测试:

describe('partner', function () {
    it('should list partners', function () {
        var page = new PartnerListPage();
        var httpBackendMock = function () {
            angular.module('httpBackendMock', ['ngMockE2E'])
                .run(function ($httpBackend) {
                    $httpBackend.whenGET('/api/partners').respond(200, {
                        _embedded: {
                            partners: [
                                {
                                    firstName: 'Elnur',
                                    lastName: 'Abdurrakhimov'
                                }
                            ]
                        }
                    });
                    $httpBackend.whenGET(/.*/).passThrough();
                });
        };
        browser.addMockModule('httpBackendMock', httpBackendMock);

        page.open();
        expect(page.isOpen()).toBeTruthy();
        expect(page.getPartner(0).firstName).toBe('Elnur');
        expect(page.getPartner(0).lastName).toBe('Abdurrakhimov');
    });
});

它所做的基本上是创建一个后端模拟，以便它返回我想要的东西。

除了一件事，一切都很好。我希望能够在测试结束时调用以下方法:

$httpBackend.verifyNoOutstandingExpectation();
$httpBackend.verifyNoOutstandingRequest();

我想这样做的原因是为了验证模拟是否收到了预期的请求。我提供的测试没有多大意义，但假设我想验证当我提交某个表单时，特定的 POST正在执行具有特定数据的请求。我想对后端模拟本身进行验证，以便将我的测试与输出该 POST 的响应结果隔离开来。请求，因为这将在另一个测试中进行测试。

我如何访问相同的 $httpBackend httpBackendMock 中正在使用的实例我已添加到 browser ?

据我了解，Protractor 和应用程序本身在不同的进程中运行。因此我无法访问 $httpBackend直接和我在单元测试中一样。

Answer 1

您的应用程序在浏览器和 Protractor 中的单独进程中执行。所以你是对的，你不能直接访问浏览器上下文。

幸运的是， Protractor 为 execute javascript in the browser 提供了一种机制。 .我猜你可以使用这种机制来访问 $httpBackendMock .

browser.executeAsyncScript(function() {
  var $httpBackend = angular.injector(['httpBackendMock']).get('$httpBackend');
  $httpBackend.verifyNoOutstandingExpectation();
  $httpBackend.verifyNoOutstandingRequest();
});

注意:代码改编自 this answer .

另一种选择可能是公开“检查 URL”

$httpBackend.whenGET('/api/check').respond(function() {
    $httpBackend.verifyNoOutstandingExpectation();
    $httpBackend.verifyNoOutstandingRequest();
    return [200];
});

并在您的测试中使用它:

browser.get('/api/check');