angular - 是否可以从组件测试服务中的一个可观察属性

Question

我不知道我想做的这是否可行，我有一个组件FiltersComponent和一个 Service FiltersService。在 FiltersService 中，我有一个 BehaviorSubject 类型的 onFilterChange 属性。我将它公开为Observable，并且我想在应用更改时测试这个可观察的抛出。

FilterService.service.ts

export class FilterService {
    private _onFilterChange$: BehaviorSubject<any>;
    constructor() {}

    get onFilterChange(): any {
        return this._onFilterChange$.asObservable;
    }

    public onApplyFilter(filter) {
        this._onFilterChange$.next(filter);
    }
}

FilterComponent

export class FiltersComponent implements OnInit, OnDestroy {
    filterForm: FormGroup;
    constructor(private _filterService: FilterService){}

    onApplyFilter() {
        const pfilter = this.filterForm.getRawValue();

        this._filterService.onApplyFilter(newF);
    }
}

应用过滤器时如何测试

this._filterService.onApplyFilter(newF);

this._filterService.onFilterChange().subscribe(d => {
    respond the same filter that I apllied 
});

Answer 1

从您的问题标签中，我可以看到您正在使用jasmine-marbles来测试可观察量。如果是这样，那么你应该这样设置FilterService：

export class FilterService {

    private _onFilterChange$: BehaviorSubject<any> = new BehaviorSubject<any>(null);
    constructor() {}

    get onFilterChange(): Observable<any> {
        return this._onFilterChange$.asObservable();
    }

    public onApplyFilter(filter) {
        this._onFilterChange$.next(filter);
    }
}

要进行单元测试，文件FilterService中有以下代码filter.service.spec.ts：

import { TestBed } from '@angular/core/testing';
import {cold} from 'jasmine-marbles';
import { FilterService } from './filter.service';

describe('FilterService', () => {
  beforeEach(() => TestBed.configureTestingModule({}));

  it('should be created', () => {
    const service: FilterService = TestBed.get(FilterService);
    const expected = cold('a', {a: 2});
    service.onApplyFilter(2);
    const p = service.onFilterChange;
    expect(p).toBeObservable(expected);
  });
});