Angular 在函数中使用subscribe测试可观察性

这是测试台的设置。模仿并提供所需的一切：

 let component: PageUploadContainer;
  let store;
  let route;
  let fixture: ComponentFixture<PageUploadContainer>;
  const sanitizer = jasmine.createSpyObj('sanitizer', ['bypassSecurityTrustResourceUrl']);
  sanitizer.bypassSecurityTrustResourceUrl.and.callFake(url => url);
  const mockTranslate = {
    instant: label => label,
  };

  beforeEach(() => {
    store = createMockStore<AppState>(reducers);
    route = new MockActivatedRoute();
  });

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [translationModule],
      declarations: [
        PageUploadContainer,
        MockTranslatePipe,
        MockTranslateCutPipe,
      ],
      schemas: [NO_ERRORS_SCHEMA],
      providers: [
        FormBuilder,
        { provide: DomSanitizer, useValue: sanitizer },
        { provide: Store, useValue: store },
        { provide: ActivatedRoute, useValue: route },
        { provide: TranslateService, useFactory: () => mockTranslate },
      ],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(PageUploadContainer);
    component = fixture.componentInstance;
    component.mappingTriggered$ = Observable.of(false);
  });

还有我的测试。由于新导航{direction:uploadStep}是异步的，所以没有调用，所以此测试失败

it('if navigation default and companyIds empty should call navigate', () => {
       component.companyIds$ = Observable.of(['123', '234']);
      component.onGoTo(NAVIGATION.DEFAULT);
      expect(store.dispatch).toHaveBeenCalledWith(new ReplaceSelectedCompanies([]));
      expect(store.dispatch).toHaveBeenCalledWith(new Navigate({ direction: NAVIGATION.DEFAULT }));
    });

---

您能帮助我如何测试这些方法吗？

您可以在测试代码完全执行后通过调用done来创建异步Jasmine测试。您可以从测试规范中获得作为参数传递的done函数，如下所示：

it('if navigation default and companyIds empty should call navigate', (done) => {
   ...
});

onGoTo(uploadStep: string): Promise<void> {
    if (uploadStep === NAVIGATION.DEFAULT) {
      this.store.dispatch(new ReplaceSelectedCompanies([]));
      return new Promise(resolve => this.companyIds$.filter(isEmpty)
        .take(1)
        .subscribe(() => {
          this.store.dispatch(new Navigate({ direction: uploadStep}));
          resolve();
        }));
    } else {
      this.store.dispatch(new Navigate({ direction: uploadStep}));
      return Promise.resolve();
    }
  }

it('if navigation default and companyIds empty should call navigate', (done) => {
   component.companyIds$ = Observable.of(['123', '234']);
  component.onGoTo(NAVIGATION.DEFAULT).then(() => {
    expect(store.dispatch).toHaveBeenCalledWith(new ReplaceSelectedCompanies([]));
    expect(store.dispatch).toHaveBeenCalledWith(new Navigate({ direction: NAVIGATION.DEFAULT }));
    done()});
});

但是，您无法在测试代码中知道代码何时完全执行。我建议返回onGoTo的承诺。可能是这样的：

it('if navigation default and companyIds empty should call navigate', (done) => {
   ...
});

onGoTo(uploadStep: string): Promise<void> {
    if (uploadStep === NAVIGATION.DEFAULT) {
      this.store.dispatch(new ReplaceSelectedCompanies([]));
      return new Promise(resolve => this.companyIds$.filter(isEmpty)
        .take(1)
        .subscribe(() => {
          this.store.dispatch(new Navigate({ direction: uploadStep}));
          resolve();
        }));
    } else {
      this.store.dispatch(new Navigate({ direction: uploadStep}));
      return Promise.resolve();
    }
  }

it('if navigation default and companyIds empty should call navigate', (done) => {
   component.companyIds$ = Observable.of(['123', '234']);
  component.onGoTo(NAVIGATION.DEFAULT).then(() => {
    expect(store.dispatch).toHaveBeenCalledWith(new ReplaceSelectedCompanies([]));
    expect(store.dispatch).toHaveBeenCalledWith(new Navigate({ direction: NAVIGATION.DEFAULT }));
    done()});
});

---

虽然我不确定，但您可能需要导入angular提供的异步方法

一般示例

你的代码

推荐

首先，我会。整个单元测试系列也很好

你有很多自定义的模拟类，所以我不能对此发表太多评论。我建议使用RouterTestingModule.withRoutes{/*测试路由*/}

---

然后，您总是可以得到模拟路由器，如router=TestBed.getRouter或RouterTestingModule创建的其他对象。

请发布您的设置。我没有看到试验台。此外，它是异步的，但您的测试是同步运行的。@christo8989添加了一个设置