如何在 angular 组件单元测试中处理 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);
  }

这是我测试的代码 class:

        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()，错误应该消失了。

如何在 angular 组件单元测试中处理 bootstrap-daterangepicker？

How to handle bootstrap-daterangepicker in angular component unit test?

unit-testing

jasmine

karma-jasmine

bootstrap-daterangepicker

angular6