Доступ к данным $ http в тестах Protractor/E2E (AngularJS)

Question

У меня есть куча модульных тестов, которые идут хорошо, и я начал добавлять тесты Protractor E2E в свой проект. Я занимаюсь проверкой интерактивных элементов на странице, но у меня возникают проблемы с тестированием определенных данных, отправляемых из браузера.

Например, я хочу посмотреть, не нажимает ли определенная кнопка POST на определенную конечную точку.

У меня есть транспортир настроить, используя следующие:

/*globals global*/ 
module.exports = function() { 
    'use strict'; 
    var chai = require('chai') 
    , promised = require('chai-as-promised'); 

    global.expect = chai.expect; 

    chai.use(promised); 
}(); 

Я понимаю, как использовать транспортир для взаимодействия:

it('send data to the "log" endpoint when clicked', function() { 
    var repeater = element.all(by.repeater('finding in data.items')); 

    repeater.get(0).click().then(function() { 
     // $http expectation 
    }); 
}); 

Однако, я не знаю, как настроить $httpBackend в транспортир поэтому я могу захватить данные, которые отправляются в результате события .click(). Нужен ли мне дополнительный модуль?

В Karma/Mocha я бы просто:

beforeEach(module('exampleApp')); 

describe('logging service', function() { 
    var $httpPostSpy, LoggingService; 

    beforeEach(inject(function(_logging_, $http, $httpBackend) { 
     $httpPostSpy = sinon.spy($http, 'post'); 
     LoggingService = _logging_; 
     backend = $httpBackend; 
     backend.when('POST', '/api/log').respond(200); 
    })); 

    it('should send data to $http.post', function() [ 
     LoggingService.sendLog({ message: 'logged!'}); 
     backend.flush(); 
     expect($httpPostSpy.args[0][1]).to.have.property('message'); 
    }); 
}); 

Но я не знаю, как получить ссылку на $httpBackend и inject модулей в транспортир.

Answer 1

Тестирование кода в конце концов - это способ, аналогичный тому, как это будет делать конечный пользователь. Таким образом, проверка того, сделан ли удаленный запрос, должна быть проверена против видимого результата, такого как данные, загружаемые в div или сетку.

Все еще, если вы хотите проверить удаленные запросы, вы можете создать макетную настройку конца, используя модуль ngMockE2E, который содержит макет $htpBackend, аналогичный тому, который находится в ngMock.

Посмотрите документацию на $httpBackendhttps://docs.angularjs.org/api/ngMockE2E/service/ $ httpBackend

Answer 2

$ httpBackend для насмешливых ложного вызова на сервер. В тесте e2e вы обычно хотите на самом деле сделать звонок на сервер. Важно отметить, что большинство локаторов элементов в возврате транспортира promises.

Это означает, что с помощью этого кода ваш тест будет знать, дождаться ответа сервера, а затем утверждать, что текст является тэгом p - это правильные данные с сервера.

мои-file.spec.js

'use strict'; 

describe('The main view', function() { 
    var page; 

    beforeEach(function() { 
    browser.get('/index.html'); 
    page = require('./main.po'); 
    }); 

    it('should have resultText defined', function() { 
     expect(page.resultText).toBeDefined() 
    }) 


    it('should display some text', function() { 
    expect(page.resultText.getText() 
     .then()) 
     .toEqual("data-that-should-be-returned"); 
    }); 


}); 

мой-file.po.js

'use strict'; 

var MainPage = function() { 
    this.resultText = element(by.css('.result-text')); 


}; 

module.exports = new MainPage();