Как работать с bootstrap-daterangepicker в модульном тесте угловых компонентов? - PullRequest
Новая
       45

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

2 голосов
/ 18 апреля 2019

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

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();
  });

1 Ответ

0 голосов
/ 22 апреля 2019

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

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

this.commonServiceObj.initializeDatePicker();

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

...