如何处理角度组件单元测试中的bootstrap-daterangepicker？

Question

我正在尝试编写angular 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()，这样错误就会消失。