如何对 Service 单元测试 ?

恭喜发财dife

如何对 Service [url=]单元测试[/url] ?
　　使用 HttpTestingController 将大幅简化单元测试
　　Contents
　　1.Version
　　2.User Story
　　3.Task
　　4.Architecture
　　5.Implementation
　　1.PostService
　　2.AppComponent
　　6.Conclusion
　　7.Sample Code
　　8.Reference
　　凡与显示相关逻辑，我们会写在 component；凡与资料相关逻辑，我们会写在 service。而
service 最常见的应用，就是透过HttpClient?存取 API。
　　对于 service 单元测试而言，我们必须对?HttpClient?加以隔离；而对 component 单元测试
而言，我们必须对?service?加以隔离，我们该如何对 service 与 component 进行单元测试呢？
　　Version
　　Angular CLI 1.6.2
　　Node.js 8.9.4
　　Angular 5.2.2
　　User Story

　　●Header 会显示Welcome to app!
　　●程序一开始会显示所有 post
　　●按Add Post会呼叫POST API 新增 post
　　●按List Posts会呼叫GET API 回传 所有 post
　　Task
　　●目前有PostService使用HttpClient存取 API，为了对?PostService?做?单元测试，必须对
HttpClient加以隔离
　　●目前有AppComponent使用PostService， 为了对?AppComponent?做?单元测试，必须
对PostService加以隔离
       Architecture

　　●AppComponent负责新增 post与显示 post?的界面显示；而PostService?负责 API 的串接
　　●根据依赖反转原则，AppComponent不应该直接相依于PostService，而是两者相依于
interface
　　●根据界面隔离原则，AppComponent只相依于它所需要的 interface，因此以
AppComponent的角度订出PostInterface，且PostService必须实作此 interface
　　●因为AppComponent与PostService都相依于PostInterface，两者都只知道PostInterface?
而已，而不知道彼此，因此AppComponent与PostService彻底解耦合
　　●透过 DI 将实作PostInterface的PostService注入到AppComponent，且将?HttpClient注
入到PostService
　　Implementation
　　AppComponent与?PostService的实作并非本文的重点，本文的重点在于实作?
AppComponent与PostService的单元测试部分。
　　PostService

　　post.service.spec.ts

1.   import { TestBed } from '@angular/core/testing';
   
2. 　　import { PostService } from './post.service';
   
3. 　　import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
   
4. 　　import { PostInterfaceToken } from '../interface/injection.token';
   
5. 　　import { Post } from '../../model/post.model';
   
6. 　　import { environment } from '../../environments/environment';
   
7. 　　import { PostInterface } from '../interface/post.interface';
   
8. 　　describe('PostService', () => {
   
9. 　　  let postService: PostInterface;
   
10. 　　  let mockHttpClient: HttpTestingController;
    
11. 　　  beforeEach(() => {
    
12. 　　    TestBed.configureTestingModule({
    
13. 　　      imports: [
    
14. 　　        HttpClientTestingModule
    
15. 　　      ],
    
16. 　　      providers: [
    
17. 　　        {provide: PostInterfaceToken, useClass: PostService}
    
18. 　　      ]
    
19. 　　    });
    
20. 　　    postService = TestBed.get(PostInterfaceToken, PostService);
    
21. 　　    mockHttpClient = TestBed.get(HttpTestingController);
    
22. 　　  });
    
23. 　　  it('should be created', () => {
    
24. 　　    expect(PostService).toBeTruthy();
    
25. 　　  });
    
26. 　　  it(`should list all posts`, () => {
    
27. 　　    /** act */
    
28. 　　    const expected: Post[] = [
    
29. 　　      {
    
30. 　　        id: 1,
    
31. 　　        title: 'Design Pattern',
    
32. 　　        author: 'Dr. Eric Gamma'
    
33. 　　      }
    
34. 　　    ];
    
35. 　　    postService.listPosts$().subscribe(posts => {
    
36. 　　      /** assert */
    
37. 　　      expect(posts).toEqual(expected);
    
38. 　　    });
    
39. 　　    /** arrange */
    
40. 　　    const mockResponse: Post[] = [
    
41. 　　      {
    
42. 　　        id: 1,
    
43. 　　        title: 'Design Pattern',
    
44. 　　        author: 'Eric Gamma'
    
45. 　　      }
    
46. 　　    ];
    
47. 　　    mockHttpClient.expectOne({
    
48. 　　      url: `${environment.apiServer}/posts`,
    
49. 　　      method: 'GET'
    
50. 　　    }).flush(mockResponse);
    
51. 　　  });
    
52. 　　  it(`should add post`, () => {
    
53. 　　    /** act */
    
54. 　　    const expected: Post = {
    
55. 　　      id: 1,
    
56. 　　      title: 'OOP',
    
57. 　　      author: 'Sam'
    
58. 　　    };
    
59. 　　    postService.addPost(expected).subscribe(post => {
    
60. 　　      /** assert */
    
61. 　　      expect(post).toBe(expected);
    
62. 　　    });
    
63. 　　    /** arrange */
    
64. 　　    mockHttpClient.expectOne({
    
65. 　　      url: `${environment.apiServer}/posts`,
    
66. 　　      method: 'POST'
    
67. 　　    }).flush(expected);
    
68. 　　  });
    
69. 　　  afterEach(() => {
    
70. 　　    mockHttpClient.verify();
    
71. 　　  });
    
72. 　　});

