angular-testing-utils
TypeScript icon, indicating that this package has built-in type declarations

0.0.21 • Public • Published

Angular testing utilities

This library contains some utilities which shall help to write unit and e2e tests for angular applications.

Browser support

  • Firefox
  • Chrome
  • Internet Explorer 11

Drag & drop

To test whether drag & drop works properly the dragAndDrop(sourceElement, destinationElement, options) function helps to simplify this task. You can use this helper function in e2e and unit tests.

Unit tests

import { async, TestBed } from '@angular/core/testing';
import { TestHostComponent } from './test-host.component';
import { dragAndDrop } from 'angular-testing-utils';

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [
      TestHostComponent,
    ]
  }).compileComponents();
}));

it('should drag & drop', () => {
  // Arrange
  const fixture = TestBed.createComponent(TestHostComponent);
  const draggable = fixture.nativeElement.querySelector('app-draggable');
  const dropZone = fixture.nativeElement.querySelector('app-drop-zone');
    
  // Act
  dragAndDrop(draggable, dropZone);
  
  fixture.detectChanges();
  
  // Assert
  // expect(dropZone).to...
});

e2e tests

import { browser, by, element } from 'protractor';
import { dragAndDrop } from 'angular-testing-utils';

it('should drag & drop', async () => {
  // Arrange
  const draggable = element(by.id('draggable'));
  const dropZone = element(by.id('drop-zone'));
  
  // Act
  await browser.executeScript(dragAndDrop, draggable.getWebElement(), dropZone.getWebElement());
  
  // Assert
  expect(dropZone.element(by.id('draggable')).isPresent()).toBe(true);
});

Capture drag events

If it is required to get all triggered drag events the captureDragEvents(sourceElement, destinationElement): Observable<DragEvent> function can be used to listen for these events. It must be called before the dragAndDrop() function.

import { dragAndDrop, captureDragEvents } from 'angular-testing-utils';
import { toArray } from 'rxjs/operators';

it('should capture drag events', async () => {
  // Arrange
  const draggable = fixture.nativeElement.querySelector('app-draggable');
  const dropZone = fixture.nativeElement.querySelector('app-drop-zone');
    
  // Act
  const events = captureDragEvents(draggable, dropZone)
    .pipe(toArray())
    .toPromise();
  
  dragAndDrop(draggable, dropZone);
  
  const actualEvents = await events;
  
  // Assert
  expect(actualEvents.length).toBeGreaterThan(0);
  expect(actualEvents[0].type).toEqual('dragstart');
});

Operators

There are some rx operators which can help to find specific events.

filterBy

The filterBy(criterion) operator filters the event stream by the given criterion which can be a HTMLElement or the specific event type.

import { captureDragEvents, filterBy } from 'angular-testing-utils';

// filters by the given HTMLElement
captureDragEvents(draggable, dropZone)
  .pipe(
    filterBy(draggable)
  );

// filters by the given drag event type
captureDragEvents(draggable, dropZone)
  .pipe(
    filterBy('dragenter')
  );
firstWhere & lastWhere

These two operators gets the first or last drag event in the stream.

import { captureDragEvents, firstWhere, lastWhere } from 'angular-testing-utils';

// gets first drag event where target matches the dropZone element
captureDragEvents(draggable, dropZone)
  .pipe(
    firstWhere(dropZone)
  );

// gets the last drag event where the targets event type matches 'drag'
captureDragEvents(draggable, dropZone)
  .pipe(
    lastWhere('drag')
  );

Readme

Keywords

Package Sidebar

Install

npm i angular-testing-utils

Weekly Downloads

0

Version

0.0.21

License

MIT

Unpacked Size

73.9 kB

Total Files

31

Last publish

Collaborators

  • masterlinux