如何用茉莉弹珠测试对象

Posted 2023-03-08

【中文标题】如何用茉莉弹珠测试对象

【英文标题】：How to test Subject with jasmine marbles

【发布时间】：2019-02-04 11:20:01

【问题描述】：

Angular 6、Rxjs、Jest、Jasmine-marbles。

非常常见的场景：搜索服务器端项目的组件。 在组件中，有一些控件可以更改搜索条件，我想以“反应式”进行编码。所以在组件代码中我有这样的东西：

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

即Subject，每次 UI 中的某些内容发生更改时都会触发搜索条件。

现在我想测试一下，搜索服务是否只会针对不同的输入而被调用。 我可以用这种方式“没有弹珠”：

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

现在我想用 jasmine marbles 转换这个测试，但我不知道如何...

我想要这样的东西：

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

显然，它不起作用......

更新

以某种方式接近...使用“测试助手”

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

【问题讨论】：

仅供参考，你应该可以写stream.subscribe(component.searchConditions$)。你写了“somewhere close”，你的方法有什么地方没有奏效吗？

没什么，它工作正常，只是和我最初想象的有点不同

【参考方案1】：

测试的主要目标是模拟依赖关系并且不更改测试单元 SearchComponent 内部的任何内容。

因此stubSubject(component.searchConditions$, stream) 或component.searchConditions$ = cold 是一种不好的做法。

因为我们想在searchConditions$ 中安排发射，所以我们需要有一个内部调度流，我们也可以在这里使用cold 或hot。

源数据（抱歉，我猜到了一些类型）

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

及其测试

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

现在我们不改变我们的测试单元，只改变它的依赖项 (service.search)。

【讨论】：

> 测试中的主要目标是模拟依赖关系并且不更改测试单元 SearchComponent 内部的任何内容。好点，但是 searchConditions$ 是公开的，所以它在两个解决方案（我的和你的）中都不是“内部”，这是肮脏的部分。在一个应该是私有或受保护的干净解决方案中，并测试模拟用户所做的事情（来自模板）。但它是一种机械部件，而重要的测试是可观察的比较。所以，也许我更喜欢扩展组件以测试目的广告使用受保护的 observable，就像我上面所做的那样