angular-testing-tools

A set of tools for better handling tests in Angular

Install

npm install angular-testing-tools --save-dev

Mocking methods

Example usage:

import { SomeComponent } from './some.component';      

import { AuthService } from './auth.service';      

import { mockClass, mockDirective, mockComponent } from 'angular-testing-tools'

beforeEach(() => {

TestBed.configureTestingModule({

declarations: [

SomeComponent,

mockDirective('app-main-menu'),

mockComponent('app-table-row', {methods: ['select'], inputs: ['product'], outputs: ['onSelected']})

],

providers: [

{provide: AuthService, useClass: mockClass(['login', 'logout'])}

]

});

});

mockClass(methods: string)

Creates mocked class which can be used as a service.

mockClass(['login', 'logout'])

mockDirective(selector: string, options: MockDirectiveOptions)

Creates mocked directive.

mockDirective('app-main-menu')

mockComponent(selector: string, options: MockDirectiveOptions)

Creates mocked component.

mockComponent('app-table-row', {

methods: ['select'], 

inputs: ['product'], 

outputs: ['onSelected'],

template: '{{product.name}}'

})

TestPage

Import TestPage class and create an instance:

import { SomeComponent } from './some.component';                              

import { TestPage } from 'angular-testing-tools';

// ..

let testPage;

beforeEach(() => {

let testPage = TestPage.create(SomeComponent);

testPage.detectChanges();

});

TestPage properties

testPage.componentInstance        

TestPage methods

Since TestPage class extends TestElement class, you can use all the TestElement methods on the TestPage instance, eg. testPage.textContent().

TestPage.create(component)

Creates a component's fixture and returns TestPage instance.

TestPage.create(SomeComponent);

detectChanges

Calls detectChanges on created fixture

testPage.detectChanges();

TestElement properties

testPage.nativeElement

testPage.classes   

TestElement methods

get(cssSelector: string)

Returns descendant of current element by css selector as TestElement instance

testPage.get('#some-section')

getAll(cssSelector: string)

Returns descendants of current element by css selector as TestElement instances

testPage.getAll('.some-class')        

textContent()

Returns text of current element.

testPage.get('#some-section').textContent();

input(value: string)

Inputs value to the current element.

testPage.get('input').input('some value');

click()

Performs native click on current element.

testPage.get('button').click();

trigger(eventName: string, eventObject: any)

Triggers Angular event on current element.

testPage.get('button').trigger('dbclick');

attr(name: string)

Returns given attribute's value of native element.

testPage.get('input').attr('value');