时间戳

首页 > 解决方案 > 如何在角度组件单元测试中处理 bootstrap-daterangepicker？

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

问题描述

我正在尝试编写 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();
  });

标签： unit-testingjasmineangular6karma-jasminebootstrap-daterangepicker

解决方案

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

假设您将 initializeDatePicker() 的所有代码移动到某个服务的方法中，比如说 common-service.ts，您可以简单地从该方法调用该服务，例如

this.commonServiceObj.initializeDatePicker();

现在这样做之后，您可以简单地从服务对象模拟 initializeDatePicker() 并且错误应该消失了。

推荐阅读