Angular 单元测试用例 promise

Question

我正在尝试为 Promise 内的服务编写一个单元测试用例，我可以执行 promise 调用，但无法执行内部服务，此外在代码覆盖率报告中，它显示代码未涵盖 ZB321DE3BDC299EC807E9F795D7 行。 请告诉我我在哪里做错了。

下面的文件是我们的 usercomponent.component.ts。

             import {Component, OnInit} from '@angular/core';
             import {UserService} from "../services/user.service";

             @Component({
                 selector: 'user',
                 templateUrl: './user.component.html',
                styleUrls: ['./user.component.css']
              })

        export class UserComponent implements OnInit {

          constructor(private userService: UserService) {}
          
          getToken(){

             return new Promise(function(resolve,reject){
                if(this.token){
                    resolve(this.token);
                 }else{
                          this.userService.getToken().subscribe((data)=>{
                            resolve(data.token); 
                         },
                        error: (error) => {
                             reject(error)
                         },
                         )
                     }
              })

             }
           }

下面的文件是我们的 user.component.spec.ts 文件

          import {UserComponent} from './user.component';
          import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
          import {of} from 'rxjs';
          import {UserService} from "../services/user.service";
          
          class MockUserClass{
               getToken(){ return new Observable()}
           }

          describe('UserComponent', () => {
              const fixture;
              const component;

              beforeEach(
                  wairForAsync(()=>{
                      Test.Bed.configureTestingModule({
                          declarations: [UserComponent],
                          providers: [{{provide:UserService,useClass:MockUserClass}]
                       }).compileComponents();
                  });
              )

              beforeEach(()=>{
                 fixture = TestBed.createComponent(UserComponent);
                 component = fixture.componentInstance;
                 fixture.detectChanges();
              })

              it(`should call getToken method`,fakeAsync(()=>{
              const spy =  spyOn(component,'getToken').and.returnValue(Promise.resolve('token'));
              const spyOnService = sppyOn(component.userService, 'getToken').and.returnValue(of(mockData))
              component.getToken();
              tick();
              expect(spy ).toHaveBeenCalled();
              expect(spyOnService).toHaveBeenCalled();
              }));
          });

Answer 1

你在做间谍：
const spy = spyOn(component,'getToken').and.returnValue(Promise.resolve('token')); .
然后，当您调用此方法时，它将返回您的假 promise。 所以它不会调用你的服务，它只会返回你模拟的 promise。 所以这段代码没有任何意义：

component.getToken();
expect(spy).toHaveBeenCalled();

expect()语句将始终为真，因为您手动调用它。 首先尝试删除此间谍：

          // const spy =  spyOn(component,'getToken').and.returnValue(Promise.resolve('token'));
          const spyOnService = sppyOn(component.userService, 'getToken').and.returnValue(of(mockData))
          component.getToken();
          tick();
          // expect(spy ).toHaveBeenCalled();
          expect(spyOnService).toHaveBeenCalled();