Angular 7, как проверить директиву с помощью специального прослушивателя событий - PullRequest
Новая
       5

Angular 7, как проверить директиву с помощью специального прослушивателя событий

0 голосов
/ 19 февраля 2020

Я нуб в angular модульном тестировании, но интенсивно пытаюсь научиться этому. Поэтому, пожалуйста, не судите меня сильно. Я написал простую директиву, которая позволяет прикрепить thead к таблице HTML. 

private static tableFixHead(e: any): void {
 const el = e.target;
 const sT = el.scrollTop;

 const translate = `translateY(${sT}px)`;
 let cells = el.querySelectorAll('thead th');
 cells = [...Array.from(cells)];

 const table = el.getElementsByClassName('table');
 if (table[0]) {
  table[0].style.borderCollapse = 'separate';
 }

 for (let i = 0; i < cells.length; i++) {
  cells[i].style.transform = translate;
  cells[i].style.msTransform = translate;
  cells[i].style.zIndex = '99';
 }
}

private static getTableContainer(): void {
 const container = document.querySelectorAll('.container-wrapper');
  if (container[0]) {
   container[0].addEventListener('scroll', TableStickyHeaderDirective.tableFixHead);
  }
 }

@HostListener('mouseenter', ['$event.target']) onMouseEnter(): void {
  if (!this.foxTableStickyHeader) {
    return;
  }
  TableStickyHeaderDirective.getTableContainer();
 }

И теперь я пытаюсь написать для нее модульный тест, но могу найти способ выбросить событие прокрутки , 

  it('should create an instance', () => {
     const directive = new TableStickyHeaderDirective(document);
     expect(directive).toBeTruthy();
   });

  it('should apply transform and z-index styles on scroll', () => {

          const mockData: MockRow[] = [];

  for (let i = 0; i < 23; i++) {
    mockData.push({
      '#': i,
      'Name': 'Bob',
      'Lastname': 'Marley',
    })
  }

  /* mocking data and detecting changes */
  tableComponent.stickyHeader = true;
  tableComponent.tableData = mockData;
  tableComponent.tableColumns = columns;
  fixture.detectChanges();

  const container = document.querySelectorAll('.container-wrapper');
  expect(container).toBeDefined();

  for (let i = 0; i < container.length; i++) {

    let sT = container[i].scrollTop;
    let translate = `translateY(${sT}px)`;
    let cells = container[i].querySelectorAll('th');

    expect(container[i].scrollTop).toEqual(0);

    for (let c = 0; c < cells.length; c++) {
      expect(cells[i].style.transform).toEqual('');
      expect(cells[i].style.zIndex).toEqual('');
    }

    fixture.detectChanges();

    container[i].scrollTop = 300;
    const scroll = new Event('scroll');
    container[i].dispatchEvent(scroll);

    sT = container[i].scrollTop;
    translate = `translateY(${sT}px)`;
    cells = container[i].querySelectorAll('th');

    expect(container[i].scrollTop).toEqual(300);

    for (let c = 0; c < cells.length; c++) {
      expect(cells[i].style.transform).toEqual(translate);
      expect(cells[i].style.zIndex).toEqual('99');
    }

    fixture.detectChanges();
  }
    }
  );

и модульный тест не пройден на шаге

expect(cells[i].style.transform).toEqual(translate);

ожидаем (получен) .toEqual (ожидается) // глубокое равенство

Ожидается: "translateY (300px)" Получено: ""

Может кто-нибудь помочь мне решить мою проблему?

...