如何对 Angular 中更新过滤器的方法进行单元测试？答案

【问题标题】：How to unit test a method that updates a filter in Angular?如何对 Angular 中更新过滤器的方法进行单元测试？
【发布时间】：2020-04-09 22:49:07
【问题描述】：

我想对我的 updateFilter() 方法进行单元测试，该方法根据输入字段中每个按键返回的给定值过滤数组。

我的方法是这样的：

  updateFilter(e) {
    const v = e.target.value.toLowerCase();
    const t = this.t.filter((t) => {
      return t.id.toLocaleLowerCase().indexOf(v) !== -1 || !v;
    });
    this.data = t;
    this.content = this.data;
    this.table.offset = 0;
  }

我像这样准备了我的单元测试，但不知道下一步该做什么：

  describe('#updateFilter()', () => {
    it('format input string to lowercase', () => {

    });

    it('filter t array based on the given string ', () => {

    });

    it('offset should be 0', () => {

    });
  });

我怎样才能在这里建立一个有意义的测试？

【问题讨论】：

是组件还是服务内部的方法？你有没有在你的'it'函数中尝试过任何东西，例如：expect(myClass.updateFilter('MOCKED STRING').toBe('mocked string')，例如在你的第一次测试中？
它在一个组件内部，我尝试了很多东西，但测试失败了。此外，我不确定如何在这里构建一个有意义的测试来测试此方法的主要目标。

标签： angular typescript unit-testing jasmine karma-jasmine

【解决方案1】：

假设 updateFilter 方法是具有公共成员 content 的 FilterComponent 的一部分，则测试可能如下所示。

import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';

describe('#updateFilter()', () => {

    let fixture: ComponentFixture<FilterComponent>;
    let component: FilterComponent;
    let inputElement: HTMLInputElement;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [FilterComponent]
        });
        fixture = TestBed.createComponent(FilterComponent);
        fixture.detectChanges();
        component = fixture.componentInstance;
        inputElement = <HTMLInputElement> fixture.debugElement.nativeElement.querySelector('INPUT');
        fixture.detectChanges();
    });

    it('format input string to lowercase', fakeAsync(() => {

        //given
        component.t = ?; // no idea what this member is made of
        inputElement.value = 'abC'; 
        const event = new KeyboardEvent('keydown', { key: 'C' });

        // when            
        inputElement.dispatchEvent(event);
        tick();

        // then
        expect(component.data).toBe(?); // define expected value here
    });

    ...
});

【讨论】：