Question

我是Jasmine测试的新手，我正在尝试为change事件编写单元测试，该事件需要方法参数中的事件作为模拟值，而我无法实现。这就是我尝试过的

    it('sample test', () => {
    const compiled = fixture1.debugElement;
    const event = {
    preventDefault: jasmine.createSpy(),
    srcElement: jasmine.createSpy()
};
spyOn(component1, 'onChange');
   const select = compiled.query(By.css('#elect-menu')).nativeElement;
   select.value = select.options[1].value;
   select.dispatchEvent(new Event('change'));
   fixture1.detectChanges();
   expect(component1.onChange).toHaveBeenCalled();`

我的html代码看起来像这样

<select id="select-menu" (change)="onChange($event)" (dblclick)="onChange($event)"> 
         <option value="default">some value</option>         
         <option  *ngFor="let line of lines"  [value]="line.id" >{{line.name}}</option>
     </select>

我的组件方法，将在更改时调用 onChange（$ event）{

const selected = parseInt($event.target.value);
switch (selected) {
      case 1: {
        //some logic
         break;
      }
}

我想编写一个测试案例以测试案例1中的正向和负向流动。

Answer 1

您在这里发生了几件事。首先，您不需要在要测试的组件内部使用spyOn作为方法。相反，您应该使用Expect（）检查onChange（）方法是否达到了预期的效果。例如：

onChange($event) {
    const selected = parseInt($event.target.value);
    switch (selected) {
        case 1:
            this.testValue = 1; // Set some variable based on the selected value
            break;
        ...
    }
}

it('sample test', () => {
    const compiled = fixture1.debugElement;
    const select = compiled.query(By.css('#select-menu')).nativeElement;
    select.value = select.options[1].value;
    select.dispatchEvent(new Event('change'));
    fixture1.detectChanges();

    expect(component.testValue).toBe(1); // Check to see if the variable is correctly set
}

第二，您在这里输入错字：const select = compiled.query(By.css('#elect-menu')).nativeElement;-应该是'#select-menu';

如果您真的只想对方法使用间谍，则正确的语法是：

let methodSpy = spyOn(component1, 'onChange').and.callThrough();
// Do something that triggers the method
expect(methodSpy).toHaveBeenCalled();

如何模拟事件并将其传递给茉莉花测试中的方法？

1 个答案: