Angular服务测试

import { TestBed } from ‘@angular/core/testing’;
import { DesignService, PBoxTitle } from ‘./design.service’;
import { HttpToolsService, ResultData } from ‘…/public/services/http-tools.service’;
import { HttpClientTestingModule, HttpTestingController } from ‘@angular/common/http/testing’;
import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from ‘@angular/core’;
import { MaterialModule } from ‘…/material-module’;
import { RouterTestingModule } from ‘@angular/router/testing’;
import { HttpErrorResponse, HttpClient } from ‘@angular/common/http’;
import { defer } from ‘rxjs’;
import { Data } from ‘@angular/router’;
import { environment } from ‘src/environments/environment.prod’;
import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;

describe(‘DesignService’, () => {

let httpClient: HttpClient;
let httpTestingController: HttpTestingController;
let service: DesignService;
let testId = ‘45ca7e18-b914-4cca-8e49-81349d4adf7e’;
let testUrl = ${environment.serverURL}/api/Design/NewPBoxTitle?pBoxID=45ca7e18-b914-4cca-8e49-81349d4adf7e;
let httpClientSpy: { get: jasmine.Spy };

const testData: PBoxTitle = {
pBoxTitleId: ‘11’, //铭牌表
pBoxId: ‘11’, //配电柜表
factoryNumbers: ‘11’, //出厂编号
titles: ‘11’, //柜号
startNumber: 11, //开始台数
endNumber: 11, //结束台数
numbert: 11, //总台数
};

const data: ResultData = {
data: {
pBoxTitleId: ‘11’, //铭牌表
pBoxId: ‘11’, //配电柜表
factoryNumbers: ‘11’, //出厂编号
titles: ‘11’, //柜号
startNumber: 11, //开始台数
endNumber: 11, //结束台数
numbert: 11, //总台数
},
isSuccess: true,
};

const emsg = ‘deliberate 404 error’;

beforeEach(() => {
TestBed.configureTestingModule({
imports: [HttpClientTestingModule, MaterialModule, RouterTestingModule, BrowserAnimationsModule], //注入依赖module
providers: [HttpToolsService], //注入依赖服务
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA] //浅层测试
});

httpClient = TestBed.get(HttpClient);
httpTestingController = TestBed.get(HttpTestingController);
service = TestBed.get(DesignService);

});

//Test Begin
/**检测服务是否可以创建 */
it(‘should be created’, () => {
expect(service).toBeTruthy();
});

/**具体服务接口测试(简单版) */
// it('NewPBoxTitle should return expected arguments ', () => {

// service.NewPBoxTitle(‘11’).subscribe(res => {
// expect(res.data).toBe(testData);
// }, fail);

// });

it(‘can test HttpClient.get’, () => {

// Make an HTTP GET request
service.NewPBoxTitle(testId).subscribe(res => {
  // console.log(res);
  // When observable resolves, result should match test data
  expect(res.data).toEqual(testData);
}, fail);


// The following `expectOne()` will match the request's URL.
// If no requests or multiple requests matched that URL
// `expectOne()` would throw.
const req = httpTestingController.expectOne(testUrl);

// Assert that the request is a GET.
expect(req.request.method).toEqual('GET');

// Respond with mock data, causing Observable to resolve.
// Subscribe callback asserts that correct data was returned.
req.flush(data);

// Finally, assert that there are no outstanding requests.
httpTestingController.verify();

});

/**404 error */
it(‘can test for 404 error’, () => {

httpClient.get<PBoxTitle>(testUrl).subscribe(

  data => fail('should have failed with the 404 error'),
  (error: HttpErrorResponse) => {
    expect(error.status).toEqual(404, 'status');
    expect(error.error).toEqual(emsg, 'message');
    console.log(data);
    console.log(error);
  }
);

const req = httpTestingController.expectOne(testUrl);

// Respond with mock error
req.flush(emsg, { status: 404, statusText: 'Not Found' });

});

/**404 error */
// it(‘should return an error when the server returns a 404’, () => {
// const errorResponse = new HttpErrorResponse({
// error: ‘test 404 error’,
// status: 404, statusText: ‘Not Found’
// });

// service.NewPBoxTitle(testId).subscribe(
// heroes => fail(‘expected an error, not heroes’),
// error => expect(error.message).toContain(‘test 404 error’)
// );
// });
});

// export function asyncError(errorObject: any) {
// return defer(() => Promise.reject(errorObject));
// }

// export function asyncData(data: T) {
// return defer(() => Promise.resolve(data));
// }

总结：
Angular单元测试的宗旨就是封闭测试拜托对后端接口依赖，实现测试
http请求服务：
“缺点”：单元测试对接口的测试是模拟接口服务，不会往真实服务器发请求，是封闭的，

实现方式：创建接口返回数据，调用flush函数模拟返回结果，通过expect（）toEqual（）比较 预期值与输出结果是否一致

优点：可以测试接口发生错误，有没有意识去写错误处理方法，错误处理是不是预期的效果
个人见解接口的测试 侧重开发功能代码之前的一些准备工作，设计接口。
开发过程中，ts提示已经可以有效避免错误，

目前好处：1、后端接口没有时可以测试前端代码执行情况（收益不大）
2、 添加新功能时，您可以运行测试以确保不会破坏应用程序的任何其他部分。

组件测试：
需要引入很多子依赖，如服务，module，组件等，处理报错比较麻烦，
可以对业务流程提供很好的支持，如按钮点击是否是我们想要的结果，页面是否是我们想要显示的内容，函数是不是按照我们想要的方式执行；但是同样的需要花费时间去写测试逻辑，有一个按钮就要写一个测试