Angular Testing

[arunselvakumar]

import { TestBed } from '@angular/core/testing';

[arunselvakumar]

Creating a dynamic testing module. TestBed.configureTestingModule({ declarations: [VotingComponent] });

Straight out of NgModule - A Ripoff

[arunselvakumar]

To Create a instance of this component, We call

TestBed.createComponent(VoterComponent); // It doesn't return an instance of the component, it returns a component fixture. ComponentFixture It's a wrapper around the component, so that it provides access to the template

[arunselvakumar]

let component: VoterComponent; let componentFixture: ComponentFixture

[arunselvakumar]

componentFixture = TestBed.createComponent(VoterComponent); component = componentFixture.componentInstance();

[arunselvakumar]

componentFixture.nativeElement // exposes the full DOM componentFixutre.debugElement // allows to query.

[arunselvakumar]

import { By } from '@angular/platform-browser'; fixture.debugElement.query(By.css('.value')); // returns the first element of the list. fixture.debugElement.queryAll(By.css('.value')); // returns all the matched items from the list.

let el: HTMLElement = de.nativeElement;

[arunselvakumar]

expect(el.innerText).toContain(21);

[arunselvakumar]

fixture.detectChanges();

[arunselvakumar]

fixture.debugElement.query(By.directive(VoterComponent));

[arunselvakumar]

var button = fixture.debugElement.query(By.directive(VoterComponent)); button.triggerEventHandler('click', null); // Assert