Angular 如何將 Subject() 測試為 Observable

Question

我的問題是我不知道如何在訂閱主題的組件上測試訂閱，我的代碼是這樣的：

實用服務：

private clearFlag = new Subject<boolean>();
public readonly message$ = this.clearFlag.asObservable();

getClearFlag(): Observable<boolean> {
  return this.message$;
}

setClearFlag(clear: boolean) {
  this.clearFlag.next(clear);
}

在組件中，我在 ngOnInit 方法中訂閱了該主題，如下所示：

this.utilService.getClearFlag().subscribe((value) => {
      this.clearFlag = value;
    });

該主題的價值由另外兩個組件給出，如下所示：

this.utilService.setClearFlag(false);

我需要測試代碼的訂閱片段，但我不確定如何，我已經嘗試了 StackOverflow 上的每個解決方案，但不斷收到此錯誤：

Failed: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'subscribe')

規范文件：

describe('ContactsPageComponent', () => {
  let component: ContactsPageComponent;
  let fixture: ComponentFixture<ContactsPageComponent>;
  let utilServiceSpy: jasmine.SpyObj<UtilService>;
  let contactsHttpSpy: jasmine.SpyObj<ContactsHttpService>;
  let contactServiceSpy: jasmine.SpyObj<ContactService>;
  let qrSpy: jasmine.SpyObj<QrService>;
  let storeService: StorageService;
  // const clearFlag = new Subject<false>();


  beforeEach(
    waitForAsync(() => {
      utilServiceSpy = jasmine.createSpyObj('UtilService', [
        'getLoadingModal',
        'transactionStatus',
        'transactionStatusDescription',
        // 'getClearFlag',
        'setClearFlag',
      ]);

      ...

      TestBed.configureTestingModule({
        declarations: [ContactsPageComponent],
        imports: [
          IonicModule,
          CommonModule,
          HttpClientTestingModule,
          YpHeaderModule,
          RouterTestingModule,
          BrowserAnimationsModule,
          LottieModule,
        ],
        providers: [
          ...

          // { provide: UtilService, useValue: utilServiceSpy, clearFlag },

          { provide: UtilService, useValue: utilServiceSpy },

          ...

        ],
      }).compileComponents();


      fixture = TestBed.createComponent(ContactsPageComponent);
      component = fixture.componentInstance;
      component.clearFlag = false;

      fixture.detectChanges();

      const utilService = TestBed.inject(UtilService);

      // spyOn(utilService,'setClearFlag').and.returnValue();
      // spyOn(utilService,'setClearFlag').and.callFake(() => false);


      utilServiceSpy.setClearFlag(false);
      const spy = spyOn(utilService.message$, 'subscribe').and.callThrough();


      // const spy = jasmine.createSpyObj(UtilService, ['getClearFlag']);
      // utilServiceSpy.message$.subscribe(v => {
      //   expect(v).toBeDefined();
      // });
      // utilService.message$.subscribe(v => {
      //   expect(v).toBeDefined();
      // });

      component.ngOnInit();
      expect(component.clearFlag).toBeDefined();
      expect(spy).toHaveBeenCalled();
    })
  );

我將注釋掉的代碼留在那里，以便您可以看到我嘗試過的解決方案。

Answer 1

嘗試這個：

import { of } from 'rxjs';
....
waitForAsync(() => {
      utilServiceSpy = jasmine.createSpyObj('UtilService', [
        'getLoadingModal',
        'transactionStatus',
        'transactionStatusDescription',
        // uncomment getClearFlag
        'getClearFlag',
        'setClearFlag',
      ]);
    
     ....
     fixture = TestBed.createComponent(ContactsPageComponent);
     component = fixture.componentInstance;
     component.clearFlag = false;
     // return whatever you would like here
     utilServiceSpy.getClearFlag.and.returnValue(of(true));
     // the first fixture.detectChanges will run ngOnInit
     fixture.detectChanges();
     expect(component.clearFlag).toBeTrue();

其余的我覺得不錯。