如何在角度分量单元测试中处理bootstrap-daterangepicker？

Question

我正在尝试编写一个角度为6的组件的单元测试，它正在ngAfterViewInit（）方法中初始化bootstrap-daterangepicker。当我运行单元测试时，它会出现以下错误：

TypeError：$（...）。daterangepicker不是函数

这是来自实际组件（EmployeeComponent）的代码：

ngAfterViewInit(): void {
    this.initializeDatePicker(this);
  }

initializeDatePicker(that: any) {
    const start = moment().subtract(7, 'days');
    const end = moment();

    $('#reportrange').daterangepicker({
      startDate: start,
      endDate: end,
      maxDate: moment(),
      ranges: {
        'Today': [moment(), moment()],
        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')]
      }
    }, cb);
    cb(start, end);
  }

这是我的测试类的代码：

        describe('EmployeeComponent', () => {
  let component: EmployeeComponent;
  let fixture: ComponentFixture<EmployeeComponent>;
  let messageService: NotificationService;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [EmployeeComponent]
    })
      .overrideComponent(EmployeeComponent, {
        set: {
          template: '',
          providers: [
            { provide: NotificationService, useValue: messageService },
            { provide: ActivatedRoute, useValue: { queryParams: of({ emp: "123" }) } }
          ]
        }
      })
      .compileComponents();
  }));

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

  it('should create', () => {
    expect(component).toBeTruthy();
  });

Answer 1

您不需要在测试用例中处理它。该组件应该在单独的服务中初始化，您只需从服务中模拟该方法即可。在这种方式，你可以避免这种错误。

假设你在一些服务的方法中移动initializeDatePicker（）的所有代码，比如common-service.ts，你可以简单地从这个方法中调用该服务

this.commonServiceObj.initializeDatePicker();

在完成此操作之后，您可以简单地从服务对象模拟initializeDatePicker（）并且错误应该消失。