在 protractor e2e 测试中模拟 Angular HttpClient

Question

我的应用程序在页面加载时立即对我的后端进行 http 调用。 我的 e2e 测试失败，因为我的 ci 管道中没有运行后端。

我尝试在 http 调用上使用 rxjs catchError 管道运算符

我尝试将整个 http 调用包装在 try / except 块中

我仍然在开发控制台中出现错误（这导致 e2e 测试失败）

我想知道如何为 protractor 测试提供模拟HttpClient ？

实际Http来电

return this.http.get<any>( url ).subscribe(...)

（ this.http是 Angular 的HttpClient的一个实例）

规格文件：

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

describe( 'workspace-project App', () => {
  let page: AppPage;

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

  it( 'should display login page', () => {
    page.navigateTo();
    expect( page.getLoginTitleText() ).toEqual( 'Welcome to\nApp\nClick below to sign in with Google' );
  } );

  afterEach( async () => {
    // Assert that there are no errors emitted from the browser
    const logs = await browser.manage().logs().get( logging.Type.BROWSER );
    expect( logs ).not.toContain( jasmine.objectContaining( {
      level: logging.Level.SEVERE,
    } as logging.Entry ) );
  } );
} );

量角器页面 object 文件 ( app.po )

import { browser, by, element } from 'protractor';

export class AppPage {
  public navigateTo() {
    return browser.get( browser.baseUrl ) as Promise<any>;
  }

  public getLoginTitleText() {
    return element( by.css( 'app-root app-login div.login-wrapper form.login section.title' ) )
      .getText() as Promise<string>;
  }
}

开发控制台中的错误：

Answer 1

我只是在回答关于 mocking Angular HTTPClient 的问题。 假设您有 Angular 版本 4 或更高版本，则有一个用于 mocking httpclient 的内置测试模块，称为 HttpClientTestingModule，您可以从 Testbed 获得。

import { AppPage } from './app.po';
import { browser, logging } from 'protractor';
//add these imports:
import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

describe( 'workspace-project App', () => {
  let page: AppPage;
  var httpMock: HttpTestingController;

  beforeEach( () => {
      TestBed.configureTestingModule({
      imports: [
      HttpClientTestingModule
      ]
    });
    page = new AppPage();
    httpMock = TestBed.get(HttpTestingController);
  } );

//add async keyword to test
//mock up the get request by recreating the URL
  it( 'should display login page', async () => {
    let urlPrefix = window.location.protocol + '//' + window.location.hostname + ':' + window.location.port;
    let url = urlPrefix + 'infoo';
    let navigateTo_call = page.navigateTo();
    const request = httpMock.expectOne(url); 
    navigateTo_call.then(res => { 
   //do your checks here
   expect( page.getLoginTitleText() ).toEqual( 'Welcome to\nApp\nClick below to sign in with Google' );
  });
   request.flush("a mock response object");
    
  } );

  afterEach( async () => {
    // Assert that there are no errors emitted from the browser
    const logs = await browser.manage().logs().get( logging.Type.BROWSER );
    expect( logs ).not.toContain( jasmine.objectContaining( {
      level: logging.Level.SEVERE,
    } as logging.Entry ) );
  } );
} );

Answer 2

我发现个人有用的是使用proxy.conf.js来指向前端的资产，但使用重写的路径。

代码中有一个基于spec === 'user-1'的条件响应。

const PROXY_CONFIG = [
  {
    context: ['/api'],
    target: 'http://localhost:4200',
    secure: false,
    bypass: function (req) {
      let spec = '';
      try {
        const url = new URL(req.headers.referer);
        spec = url.searchParams.get('e2e-spec');
      } catch (e) {
        // nothing to do
      }

      if (req.method === 'GET' && req.path === '/api') {
        return '/e2e-api/index.json';
      }
      if (req.method === 'POST' && req.path === '/api/gql') {
        req.method = 'GET';
        if (spec === 'user-1') {
          return '/e2e-api/gql-user-simple.json';
        }
        return '/e2e-api/gql-empty.json';
      }
    },
    logLevel: 'debug',
  },
];

module.exports = PROXY_CONFIG;

为此，我们需要在angular.json中添加一个e2e配置：

            "e2e": {
              "fileReplacements": [
                {
                  "replace": "apps/ct-frontend/src/environments/environment.ts",
                  "with": "apps/ct-frontend/src/environments/environment.e2e.ts"
                }
              ],
              "assets": ["apps/ct-frontend/src/e2e-api"]
            }

这是一个带有实现的仓库：

• 代理-e2e.conf.js
• e2e 资产
• angular.json

您可以下载它并像这样运行 e2e 测试：

• npm install
• npm run e2e ct-frontend-e2e

检查它如何处理虚假响应。