Angular单元测试中如何创建事件对象以测试updateValue方法？

我正在为Angular的GridView组件编写单元测试，需要测试输入框的更新逻辑。以下是我的相关代码：

GridView模板代码 #

<input *ngIf="editing[rowIndex + '-scopevalue']" class="inline-editor" autofocus 
       (blur)="updateValue($event, 'scopevalue', value, rowIndex)" type="text" 
       [value]="value" />

组件中的updateValue函数 #

updateValue(event, cell, cellValue, rowIndex) { 
  this.editing[rowIndex + '-' + cell] = false; 
  this.rows[rowIndex][cell] = event.target.value; 
  this.rowsCache[rowIndex][cell] = event.target.value; 
  this.scopeEdit = this.rows[rowIndex]; 
  this.updateScope(); 
}

我尝试编写了单元测试用例，但不确定如何正确创建第一个参数所需的event对象：

it('update scope name value', () => { 
  var row = component.rows[0]; 
  let cell = 'scopevalue'; 
  let cellValue = row.scopevalue; 
  let rowIndex = 0; 
  // 这里需要正确的event对象，当前传入的字符串不符合要求
  component.updateValue('/bmw', cell, cellValue, rowIndex); 
});

请问该如何创建符合要求的event对象来测试这个函数？

解决方案 #

其实很简单，你只需要创建一个模拟的Event对象，让它包含target属性，且target里有value字段就可以了——因为你的updateValue函数只用到了event.target.value这部分内容。

方法1：直接创建模拟对象（最快捷）

手动构造一个满足函数需求的简单对象，再通过类型断言让TypeScript通过类型检查：

it('update scope name value', () => { 
  var row = component.rows[0]; 
  let cell = 'scopevalue'; 
  let cellValue = row.scopevalue; 
  let rowIndex = 0; 
  // 创建模拟的blur事件对象
  const mockEvent = {
    target: {
      value: '/bmw'
    }
  } as Event;
  
  component.updateValue(mockEvent, cell, cellValue, rowIndex); 

  // 可添加断言验证更新是否生效
  expect(component.rows[rowIndex][cell]).toBe('/bmw');
  expect(component.rowsCache[rowIndex][cell]).toBe('/bmw');
  expect(component.editing[rowIndex + '-' + cell]).toBe(false);
});

方法2：使用真实Event构造函数（更贴近浏览器环境）

如果你想要更接近真实浏览器的Event对象，可以用原生Event构造函数，再手动绑定target元素：

it('update scope name value', () => { 
  var row = component.rows[0]; 
  let cell = 'scopevalue'; 
  let cellValue = row.scopevalue; 
  let rowIndex = 0; 

  const inputElement = document.createElement('input');
  inputElement.value = '/bmw';
  const mockEvent = new Event('blur');
  // 手动给事件添加target属性
  Object.defineProperty(mockEvent, 'target', {
    value: inputElement
  });
  
  component.updateValue(mockEvent, cell, cellValue, rowIndex); 

  // 断言逻辑同上
});

方法3：模拟真实用户交互（完整组件测试）

如果想测试从用户输入到触发更新的完整流程，而不是直接调用函数，可以通过TestBed获取调试元素，模拟输入和blur操作：

it('should update scope value on input blur', () => {
  // 确保组件初始化后，目标输入框处于可编辑状态（editing[0-scopevalue]为true）
  component.editing['0-scopevalue'] = true;
  fixture.detectChanges();
  
  const inputElement = fixture.debugElement.query(By.css('.inline-editor')).nativeElement as HTMLInputElement;
  inputElement.value = '/bmw';
  // 触发input事件同步值（可选，根据组件逻辑调整）
  inputElement.dispatchEvent(new Event('input'));
  // 触发blur事件，自动调用updateValue
  inputElement.dispatchEvent(new Event('blur'));
  
  fixture.detectChanges();

  // 验证更新结果
  expect(component.rows[0].scopevalue).toBe('/bmw');
  expect(component.rowsCache[0].scopevalue).toBe('/bmw');
  expect(component.editing['0-scopevalue']).toBe(false);
});

三种方法里，第一种适合单独测试updateValue函数的逻辑，第三种则更贴近真实用户操作的完整场景，你可以根据测试需求选择合适的方式。

内容的提问来源于stack exchange，提问作者Niranjan