Function headerDrag

devui/data-table/data-table-column.spec.ts:1476–1506

(fixture: ComponentFixture<TestDataTableColumnDragComponent>)

});

function headerDrag(fixture: ComponentFixture<TestDataTableColumnDragComponent>) {
  const debugEl = fixture.debugElement;
  let dHeaderCells = debugEl.queryAll(By.css('.devui-data-table table.devui-table thead tr th'));
  expect(dHeaderCells[1].nativeElement.textContent).toContain('First Name');
  expect(dHeaderCells[2].nativeElement.textContent).toContain('Last Name');

  const columnFirstNameDragIcon = dHeaderCells[1].query(By.css('.drag-icon'));
  columnFirstNameDragIcon.nativeElement.style.visibility = 'visible';

  const { x: fromX, y: fromY } = columnFirstNameDragIcon.nativeElement.getBoundingClientRect();
  const { x: moveToX, y: moveToY, width, height } = dHeaderCells[2].nativeElement.getBoundingClientRect();
  const mouseDownEvt = createMouseEvent('mousedown', fromX, fromY);
  const mouseMoveEvt = createMouseEvent('mousemove', moveToX + width, moveToY + height / 2);
  const mouseUpEvt = createMouseEvent('mouseup');
  columnFirstNameDragIcon.nativeElement.dispatchEvent(mouseDownEvt);
  tick(); // emit onTap, setTimeout: wait for mousemove & mouseup addEventListener
  document.documentElement.dispatchEvent(mouseMoveEvt); // emit handleMouseMove, add event listener to grab
  tick();
  document.documentElement.dispatchEvent(mouseDownEvt); // emit grab
  tick(); // add event listener mouse move
  document.documentElement.dispatchEvent(mouseMoveEvt); // emit startBecauseMouseMoved
  tick();
  document.documentElement.dispatchEvent(mouseMoveEvt); // emit drag
  tick();
  document.documentElement.dispatchEvent(mouseUpEvt); // emit release
  flush();
  fixture.detectChanges();
  dHeaderCells = debugEl.queryAll(By.css('.devui-data-table table.devui-table thead tr th'));
  expect(dHeaderCells[1].nativeElement.textContent).toContain('Last Name');
  expect(dHeaderCells[2].nativeElement.textContent).toContain('First Name');
}