时间戳

首页 > 解决方案 > 通过茉莉花测试Angular中的内部功能

angular - 通过茉莉花测试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();
  });

  1. 如果我尝试 spyOn从 jasmine 使用，测试运行器会给出一个错误，说明如下： loadReports() 不是方法

  2. 如果我尝试使用jasmine.createSpy，像这样：

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

我不确定如何解决这个问题并测试是否调用了 component.loadReports()。而 setCurrentPageDetails() 方法的间谍工作正常，因为它是类的方法。任何人都可以帮忙吗？

标签： angulartypescriptjasmineclosuresangular-test

解决方案

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

  • 如果你在调用它loadReports 之前onReportTopupSearchFormSubmitspyOn会抱怨这loadReports不是一个函数。
  • 如果您在调用spyOnloadReports 后进行onReportTopupSearchFormSubmit监视，则为时已晚，因为loadReports已经调用了 。

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

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

推荐阅读