Question

我在Angular 7中编写单元测试用例，在此过程中，创建单元陷入了困境测试服务变量“ isLoading”。

这是我的应用程序组件html文件：

<router-outlet></router-outlet>


<div *ngIf="guestUserService.isLoading | async"  class="loaderdiv">
  <mat-spinner class="loader"></mat-spinner>
</div>

服务文件：

export class GuestUserService {

  public isLoading: any = new BehaviorSubject(false);

}

单元测试用例：

 fdescribe('AppComponent', () => {
         let guestUserService: any;
         let guestUserServiceSpy: any;

          beforeEach(async(() => {
            guestUserService = jasmine.createSpyObj('GuestUserService', ['isLoading']);
            TestBed.configureTestingModule({
              providers: [
                { provide: GuestUserService, useValue: guestUserService }]
            }).compileComponents();
}));

 it('should render loader if isLoading true', () => {
    guestUserServiceSpy = guestUserService.isLoading.and.returnValue(true);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(guestUserService).toBeDefined();
    expect(guestUserServiceSpy).toBeDefined();
    expect(guestUserService.isLoading).toBeTruthy();
    expect(fixture.debugElement.query(By.css('.loader'))).toBeDefined();
    expect(compiled.querySelector('mat-spinner')).toBeTruthy();
  });

获取错误：

错误：InvalidPipeArgument：'function（）{return fn.apply（this，论点）; }”用于管道“ AsyncPipe”

是否有任何适当的方法可以为这种情况创建单元测试用例。

Answer 1

有几个问题。

首先，您要使用any类型射击自己。这样，编译器让您执行没有意义的事情。而且您还会使代码更难为自己阅读。 isLoading属性应该是Observable<boolean>，因为这是模板所期望的。因此，请使用正确的类型，而不要使用any。

第二行，

jasmine.createSpyObj('GuestUserService', ['isLoading'])

创建一个具有功能的对象，名为isLoading。但是您的实际服务有一个名为property of type的{{1}} Observable``，这就是您的模板所期望的，因此会出现错误：异步管道需要一个可观察的输入，但是您正在传递它{{1 }}，它是测试中的功能，而不是可观察的（请参阅使用正确的类型如何帮助您推断出所得到的错误？）。

顺便说一句，此函数返回布尔值true，而不是isLoading

您可以定义一个简单的对象，而不用使用茉莉花来创建假服务：

isLoading

或者您可以使用茉莉花，但使用其Observable<boolean>函数。

或者您可以将const fakeService = { isLoading: of(true) }用作isLoading的类型，从而使用真实的服务实现并简单地使主题发出真实的声音。

错误：InvalidPipeArgument：'function（）{return fn.apply（this，arguments）; }”用于管道“ AsyncPipe” Angular 7单元测试

1 个答案: