Как подделать тему сервиса в компоненте

Question

В моем сервисе я создал тему 'allDataChange'

allDataChange = new Subject<AllData>();

В моем компоненте у меня есть

ngOnInit() {
  ...
  this.detailsService.allDataChange.subscribe((data) => {
    ... something gets done here
  });
}

В моем тесте ... ну, я понятия не имеючто я делаю, но всякий раз, когда я запускаю тест, я вижу errorTypeError: this.detailsService.allDataChange.subscribe не является функцией.

Я пробовал дюжину вещей.Ну, это похоже на дюжину.Может быть, я только что попробовал одно и то же 12 раз.На данный момент, я не знаю.

Вот тестовая установка и тест:

describe('DetailsTabComponent', () => {
  let component: DetailsTabComponent;
  let fixture: ComponentFixture<DetailsTabComponent>;
  let appConfigServiceSpy: jasmine.SpyObj<AppConfigService>;
  let detailsServiceSpy: jasmine.SpyObj<RequisitionDetailsService>;

  beforeEach(async(() => {
    const spy = jasmine.createSpyObj('AppConfigService', ['loadAppConfig']);
    const detailsSpy = jasmine.createSpyObj('RequisitionDetailsService', ['getAllData', 'allDataChange']);
    TestBed.configureTestingModule({
      declarations: [
        DetailsTabComponent
      ],
      imports: [
        OwlDateTimeModule,
        OwlNativeDateTimeModule,
        HttpClientTestingModule
      ],
      providers: [
        {provide: AppConfigService, useValue: spy},
        {provide: RequisitionDetailsService, useValue: detailsSpy}
      ]
    })
    .compileComponents();
    appConfigServiceSpy = TestBed.get(AppConfigService);
    detailsServiceSpy = TestBed.get(RequisitionDetailsService);
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(DetailsTabComponent);
    detailsServiceSpy.getAllData.and.returnValue(goodData);
    // detailsServiceSpy.allDataChange.and.returnValue(goodData);
    component = fixture.componentInstance;
    fixture.detectChanges();
    fixture.debugElement.injector.get(RequisitionDetailsService);
  });

  it('should create', async(() => {
    const stubValue = 'http://test.test/';
    appConfigServiceSpy.loadAppConfig.and.returnValue(stubValue);
    expect(component).toBeTruthy();
  }));
});

Я использую Angular 6 и версию с жасминовым ядром 2.99.1.Я пытался сдать этот тест в течение двух дней, и всемогущий Google абсолютно не помог.Может кто-нибудь сказать мне, как обойти это «blah.blah.subscribe не является ошибкой функции» и сделать этот тест успешным?

Answer 1

Это выглядит довольно просто.Вы используете шпионов-жасминов для проверки сервисов, поэтому в тесте ваш компонент получит их вместо реальных сервисов.Компоненту все равно, что это такое - все, что он хочет от того, что внедрено, - это то, что он должен реализовывать определенный интерфейс.Часть этого интерфейса - это свойство, которое возвращает наблюдаемое, на которое вы подписываетесь:

allDataChange = new Subject<AllData>();

Но когда вы высмеиваете его с помощью jasmine, в действительности вы просто помещаете значение в свойство без наблюдаемого:

detailsServiceSpy.allDataChange.and.returnValue(goodData);

Итак, это свойство фактически становится именно таким:

detailsServiceSpy.allDataChange = goodData;

Но подождите, ваш компонент ожидает здесь наблюдаемого!Итак, что вам действительно нужно сделать, это поместить Observable вместо просто значения:

detailsServiceSpy.allDataChange.and.returnValue(of(goodData)); // <-- now that will be observable

Но это еще не все.Шпионить за свойствами на самом деле делается немного по-другому.Пожалуйста, обратитесь к здесь для деталей.