[英]How to test Subject with jasmine marbles
Angular 6, Rxjs, Jest, Jasmine-marbles. Angular 6、Rxjs、Jest、茉莉花大理石。
very common scenario: a component that searches for server-side items.非常常见的场景:搜索服务器端项目的组件。 In the component, there are some controls that can change search critera, and I'd like to code in "reactive-style".
在组件中,有一些控件可以更改搜索条件,我想以“反应式”进行编码。 So in the component code I have something like this:
所以在组件代码中我有这样的东西:
class SearchComponent implements OnInit {
public searchData: SearchData = {};
public searchConditions$ = new Subject<SearchData>();
constructor(private searchService: SearchService) { }
public results$: Observable<ResultData> = this.searchConditions$.pipe(
distinctUntilChanged(this.compareProperties), // omissis but it works
flatMap(searchData => this.searchService.search(searchData)),
shareReplay(1)
);
// search actions
ngOnInit() {
this.searchConditions$.next(this.searchData);
}
public onChangeProp1(prop1: string) {
this.searchData = { ...this.searchData, prop1 };
this.searchConditions$.next(this.searchData);
}
public onChangeProp2(prop2: string) {
this.searchData = { ...this.searchData, prop2 };
this.searchConditions$.next(this.searchData);
}
}
That's, a Subject
that fires search conditions each time something in the UI has changed.也就是说,每次 UI 中的某些内容发生更改时都会触发搜索条件的
Subject
。
Now I'd like to test that search service will be called only for distinct input.现在我想测试仅针对不同的输入调用搜索服务。 I can do it "without marbles" in this way:
我可以通过这种方式“没有弹珠”做到这一点:
test('when searchConditions$ come with equal events search service will not be called more than once', (done: any) => {
service.search = jest.fn(() => of(TestData.results));
component.results$.subscribe({
complete: () => {
expect(service.Search).toHaveBeenCalledTimes(1);
done();
}
});
component.searchConditions$.next(TestData.searchCriteria);
component.searchConditions$.next(TestData.searchCriteria);
component.searchConditions$.next(TestData.searchCriteria);
component.searchConditions$.complete();
});
Now I'd like to convert this test using jasmine marbles , but I don't know how...现在我想使用茉莉花弹珠转换此测试,但我不知道如何...
I'd like something like this:我想要这样的东西:
test('when searchConditions$ come with equal events search service will not be called more than once', (done: any) => {
service.search = jest.fn(() => of(TestData.results));
component.searchConditions$ = cold('--a--a|', { a : TestData.searchCriteria});
const expected = cold('--b---|', { b : TestData.results});
expect(component.results$).toBeObservable(expected);
});
Obviously, it doesn't work...显然,它不起作用......
somehow close...using a "test helper"以某种方式关闭......使用“测试助手”
test('when searchConditions$ comes with equal events search service will not be called more than once - marble version', () => {
service.search = jest.fn(() => of(TestData.results));
const stream = cold('--a--a|', { a : TestData.searchCriteria});
const expected = cold('--b---|', { b : TestData.results});
stubSubject(component.searchConditions$, stream);
expect(component.results$).toBeObservable(expected);
});
// test helpers
const stubSubject = (subject: Subject<any> , marbles: TestObservable) => {
marbles.subscribe({
next: (value: any) => subject.next(value),
complete: () => subject.complete(),
error: (e) => subject.error(e)
});
};
The main goal in tests to mock dependencies and don't change anything inside of testing unit SearchComponent.测试的主要目标是模拟依赖项并且不更改测试单元 SearchComponent 内部的任何内容。
Therefore stubSubject(component.searchConditions$, stream)
or component.searchConditions$ = cold
is a bad practice.因此
stubSubject(component.searchConditions$, stream)
或component.searchConditions$ = cold
是一个不好的做法。
Because we want to schedule emits in searchConditions$
we need to have an internal scheduled stream and we can use cold
or hot
here too.因为我们想在
searchConditions$
调度发射, searchConditions$
我们需要有一个内部调度流,我们也可以在这里使用cold
或hot
。
source data (sorry, I guessed some types)源数据(对不起,我猜到了一些类型)
type SearchData = {
prop?: string;
};
type ResultData = Array<string>;
@Injectable()
class SearchService {
public search(term: SearchData): Observable<any> {
return of();
}
}
@Component({
selector: 'search',
template: '',
})
class SearchComponent implements OnInit {
public searchData: SearchData = {};
public searchConditions$ = new Subject<SearchData>();
constructor(private searchService: SearchService) { }
public results$: Observable<ResultData> = this.searchConditions$.pipe(
distinctUntilKeyChanged('prop'),
tap(console.log),
flatMap(searchData => this.searchService.search(searchData)),
shareReplay(1),
);
// search actions
ngOnInit() {
this.searchConditions$.next(this.searchData);
}
public onChangeProp1(prop1: string) {
this.searchData = { ...this.searchData, prop: prop1 }; // I've changed it to prop
this.searchConditions$.next(this.searchData);
}
public onChangeProp2(prop2: string) {
this.searchData = { ...this.searchData, prop: prop2 }; // I've changed it to prop
this.searchConditions$.next(this.searchData);
}
}
and its test和它的测试
test('when searchConditions$ come with equal events search service will not be called more than once', () => {
service.search = jest.fn(() => of(TestData.results));
// our internal scheduler how we click our component.
// the first delay `-` is important to allow `expect` to subscribe.
cold('-a--a--b--b--a-|', {
a: 'a',
b: 'b',
}).pipe(
tap(v => component.searchConditions$.next({prop: v})),
// or like user does it
// tap(v => component.onChangeProp1(v)),
finalize(() => component.searchConditions$.complete()),
).subscribe();
// adding our expectations.
expect(component.results$).toBeObservable(cold('-r-----r-----r-|', {
r: TestData.results,
}));
});
Now we don't change our testing unit, only its dependencies ( service.search
).现在我们不改变我们的测试单元,只改变它的依赖项(
service.search
)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.