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>();

但是当您用茉莉花模拟它时，您实际上所做的只是将值放在属性中而无法观察：

detailsServiceSpy.allDataChange.and.returnValue(goodData);

因此，该属性实际上就是这样：

detailsServiceSpy.allDataChange = goodData;

但是，等等，您的组件希望在这里可以观察到！因此，您实际需要做的是将Observable放在此处，而不只是一个值：

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

但这还不是全部。监视属性实际上是通过其他方式完成的。有关详细信息，请参见here。

如何在组件中伪造服务主题

1 个答案: