Karma+Jasmine单元测试BsModalService时代码覆盖率不生效问题

问题根因 #

你当前的测试存在多个核心错误，导致目标代码从未实际执行，所以无法纳入覆盖率统计：

• 方法名完全不匹配：HTML按钮绑定的add方法对应组件内的目标方法是addFileQueryDataPool，但你的测试监听的是不存在的addFileQueryDataPoint，测试逻辑完全没有命中目标代码。
• 直接spy方法没有加.and.callThrough()，就算方法名写对，也只会记录调用次数，不会执行原方法的逻辑，自然不会被覆盖率工具统计。
• 没有MockmodalService依赖，真实运行时可能因为依赖缺失导致逻辑中断。
• 重复触发点击事件属于冗余操作，无实际意义。
• 给用例加x是跳过测试的操作，跳过之后更不会执行对应代码，覆盖率不可能上升。

正确测试实现步骤 #

1. 先在TestBed配置中注入mock的ModalService

// 替换为你实际项目中导入的ModalService类名
import { ModalService } from 'xxx/modal.service';
import { CommonConst } from 'xxx/common-const';

TestBed.configureTestingModule({
  // ... 其他配置不变
  providers: [
    // 加入mock的ModalService
    {
      provide: ModalService,
      useValue: {
        show: jasmine.createSpy('show').and.returnValue({
          hide: jasmine.createSpy('hide')
        })
      }
    }
  ]
})

2. 编写测试用例

首先给你的ng-template加个id方便查询，修改HTML如下：

<ng-template #validateTemplate id="validateTemplate">
<!-- 内部内容不变 -->
</ng-template>

然后编写测试用例：

it('点击添加按钮应该调用addFileQueryDataPool并触发模态框显示', () => {
  // 获取mock的modalService实例
  const mockModalService = TestBed.inject(ModalService);
  // 监听目标方法，保留原方法执行逻辑
  const addSpy = spyOn(component, 'addFileQueryDataPool').and.callThrough();
  // 获取模板实例
  const validateTemplate = fixture.debugElement.query(By.css('#validateTemplate')).injector.get(TemplateRef);
  // 触发按钮点击
  const addBtn = fixture.debugElement.query(By.css('#add_btn_point'));
  addBtn.triggerEventHandler('click', null);
  fixture.detectChanges();

  // 断言逻辑执行符合预期
  expect(addSpy).toHaveBeenCalledOnceWith(validateTemplate);
  expect(mockModalService.show).toHaveBeenCalledOnceWith(validateTemplate, CommonConst.CONFIGFORSMALLMODAL);
});

如果你的add方法是单独的封装方法，需要先确保add内部确实调用了addFileQueryDataPool，如果业务逻辑中存在动态判断会走到else分支，还需要额外补一个用例，修改判断条件让逻辑走到hide分支，断言hide方法被调用即可覆盖else分支的代码。

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