使用 Karma 的 Angular 单元测试 Observable/Subject答案

【问题标题】：Angular Unit Test Observable/Subject with Karma使用 Karma 的 Angular 单元测试 Observable/Subject
【发布时间】：2018-01-24 19:23:11
【问题描述】：

我正在尝试在我的组件中测试主题更改，但覆盖范围从未进入订阅功能。

titlebar-search.component.ts

export class TitlebarSearch implements OnInit {

    @ViewChild('titleSearchInput') titleSearchInputEl: any;
    @Input() inputValue: string;
    @Output() searchText = new EventEmitter<string>();
    searchChange: Subject<string> = new Subject<string>();


    constructor(private renderer: Renderer) {

    }    

    /**
     * Waits a time before send the text to search
     * 
     * @protected
     * @memberof TitlebarSearch    
     * 
     */
    protected prepareSearchInput() {
        this.searchChange.debounceTime(500).subscribe(value => {
            this.searchText.emit(value);
        });
    }

    /**
     * Send the text to the searchChange Observable
     * 
     * @param {string} text 
     * @memberof TitlebarSearch
     */
    public doSubmit(text:string){
        this.searchChange.next(text);        
    }    

}

titlebar-search.component.spec.ts

describe('Titlebar Search tests', () => {
    let fixture;
    let titlebarComponent;

    beforeEach(async(() => {
        //Creates a UserService using a mock class
        TestBed.configureTestingModule({
            declarations: [TitlebarSearch],
            imports: [FormsModule],
            //CUSTOM_ELEMENTS_SCHEMA to solve html elements issues
            schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
            providers: [Renderer]
        }).compileComponents().then(() => {
            fixture = TestBed.createComponent(TitlebarSearch);            
            titlebarComponent = fixture.componentInstance
        });

    }));

    //specs
    it('should send the text to detect the change', async((done) => {        
        const text = "Changed text";
        titlebarComponent.doSubmit(text);
        fixture.detectChanges();
        titlebarComponent.searchChange.subscribe(textRecived => {
            expect(textRecived).toEqual(text);
            done();
        })     
    }));           
});

doSubmit 方法在输入文本发生更改时调用。然后 prepareSearchInput 订阅了该主题，以通过 debounce 获取下一个并输出相同的文本。

我不知道测试中的错误在哪里，但覆盖范围永远不会覆盖订阅代码。网上的例子对我没有帮助。

【问题讨论】：

标签： angular unit-testing karma-jasmine observable subject-observer

【解决方案1】：

我遇到了同样的问题，但在这个帖子中从@jonrsharpe 那里得到了答案：Unit test Angular 2 service subject。

您需要在测试的早期声明您的主题订阅，在调用 next() 之前。如果你像这样重新排序，它应该可以工作：

it('should send the text to detect the change', async((done) => {        
    titlebarComponent.searchChange.subscribe(textRecived => {
        expect(textRecived).toEqual(text);
        done();
    })   
    const text = "Changed text";
    titlebarComponent.doSubmit(text);
    fixture.detectChanges();
}));

根据 John 的说法，问题在于您的主题没有任何回放/缓冲行为。

【讨论】：