声呐中的角型标测与观众遮挡组件法

Question

我在我的角度项目中使用了以下的角度CLI: 10.2.3

节点: 12.22.1

我有以下依赖项(用于测试)

"devDependencies": {
    "@angular-devkit/build-angular": "^0.1002.0",
    "@angular/cli": "^10.2.3",
    "@angular/compiler-cli": "~10.0.2",
    "@ngneat/spectator": "^5.13.0",
    "@types/jest": "^26.0.23",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0-next.1",
    "jest": "^27.0.5",
    "jest-mock-extended": "^1.0.16",
    "jest-preset-angular": "^9.0.4",
    "ngx-deploy-npm": "^1.2.2",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  }

我想了解如何提高我的测试覆盖范围，所以声纳报告显示了更好的覆盖面。

我有一个组件如下所示。我为构造函数添加了“伊斯坦布尔忽略下一步”的注释，否则覆盖率报告显示我没有涵盖这些代码行。我不想测试私有构造函数，所以使用上面的注释。

// Private class used by the component. do not want to test it.  
export class Summary {

  /* istanbul ignore next */
  constructor(
    public vDate: Date,
    public bookName: string,
    .
    .
  ) {
    }
}

export class SummaryComponent implements OnInit {

    ngOnInit(): void {
    .
    .
    }
    
    handleUserSelection(selection) {
        console.log("Handle User Selection");
        console.log("Selection: " + selection.selectedDateTo.year);
        console.log("Selection: " + selection.selectedDateFrom.month);
        if (selection.selectedDateTo instanceof Date && selection.selectedDateTo.getTime()) {
          this.currentDateTo = this.util.formatCalendarDateToDateStr(selection.selectedDateTo);     
        } else {
          this.currentDateTo = this.util.formatCalendarDateToDateStr(new Date(selection.selectedDateTo.year,selection.selectedDateTo.month - 1,selection.selectedDateTo.day));
        }
        if (selection.selectedDateFrom instanceof Date && selection.selectedDateFrom.getTime()) {
          this.currentDateFrom = this.util.formatCalendarDateToDateStr(selection.selectedDateFrom);
        } else {
          this.currentDateFrom = this.util.formatCalendarDateToDateStr(new Date(selection.selectedDateFrom.year,selection.selectedDateFrom.month - 1,selection.selectedDateFrom.day));
        }

        console.log(selection);
        .
        .
        
    }
}

基本上，我在组件中有一个方法。我的测试文件如下所示：

describe('SummaryComponent', () => {

  let spectator: Spectator<SummaryComponent>;
  const createComponent = createComponentFactory({
    component: SummaryComponent,
    declarations: [],
    imports: [HttpClientTestingModule,
              MatSnackBarModule,
              RouterTestingModule
             ],
    providers: [
      { provide: MatDialog, useClass: MatDialogMock },
    ],
    schemas: [NO_ERRORS_SCHEMA],
    mocks: [BasicAuthService,            
            SummaryDataService,            
           ],
    detectChanges: false
  });
  
  beforeEach(()=> {
    spectator= createComponent();    
  });
  
  it('should handle user selection', () => {    
    jest.spyOn(spectator.component, 'handleUserSelection').mockReturnValue(null);
    spectator.component.handleUserSelection(selection);
    expect(spectator.component.handleUserSelection).toHaveBeenCalled();
  });

});

在我的报道中，它显示该方法根本没有覆盖。

​

如何改进测试，从而覆盖该方法？

更新：

我试图按以下方式模拟实现该函数：

it('should handle user selection', () => {    
    jest.spyOn(spectator.component, 'handleUserSelection').mockImplementation(() => {
      
      let jSelection: any = {
        selectedDateFrom: {year: 2020, month: 5, day: 29},
        selectedDateTo: {year: 2020, month: 6, day: 30},        
      };

      console.log("Handle User Selection");
      console.log("Selection: " + jSelection.selectedDateTo.year);
      console.log("Selection: " + jSelection.selectedDateFrom.month);

      if (jSelection.selectedDateTo instanceof Date && jSelection.selectedDateTo.getTime()) {
        spectator.component.currentDateTo = spectator.component.util.formatCalendarDateToDateStr(jSelection.selectedDateTo);     
      } else {
        spectator.component.currentDateTo = spectator.component.util.formatCalendarDateToDateStr(new Date(jSelection.selectedDateTo.year,jSelection.selectedDateTo.month - 1,jSelection.selectedDateTo.day));
      }
      if (jSelection.selectedDateFrom instanceof Date && jSelection.selectedDateFrom.getTime()) {
        spectator.component.currentDateFrom = spectator.component.util.formatCalendarDateToDateStr(jSelection.selectedDateFrom);
      } else {
        spectator.component.currentDateFrom = spectator.component.util.formatCalendarDateToDateStr(new Date(jSelection.selectedDateFrom.year,jSelection.selectedDateFrom.month - 1,jSelection.selectedDateFrom.day));
      }

      console.log("Handle user selection Done!");

    });
    
    spectator.component.handleUserSelection(selection);
    expect(spectator.component.handleUserSelection).toHaveBeenCalled();
  });

但是，覆盖范围也是一样的，即根本没有覆盖该功能？

我该怎么做才能涵盖这个方法呢？

Answer 1

我本想发表评论的，但遗憾的是，我没有足够的声誉。

看看您的代码片段，我怀疑您为什么要嘲笑您要测试的确切方法？难道我们不应该只是嘲笑您的handleUserSelection需要调用的函数。我相信这样，handleUserSelection的实际代码甚至不会在单元测试期间执行，因为它总是返回模拟的实现，而不是实际的函数调用。

我的建议是尝试调用handleUserSelection方法而不使用jest.spyOn和模拟方法(如spectator.component.util.formatCalendarDateToDateStr )。毕竟，单元测试应该只关注当前的代码块，而不应该关注被调用的后续代码。