Транспортир, насмешливый бэкэнд с angular2 по запросу API

Я мог бы использовать некоторую помощь, чтобы найти решение для моей проблемы. Мне нужно смоделировать некоторые данные в моем приложении angular2, когда оно делает запрос к API, мне нужно сделать что-то вроде:

$httpBackend.when('GET', '/userbookings/').respond(my json file data);

Проблема в том, что все, что я могу найти в Google, используя $httpBackend, который используется для angularJS (angular 1).

Кто-нибудь знает, как я могу заставить это работать в моем тесте E2E (приложение является angular2 applciation)? Я пытаюсь сделать это как с транспортиром, так и с ночными часами (перепробовал обе платформы)

Спец тест:

describe('Protractor Mocking bookings for angular2 site', function() {

var ngMockE2E = require('ng-mock-e2e');

var $httpBackend = ngMockE2E.$httpBackend;

beforeEach(function() {
    ngMockE2E.addMockModule();
    ngMockE2E.addAsDependencyForModule('myApp');
    ngMockE2E.embedScript('/bower_components/angular-mocks/angular-mocks.js');
});


afterEach(function() {
    ngMockE2E.clearMockModules();
});

it('Inject mock data of bookings', function() {

    var EC = protractor.ExpectedConditions;
    var global = require('../bin/globals.js');

    // Bookings data in a json file which should be send as the response
    var mockData = require('../testData.json');

    browser.ignoreSynchronization = false;

    $httpBackend.when('GET', '/userbookings').respond(mockData);

    browser.get(global.so.enLoggedIn);

});

});

Этот тест не будет работать, потому что он использует некоторый angular1 способ. Показали, чтобы вы могли видеть, как выглядит мой тест.

Надеюсь, что кто-то может мне помочь, потому что очень трудно найти работу с angular2.

Источник

5 ответов

Protractor пока не поддерживает добавление фиктивных модулей для приложений Angular 2:

// TODO: support mock modules in Angular2. For now, error if someone
// has tried to use one.
if (self.mockModules_.length > 1) {
  deferred.reject('Trying to load mock modules on an Angular2 app ' +
      'is not yet supported.');
}

И я также создал проблему github для TODO, чтобы привлечь внимание:

Это, кстати, также означает, что protractor-http-mock не сработает, так как полагается на addMockModule внутренне. Я лично пробовал protractor-http-mock по образцу приложения Angular2, получил:

Ошибка: Попытка загрузки макетов модулей в приложении Angular2 пока не поддерживается.

То же самое верно для http-backend-proxy а также httpbackend пакеты.

Я полагаю, что, хотя проблема еще не устранена, вам следует рассмотреть возможность запуска прокси-сервера, который будет действовать как своего рода "внешняя насмешка" по отношению к вашему бэкэнду API, лично этого не делали, подробнее см. На:

Источник

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

Есть несколько шагов в зависимости от того, что вы пытаетесь выполнить. Я работал над тестами e2e, так что это обрисует в общих чертах это решение.

Сначала обновите ваш angular.json с помощью конфигов, которые специфичны для вашей тестовой среды (прямо над "serve"):

"serve-e2e": {
    builder: '@angular-devkit/build-angular:dev-server',
    options: {
        browserTarget: '{APP_NAME}:build'
    },
    configurations: {
        test: {
            browserTarget: '{APP_NAME}:build:test'
        }
    }
};

Затем обновите существующую конфигурацию e2e, обновив devServerTarget с вашим новым конфигом:

"devServerTarget": "{APP_NAME}:serve-e2e:test"

Затем я создал новый набор специфичных для среды файлов, который называется mock-service-mappingИтак, в папке моей среды у меня теперь есть:

mock-service-mapping.ts
mock-service-mapping.test.ts

В этих файлах я храню отображение моих реальных и фиктивных сервисов:

import { RealDataService } from '../app/lib/services/real-data.service';

export const mockServiceMapping = {
     dataServiceClass: RealDataService
};

Теперь нам нужно сделать их специфичными для окружающей среды. Обновите файл angular.json, чтобы настроить правильные сопоставления для различных сред:

"test": {
    fileReplacements: [
        {
            replace: 'src/environments/environment.ts',
            with: 'src/environments/environment.test.ts'
        },
        {
            replace: 'src/environments/mock-service-mapping.ts',
            with: 'src/environments/mock-service-mapping.test.ts'
        }
    ]
};

И последний кусок магии. В объявлениях вашего модуля настройте провайдеров так, чтобы они извлекали класс из ваших новых файлов фиктивной среды.

{ provide: DataService, useClass: mockServiceMapping.dataServiceClass }

И вуаля, фиктивные сервисы, нет библиотек, нет беспорядка, нет дополнительного скомпилированного кода, и довольно просто!

Источник

Закончилось использованием json-сервера, так как поддержка по-прежнему отсутствует addMockModule для угловых 2

Источник

Так как в angular 2 нет поддержки для макетов модулей, я сделал небольшой плагин для транспортира, который позволяет использовать макет ajax-запроса. Вы можете найти его здесь: https://github.com/krisboit/protractor-xmlhttprequest-mock

Документации пока нет, но вы можете найти примеры тестов. Я надеюсь, что это поможет вам.

Источник

Лично я использовал плагин ng-apimock для имитации всех сетевых вызовов на сервер с прокси.

Он работает очень хорошо и прост в настройке. Просто следуйте настройке приложения Angular здесь

Источник
Другие вопросы по тегам