Angular代码覆盖率显示getUserReports2函数未被覆盖的问题排查

你的代码覆盖率未统计到getUserReports2函数，以及ngOnInit中调用该函数的行标红，主要有以下几个原因：

1. 部分测试未实际触发目标函数：

   • 第二个测试用例中，component.getUserReports2()被注释，从未执行该函数；
   • 第三个测试用例未调用getUserReports2或ngOnInit，完全没触达目标代码。

2. 未覆盖所有代码分支：

   • 仅测试了成功场景（甚至未正确验证），未触发subscribe的错误回调，导致函数内的错误处理代码未被覆盖。

3. 服务未正确Mock：

   • 部分测试未对UserReportsService的getMyReports3方法做Mock，可能导致真实请求阻塞或未预期的行为，影响覆盖率统计。

第一步：正确配置TestBed，Mock服务 #

首先在测试文件的beforeEach中创建Mock服务，确保所有测试都使用受控的服务实例：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { of, throwError } from 'rxjs';
import { YourComponent } from './your-component.component';
import { UserReportsService } from './user-reports.service';
import { ReportResponse } from './report-response.interface';
import { Constant } from './constant';

describe('YourComponent', () => {
  let component: YourComponent;
  let fixture: ComponentFixture<YourComponent>;
  let userReportService: jasmine.SpyObj<UserReportsService>;

  beforeEach(async () => {
    // 创建Mock服务对象
    const serviceSpy = jasmine.createSpyObj('UserReportsService', ['getMyReports3']);

    await TestBed.configureTestingModule({
      declarations: [YourComponent],
      providers: [
        { provide: UserReportsService, useValue: serviceSpy }
      ]
    }).compileComponents();

    userReportService = TestBed.inject(UserReportsService) as jasmine.SpyObj<UserReportsService>;
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
  });

第二步：更新测试用例，覆盖所有场景 #

1. 测试组件初始化（触发ngOnInit）

it('should create and fetch reports on init', () => {
    // Mock成功响应
    userReportService.getMyReports3.and.returnValue(of([]));
    
    // 触发ngOnInit
    fixture.detectChanges();

    expect(component).toBeTruthy();
    expect(userReportService.getMyReports3).toHaveBeenCalled();
    expect(component.reportsRes).toEqual([]);
  });

2. 测试成功获取报告

it('should set reportsRes on successful fetch', () => {
    const mockData: ReportResponse[] = [{
      id: "test-id",
      frFile: "test-file",
      reportData: {
        aor: "",
        aorName: "",
        dco: "",
        cbpHoldFacility: false,
        dcoName: "",
        detained: false,
        detention: "",
        detentionName: "",
        endDate: "",
        iceHoldFacility: false,
        id: "",
        nonDetained: false,
        rawDataOnly: false,
        releaseReasonsCds: null,
        lastIntactLocation: null,
        reportType: "PDF",
        reunificationLocation: null,
        startDate: "",
        submittedOn: ""
      },
      status: Constant.FINISHED_STATUS
    }];

    userReportService.getMyReports3.and.returnValue(of(mockData));
    component.getUserReports2();

    expect(component.reportsRes).toEqual(mockData);
    expect(userReportService.getMyReports3).toHaveBeenCalledTimes(1);
  });

3. 测试错误处理

it('should handle error when fetching reports', () => {
    const mockError = new Error('Failed to fetch reports');
    // Mock错误响应
    userReportService.getMyReports3.and.returnValue(throwError(() => mockError));
    
    // 监听console.log，验证错误日志
    const consoleSpy = spyOn(console, 'log');

    component.getUserReports2();

    expect(component.reportsRes).toBeNull(); // 错误场景下保持初始值
    expect(consoleSpy).toHaveBeenCalledWith("error: ", mockError);
  });
});

关键修复点说明 #

• 所有测试用例都明确触发了getUserReports2（要么通过ngOnInit，要么直接调用）；
• 覆盖了subscribe的成功和错误两个分支；
• 使用Mock服务完全控制服务返回值，避免真实请求干扰测试和覆盖率统计；
• 增加了针对性的断言，确保代码逻辑符合预期的同时，让覆盖率工具正确统计执行路径。

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