Как проверить угловой 5 компонент с помощью rxjs 5 forkJoin - PullRequest
Новая
       18

Как проверить угловой 5 компонент с помощью rxjs 5 forkJoin

0 голосов
/ 24 апреля 2018

У меня есть приложение ResultsComponent, в котором я делаю два вызова службы одновременно, соединяя оба наблюдаемых, используя оператор rxjs forkJoin. Я хочу смоделировать данные для оператора rxjs. Я много времени гуглю и пробовал разные способы, но не нашел способа сделать это. Может кто-нибудь, пожалуйста, помогите мне.

угловой вариант: 5.2.9 Версия rxjs: 5.5.7 angular-cli: 1.6.6

получение этой ошибки в операторе forkJoin в results.component.ts

TypeError: Вы указали «undefined» там, где ожидался поток. Вы можете предоставить Observable, Promise, Array или Iterable.

results.component.ts 

@Component({
  selector: "app-results",
  templateUrl: "./results.component.html",
  styleUrls: ["./results.component.scss"]
})
export class ResultsComponent 
  implements OnInit, OnDestroy {
  searchForm: FormGroup;


  constructor(
    private rxnsSearchService: RxnsSearchService,
    private rxnsSearchHitCountService: RxnsSearchHitCountService,
    public store: Store<fromAppReducer.AppState>,
    private route: ActivatedRoute,
    public formBuilder: FormBuilder,
    public router: Router
  ) {

  }

  ngOnInit() {

    this.route.queryParams.subscribe(params => {
      this.searchForm = this.formBuilder.group({
        searchInput: new FormControl(params.q, Validators.required),
        searchType: new FormControl(params.searchType),
        searchBy: new FormControl(params.searchBy)
      });
      this.store.dispatch(new AppActions.ChemQueryString(params.q));
      const rxnsObservable: Observable<Array<any>> = this.rxnsSearchService.getReactions(params, 0);
      const headCountObservable: Observable<number> = this.rxnsSearchHitCountService.getHitCount(params);
      forkJoin([rxnsObservable, headCountObservable]).subscribe(results => {
        this.reactions = results["0"];
        this.total = results["1"];
      }, (error) => {
        console.log(error);
      });
    });
    this.store.select("rxnState").subscribe(data => {
      console.log(data);
      this.searchString = data.slice(-1)[0].searchString;
    });
  }
  ngOnDestroy() {}
}

results.component.spec.ts 

const dummydata = [
  {
    ruid: "02b01f46288b4f71950d03856bc8f173",
    rxnString: "Cl.NCCC1(C(F)(F)F)CC1.NCC1=CC=CC(NC"
  },
  {
    ruid: "02b01f46288b4f71950d03856bc8f173",
    rxnString: "Cl.NCCC1(C(F)(F)F)CC1.NCC1=CC=CC(NC"
  }
];
const dummyParams = {q: "[H]N(C(=O)C([H])([H])C)C1([H])CCCC22", searchType: "SUBSTRUCTURE", searchBy: "PRODUCT"};

class RouterStub {
  navigate(commands: any[], extras?: NavigationExtras) { }
}
class ActivatedRouteStub {
  private _testParams: {};
  private subject = new BehaviorSubject(this._testParams);
   queryParams = this.subject.asObservable();
  setQueryParams(params: Params) {
    this._testParams = params;
    this.subject.next(params);
  }
}

describe("ResultsComponent", () => {
  beforeEach(() => {
    activatedRoute = new ActivatedRouteStub();
  });
  let component: ResultsComponent;
  let injector;
  let store: Store<any>;
  let fixture: ComponentFixture<ResultsComponent>;
  let rxnsSearchService: RxnsSearchService;
  let rxnsSearchHitCountService: RxnsSearchHitCountService;
  let activatedRoute: ActivatedRouteStub;

  beforeEach(async(() => {

    TestBed.configureTestingModule({
      imports: [
        ResultsModule,
        NgxPaginationModule,
        HttpClientTestingModule,
        RouterTestingModule,
        StoreModule.forRoot(fromAppReducer.reducers)
      ],
      declarations: [ ],
      providers: [
          RxnsSearchService,
          RxnsSearchHitCountService,
        { provide: ActivatedRoute, useValue: activatedRoute },
        { provide: Router, useClass: RouterStub},
        FormBuilder
      ]
    }).compileComponents();
    injector = getTestBed();
    rxnsSearchService = injector.get(RxnsSearchService);
    rxnsSearchHitCountService = injector.get(RxnsSearchHitCountService);
    spyOn(rxnsSearchService, 'getReactions').and.returnValue(Observable.of(dummydata));
    spyOn(rxnsSearchHitCountService, 'getHitCount').and.returnValue(Observable.of(300));
    store = injector.get(Store);
  }));

  beforeEach(async(() => {
    activatedRoute.setQueryParams(dummyParams);
    fixture = TestBed.createComponent(ResultsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

  it("should create results component", () => {
    expect(component).toBeTruthy();
  });
});

1 Ответ

0 голосов
/ 20 июля 2018

Я недавно столкнулся с тем же вопросом и решил его, вытащив вилку из своего собственного метода, а затем создав шпиона, который вернул бы мои желаемые значения. 

ngOnInit() {

  this.route.queryParams.subscribe(params => {
    this.searchForm = this.formBuilder.group({
      searchInput: new FormControl(params.q, Validators.required),
      searchType: new FormControl(params.searchType),
      searchBy: new FormControl(params.searchBy)
    });
    this.store.dispatch(new AppActions.ChemQueryString(params.q));
    const rxnsObservable: Observable<Array<any>> = this.rxnsSearchService.getReactions(params, 0);
    const headCountObservable: Observable<number> = this.rxnsSearchHitCountService.getHitCount(params);

    const data = this.getData(rxnsObservable, headCountObservable); 
    this.reactions = data["0"];
    this.total = data["1"];
  });
  this.store.select("rxnState").subscribe(data => {
    console.log(data);
    this.searchString = data.slice(-1)[0].searchString;
  });
}

getData(req1, req2) {
  forkJoin([req1, req2]).subscribe(results => {
    return results;
  }, (error) => {
    console.log(error);
  });
}

Тогда ваш тест может выглядеть примерно так: 

spyOn(component, 'getData').and.returnValue([foo, bar]);
...