您好我正在使用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
});
});
请提供一种方法来编写测试用例。
答案 0 :(得分:3)
这是编写简单测试用例的一种方法。
它的作用:
value
的默认值是否为伪造value
并发送input event
value
的值已正确更新 代码(记得导入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);
}));