测试通过管道传输并使用异步管道的 Observable

Question

我有以下情况。我有一个 Observable，myObservable$在ngOnInit. 当发生这种情况时，可观察量被点击以复制最后一个值以用于其他目的。除此之外，可观察对象使用async管道绑定到我的 html 中的某些内容。如何使用茉莉花业力测试我的点击功能是否正确发生？

html:

<input [ngModel]="myObservable$ |async">

TS：

ngOnInit():void {
    this.myObservable$ = this.service.getThings()
      .pipe(tap(value=>this.otherProperty=value))
}

在这种情况下，我想测试一下它this.otherProperty是否确实具有价值。我该如何测试这个？

Answer 1

您应该将间谍安装到this.service.getThings()方法上并返回一个同步可观察量，其值立即可用。ngOnInit然后，您可以在组件的方法上订阅它。最后，做出断言以otherProperty检查值。有关详细信息，请参阅具有异步服务的组件

\n

例如使用angularv11+

\n

example.component.ts:

\n

import { Component, OnInit } from \'@angular/core\';\nimport { Observable } from \'rxjs\';\nimport { tap } from \'rxjs/operators\';\nimport { ExampleService } from \'./example.service\';\n\n@Component({\n  selector: \'app-example\',\n  template: \'<input [ngModel]="myObservable$ |async">\',\n})\nexport class ExampleComponent implements OnInit {\n  myObservable$: Observable<string>;\n  otherProperty: string;\n  constructor(private service: ExampleService) {}\n\n  ngOnInit() {\n    this.myObservable$ = this.service\n      .getThings()\n      .pipe(tap((value) => (this.otherProperty = value)));\n  }\n}\n

\n

example.service.ts

\n

import { Injectable } from \'@angular/core\';\nimport { of } from \'rxjs\';\n\n@Injectable()\nexport class ExampleService {\n  constructor() {}\n  getThings() {\n    return of(\'your real implementation\');\n  }\n}\n

\n

example.component.spec.ts:

\n

import { ComponentFixture, TestBed, waitForAsync } from \'@angular/core/testing\';\nimport { FormsModule } from \'@angular/forms\';\nimport { of } from \'rxjs\';\nimport { ExampleComponent } from \'./example.component\';\nimport { ExampleService } from \'./example.service\';\n\nfdescribe(\'65479995\', () => {\n  let fixture: ComponentFixture<ExampleComponent>;\n  let component: ExampleComponent;\n  let exampleServiceSpy: jasmine.SpyObj<ExampleService>;\n  beforeEach(\n    waitForAsync(() => {\n      exampleServiceSpy = jasmine.createSpyObj(\'ExampleService\', [\'getThings\']);\n      exampleServiceSpy.getThings.and.returnValue(of(\'fake implementation\'));\n\n      TestBed.configureTestingModule({\n        declarations: [ExampleComponent],\n        imports: [FormsModule],\n        providers: [{ provide: ExampleService, useValue: exampleServiceSpy }],\n      })\n        .compileComponents()\n        .then(() => {\n          fixture = TestBed.createComponent(ExampleComponent);\n          component = fixture.componentInstance;\n        });\n    })\n  );\n  it(\'should pass\', () => {\n    expect(component.otherProperty).toBeUndefined();\n    fixture.detectChanges();\n    expect(component.otherProperty).toBe(\'fake implementation\');\n    expect(exampleServiceSpy.getThings).toHaveBeenCalled();\n  });\n});\n

\n

测试结果：

\n

================================================================================\n\xe2\x9c\x94 Browser application bundle generation complete.\n\xe2\x9c\x94 Browser application bundle generation complete.\nChrome Headless 80.0.3987.87 (Mac OS 10.13.6): Executed 2 of 47 (skipped 45) SUCCESS (0.17 secs / 0.063 secs)\nTOTAL: 2 SUCCESS\n

\n

\n