复制代码

14行

1. TestBed.configureTestingModule({
   
2. 　　  imports: [
   
3. 　　    HttpClientTestingModule
   
4. 　　  ],
   
5. 　　  providers: [
   
6. 　　    {provide: PostInterfaceToken, useClass: PostService}
   
7. 　　  ]
   
8. 　　});

复制代码

Angular 有 module 观念，若使用到了其他 module，必须在imports设定；若使用到 DI，则必须在providers设定。
　　若只有一个 module，则在AppModule设定。
　　但是单元测试时，并没有使用AppModule的设定，因为我们可能在测试时使用其他替代 module，也可能自己实作 fake 另外 DI。
　　Angular 提供了TestBed.configureTestingModule()，让我们另外设定跑测试时的imports与providers部分。

15行

1. 　imports: [
   
2. 　　  HttpClientTestingModule
   
3. 　　],

复制代码

原本HttpClient使用的是HttpClientModule，这会使得HttpClient真的透过网络去打 API，
这就不符合单元测试隔离的要求，因此 Angular 另外提供HttpClientTestingModule取代
HttpClientModule。
     18 行

1. 　providers: [
   
2. 　　  {provide: PostInterfaceToken, useClass: PostService}
   
3. 　　]

复制代码

由于我们要测试的就是PostService，因此PostService?也必须由 DI 帮我们建立。
　　但因爲?PostService?是基于PostInterface?建立，因此必须透过PostInterfaceToken?
mapping 到?PostService。
      23 行

1. 
   
2. postService = TestBed.get(PostInterfaceToken, PostService);
   
3. 　　mockHttpClient = TestBed.get(HttpTestingController);

复制代码

由providers设定好 interface 与 class 的 mapping 关系后，我们必须透过 DI 建立
postService与mockHttpClient。
　　其中HttpTestingController相当于 mock 版的?HttpClient，因此取名为mockHttpClient。
　　TestBed.get() 其实相当于new，只是这是藉由 DI 帮我们new?而已

恭喜发财dife

31 行

1. 　it(`should list all posts`, () => {
   
2. 　　  /** act */
   
3. 　　  const expected: Post[] = [
   
4. 　　    {
   
5. 　　      id: 1,
   
6. 　　      title: 'Design Pattern',
   
7. 　　      author: 'Dr. Eric Gamma'
   
8. 　　    }
   
9. 　　  ];
   
10. 　　  postService.listPosts$().subscribe(posts => {
    
11. 　　    /** assert */
    
12. 　　    expect(posts).toEqual(expected);
    
13. 　　  });
    
14. 　　  /** arrange */
    
15. 　　  const mockResponse: Post[] = [
    
16. 　　    {
    
17. 　　      id: 1,
    
18. 　　      title: 'Design Pattern',
    
19. 　　      author: 'Eric Gamma'
    
20. 　　    }
    
21. 　　  ];
    
22. 　　  mockHttpClient.expectOne({
    
23. 　　    url: `${environment.apiServer}/posts`,
    
24. 　　    method: 'GET'
    
25. 　　  }).flush(mockResponse);
    
26. 　　});

复制代码

直接对PostService.listPost$()测试，由于listPost$()?回传?Observable，因此expect()必须写在subscribe()内。
　　将预期的测试结果写在expected内。
　　一般Observable会在subscribe()后执行，不过在HttpTestingController的设计里，
subscribe()会在flush()才执行，稍后会看到flush()，所以此时并还没有执行expect()测试
　　46 行

1. /** arrange */
   
2. 　　const mockResponse: Post[] = [
   
3. 　　  {
   
4. 　　    id: 1,
   
5. 　　    title: 'Design Pattern',
   
6. 　　    author: 'Eric Gamma'
   
7. 　　  }
   
8. 　　];
   
9. 　　mockHttpClient.expectOne({
   
10. 　　  url: `${environment.apiServer}/posts`,
    
11. 　　  method: 'GET'
    
12. 　　}).flush(mockResponse);

复制代码

之前已经使用HttpClientTestingModule取代HttpClient，HttpTestingController取代
HttpClient，这只能确保呼叫 API 时不用透过网络。
　　还要透过expectOne()设定要 mock 的 URI 与 action，之所以取名为?expectOne()，就是
期望有人真的呼叫这个 URI一次，且必须为GET，若没有呼叫这个 URI 或者不是GET，将造成单元
测试红灯。
　　这也是为什么HttpTestingController的设计是act与assert要先写，最后再写?arrange，因为
HttpTestingController本身也有assert功能，必须有act，才能知道assert?URI 与 GET 有没有错误。
　　最后使用flush()设定 mock 的回传值，flush英文就是冲水，当HttpTestingController将
mockResponse冲出去后，才会执行subscribe()内的expect()测试。
　　也就是说若你忘了写flush()，其实单元测试也会?绿灯，但此时的绿灯并不是真的测试通过，
而是根本没有执行到subscribe()内的expect()。
　　81 行

1. afterEach(() => {
   
2. 　　  mockHttpClient.verify();
   
3. 　　});

复制代码

实务上可能真的忘了写expectOne()与flush()，导致subscribe()内的expect()根本没跑到而
造成单元测试绿灯，因此必须在每个单元测试跑完补上?mockHttpClient.verify()，若有任何 API
request 却没有经过expectOne()?与?flush()?测试，则?verify()?会造成单元测试红灯，借以弥补
忘了写?expectOne()?与?flush()?的人为错误。
　　Q : 我们在?listPosts$()?的单元测试到底测试了什么 ?
　　若 service 的 API 与 mock 不同，会出现单元测试红灯，可能是 service 的 API 错误
　　若 service 的 action 与 mock 不同，会出现单元测试红灯，可能是 service 的 action 错误
　　若 service 的 response 与 expected 不同，可能是 service 的逻辑错误
　　61 行

1. it(`should add post`, () => {
   
2. 　　    /** act */
   
3. 　　    const expected: Post = {
   
4. 　　      id: 1,
   
5. 　　      title: 'OOP',
   
6. 　　      author: 'Sam'
   
7. 　　    };
   
8. 　　    postService.addPost(expected).subscribe(post => {
   
9. 　　      /** assert */
   
10. 　　      expect(post).toBe(expected);
    
11. 　　    });
    
12. 　　    /** arrange */
    
13. 　　    mockHttpClient.expectOne({
    
14. 　　      url: `${environment.apiServer}/posts`,
    
15. 　　      method: 'POST'
    
16. 　　    }).flush(expected);
    
17. 　　  });

复制代码

再来谈谈如何测试POST。
　　62 行

1. /** act */
   
2. 　　const expected: Post = {
   
3. 　　  id: 1,
   
4. 　　  title: 'OOP',
   
5. 　　  author: 'Sam'
   
6. 　　};
   
7. 　　postService.addPost(expected).subscribe(post => {
   
8. 　　  /** assert */
   
9. 　　  expect(post).toBe(expected);
   
10. 　　});

复制代码

直接对?PostService.addPost()?测试，由于addPost()?回传?Observable，因此expect()?必
须写在?subscribe()?内。
　　将预期的测试结果写在?expected?内。
　　74 行

1. /** arrange */
   
2. 　　mockHttpClient.expectOne({
   
3. 　　  url: `${environment.apiServer}/posts`,
   
4. 　　  method: 'POST'
   
5. 　　}).flush(expected);

复制代码

因为要 mock?POST，因此method?部分改为POST，其他部分与?GET?部分完全相同。
　　Q : 我们在?addPost()?到底测试了什么 ?
　　●若 service 的 API 与 mock 不同，会出现单元测试红灯，可能是 service 的 API 错误
　　●若 service 的 action 与 mock 不同，会出现单元测试红灯，可能是 service 的 action 错误
　　●若 service 的 response 与 expected 不同，可能是 service 的逻辑错误

　　使用 Wallaby.js 通过所有 service 单元测试。