Angular事件单元测试报错求助：selected函数测试用例编写问题

错误原因分析 #

• 你的测试代码没有触发selected方法，组件的selectedBatch和enableSubmitButton还是初始状态：
  • enableSubmitButton初始为false，所以第二个断言Expected false to be true失败
  • selectedBatch初始为undefined，而你用querySelector('selectedValue')查找的是不存在的元素（selectedValue是函数内的变量，不是DOM元素），返回null，导致第一个断言Expected undefined to equal null失败
• 另外注意原函数里的拼写错误：this.seletedBatch应该是this.selectedBatch（少了字母c），这会导致赋值失败，即使触发方法也拿不到正确值

正确的测试用例写法 #

方法1：直接调用组件的selected方法（推荐，更聚焦逻辑） #

// 初始化组件初始状态
component.enableSubmitButton = false;
component.selectedBatch = undefined;
fixture.detectChanges();

// 创建模拟的event对象
const mockEvent = {
  target: { value: 'ABC123' } // 可替换为任意测试用字符串
};

// 调用目标方法
component.selected(mockEvent);

// 执行变更检测
fixture.detectChanges();

// 断言结果
expect(component.selectedBatch).toEqual('ABC'); // 取字符串前3位
expect(component.enableSubmitButton).toBe(true);

方法2：通过DOM元素触发事件（模拟真实用户操作） #

如果selected方法是绑定在DOM元素（比如<select>或<input>）的change事件上，模板示例如下：

<select (change)="selected($event)">
  <option value="ABC123">批次ABC</option>
  <option value="DEF456">批次DEF</option>
</select>

对应的测试代码可以这样写：

// 初始化组件初始状态
component.enableSubmitButton = false;
component.selectedBatch = undefined;
fixture.detectChanges();

// 获取目标DOM元素
const selectElement = fixture.debugElement.nativeElement.querySelector('select');
// 设置元素值并触发change事件
selectElement.value = 'ABC123';
selectElement.dispatchEvent(new Event('change'));

// 执行变更检测
fixture.detectChanges();

// 断言结果
expect(component.selectedBatch).toEqual('ABC');
expect(component.enableSubmitButton).toBe(true);

额外注意事项 #

• 必须修复原函数里的拼写错误：this.seletedBatch → this.selectedBatch，否则赋值逻辑不会生效
• 建议补充边界场景测试：比如输入长度小于3的字符串（如'AB'），验证substring(0,3)不会报错，此时selectedBatch应等于'AB'

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