Транспортир для Angular: дождаться всех вызовов API каждой страницы перед тестированием

Question

Что я хочу сделать, это протестировать свое приложение, перейдя на многие его страницы, но я хочу, чтобы при переходе от одной страницы к другой я хотел, чтобы все вызовы API были завершены перед выполнением действий (щелкните и т. д. и т. д. c ...) и, если вызов API завершился неудачно, прервите тест и вызовите ошибку.

Мой protractor.conf. js

const { SpecReporter } = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  onPrepare() {
    require('ts-node').register({
      project: 'e2e/tsconfig.e2e.json'
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
  }
};

РЕДАКТИРОВАТЬ: Пример:

import { AppPage } from './app.po';
import { element, by, browser } from 'protractor';

describe('my App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });

  it('check log in', () => {
    browser.waitForAngularEnabled(false);
    page.navigateTo(); 
    element(by.name('email')).sendKeys('...');
    element(by.name('password')).sendKeys('...');
    element(by.buttonText('Log in')).click(); 
    browser.sleep(5000);
    expect(element(by.id('tenantSelect')).isPresent()).toBe(true); 
  });
});

Таким образом, в основном этот тест является сценарий входа в мое приложение angular. Когда я нажимаю кнопку «войти», она вызывает вызовы API и переходит к другому компоненту. tenantSelect - это элемент моей DOM, который отображается, когда пользователь вошел в систему, но этот элемент отображается, даже если произошел сбой в одном из моих HTTP-запросов. Я хочу перехватить http-запросы во время процесса и провалить мой тест.

Answer 1

Что вам нужно, так это резольверы для ваших компонентов. См. Соответствующий Angular do c.

По сути, распознаватель обеспечивает завершение вызовов API (или любых других наблюдаемых) до загрузки компонента.

Внедрение обходного пути непосредственно в конфигурации Protractor, возможно, сделает ваши тесты зелеными, но при развертывании в prod ваше приложение не будет работать должным образом, и вы увидите много ошибок в журнале браузера.