通过 jasmine 测试 Angular 中的内部功能

如何解决通过 jasmine 测试 Angular 中的内部功能

所以我正在定义一个内部函数并将其分配给一个类变量，以便我可以再次使用它。那是因为我想访问父函数的参数，但不希望该类的任何其他方法可以访问该数据

@Component({
  selector: 'app-report-topup',templateUrl: './report-topup.component.html',styleUrls: ['./report-topup.component.scss'],})
export class ReportTopupComponent implements OnInit {
 
  loadReports: (pageNum,pageSize) => void;
  reportDataSource: ReportDataSource;
  currentPageDetails: { index: number; size: number } = { index: 0,size: 5 };

  constructor(public topupHttpService: TopupHttpService){}

  ngOnInit(): void {
    this.reportDataSource = new ReportDataSource(this.topupHttpService);
  }

  onReportTopupSearchFormSubmit(formData: ReportTopupSearch) {
  
    this.loadReports = (pageNum,pageSize) => {
      this.reportDataSource.loadReports();
    };

    this.loadReports(0,this.currentPageDetails.size);
    this.setCurrentPageDetails(0,this.currentPageDetails.size);
  }

代码工作正常，但是当我去测试它时，我开始遇到问题。这是我的 spec.ts 函数：

 it('should call load Reports and setCurrentPageDetails on form submit',() => {
    spyOn(component,'setCurrentPageDetails');
  
    const reportFormData: ReportTopupSearch = {
      company: 'ABC',dateFrom: '2021-01-01',dateto: '2021-01-02',status: 'new',};

    component.onReportTopupSearchFormSubmit(reportFormData);
    
    expect(component.loadReports).tobedefined();
    expect(component.loadReports).toHaveBeenCalled();
    expect(component.setCurrentPageDetails).toHaveBeenCalled();
  });

如果我尝试使用 jasmine 中的 spyOn ，测试运行程序会给出一个错误：
如果我尝试使用 jasmine.createSpy ，就像这样：

component.loadReports = jasmine.createSpy('load reports spy',() => {}); 我收到错误“预期的间谍，但有一个功能”：

我不知道如何解决这个问题并测试 component.loadReports() 是否已被调用。虽然 setCurrentPageDetails() 方法的间谍工作正常，因为它是类的方法。有人可以帮忙吗？

解决方法

您正在定义 loadReports() 方法的签名，但您没有提供任何实现。当 jasmine 尝试设置间谍时，它需要一个函数，因此无法设置间谍。

为 loadReports() 添加一个实现，以便 jasmine 可以使用以下语法监视它：

spyOn(component,'loadReports');

您的问题是您正在实施 loadReports 并立即调用它，无法像这样监视它，SpyOn 需要实施：

如果您在调用 loadReports 之前监视 onReportTopupSearchFormSubmit ，它会抱怨 loadReports 不是函数。
如果您在调用 loadReports 之后监视 onReportTopupSearchFormSubmit ，则为时已晚，因为 loadReports 已经被调用。

我的建议是将 onReportTopupSearchFormSubmit 分成两种方法：

第一个动态实现 loadReports 的方法
第二种方法将使用之前的实现并在此处添加其余逻辑this.loadReports(0,this.currentPageDetails.size); this.setCurrentPageDetails(0,this.currentPageDetails.size);