Question

我对角单元测试不感兴趣，但是正在广泛尝试学习它。所以请不要刻薄地评价我。我写了一个简单的指令，该指令允许将thead粘贴到HTML表的div。

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

expect（received）.toEqual（expected）//深度平等

预期：“ translateY（300px）” 收到：“”

有人可以帮助我解决我的问题吗？

Angular 7，如何使用自定义事件侦听器测试指令

0 个答案: