如何为Angular中的输入更改编写测试用例

时间:2017-06-20 06:01:22

标签: angular typescript testing jasmine karma-jasmine

您好我正在使用Angular和TypeScript开发应用程序。

以下是模板代码:

<input type="text" placeholder="Search Results" (input)="searchInput($event)">

和我关于searchInput方法的打字稿代码是:

searchInput(event: Event & { target: HTMLInputElement}) {
   const { value } = event.target;
   this.value = value;
    // calling other method to reset values
  }

我想知道如何在我的spec.ts文件中编写输入测试用例。

describe('Component', () => {
  let component: Component;
  let fixture: ComponentFixture<Component>;
  const event = Event; // Is this fine ?
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
          AppModule
      ],
      providers: [
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(Component);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('searchInput() ', () => {
    // how to approach 
  });
});

请提供一种方法来编写测试用例。

1 个答案:

答案 0 :(得分:3)

这是编写简单测试用例的一种方法。

它的作用:

  1. 创建组件
  2. 检查value的默认值是否为伪造
  3. 通过CSS查找HTML输入元素(您可能需要在此更具体,具体取决于您的模板)
  4. 设置输入元素的value并发送input event
  5. 确保value的值已正确更新
  6. 代码(记得导入By):

    ...    
    
    import { By } from '@angular/platform-browser';
    
    ...
    
    it('searchInput should update value when input changes', async(() => {
        const fixture = TestBed.createComponent(AppComponent);
    
        expect(fixture.debugElement.nativeElement.value).toBeFalsy()
    
        const el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
        const testValue = 'some_value';
    
        el.value = testValue;
        el.dispatchEvent(new Event('input'));
    
        expect(fixture.componentInstance.value).toEqual(testValue);
    }));