Блог

Главная - Вопросы по программированию - Как обрабатывать bootstrap-daterangepicker в модульном тестировании углового компонента?

Как обрабатывать bootstrap-daterangepicker в модульном тестировании углового компонента?

#unit-testing #jasmine #angular6 #karma-jasmine #bootstrap-daterangepicker

#модульное тестирование #jasmine #angular6 #карма-jasmine #bootstrap-daterangepicker

Вопрос:

Я пытаюсь написать модульный тест компонента angular 6, который инициализирует bootstrap-daterangepicker в методе ngAfterViewInit(). Когда я запускаю свой модульный тест, он выдает следующую ошибку:

Ошибка типа: $(…).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();
  });

Ответ №1:

Вам не нужно обращаться с этим в ваших тестовых примерах. Этот компонент должен быть инициализирован в отдельном сервисе, и вы можете просто имитировать этот метод из сервиса. Таким образом, вы можете избежать этой ошибки.

допустим, вы перемещаете весь код initializeDatePicker() в метод в некотором сервисе, скажем, common-service.ts, и вы можете просто вызвать эту службу из этого метода, например

 this.commonServiceObj.initializeDatePicker();

Теперь, сделав это, вы можете просто имитировать initializeDatePicker() из объекта service, и ошибка должна исчезнуть.

Метки: