I have a fairly simple angular 2 component that I want to test, here is the code for the component:
import { Component, OnInit } from '@angular/core';
import { ContentfulService, CacheStorageService, MembershipService } from '../../services/index';
import { Observable } from 'rxjs/Rx';
import { CONSTANTS } from '../constant/index';
import { UserModel } from '../../models/index';
@Component({
moduleId: module.id,
selector: 'dt-header',
templateUrl: 'header.html'
})
export class HeaderComponent implements OnInit {
public logo: string;
public contactText: string;
public contactAddress: string;
public loginText: string;
public loginAddress: string;
public userLoggedIn: Boolean = false;
public user: UserModel;
constructor(private _contentService: ContentfulService,
private _localstorage: CacheStorageService,
private _membership: MembershipService) {
_membership.loggedInNotify.subscribe(status => this.onLoginChange(status));
}
ngOnInit() {
// check if content is stored locally first, if not get from CMS
if (this._localstorage.get('headerData') == null) {
/* tslint:disable:no-string-literal */
this._contentService.getEntry('&content_type=' + CONSTANTS.MAIN.APP.GLOBAL_ELEMENTS).subscribe(
data => {
this._localstorage.set('headerData', JSON.stringify(data));
this.fillData(data);
},
err => {
console.log(err);
});
/* tslint:enable:no-string-literal */
} else {
this.fillData(JSON.parse(this._localstorage.get('headerData')));
}
if (this._membership.loggedIn) {
this.userLoggedIn = true;
this.user = this._membership.user;
}
}
public logout() {
this._membership.logout();
this.userLoggedIn = false;
this.user = null;
alert('Logged out!');
return false;
}
private fillData(data) {
this.contactText = data.items[0].fields.contactUs;
this.contactAddress = data.items[0].fields.contactUsLink;
this.loginAddress = data.items[0].fields.loginToAccountLink;
this.loginText = data.items[0].fields.loginToAccountText;
let logo = this._contentService.getLinkedAsset(data, data.items[0].fields.logo.sys.id);
this.logo = logo.fields.file.url;
}
private onLoginChange(loggedIn: Boolean): void {
this.userLoggedIn = loggedIn;
if (loggedIn) {
this.user = this._membership.user;
}
}
}
and here is the test:
import { Observable } from 'rxjs/Rx';
import { TestBed, async } from '@angular/core/testing';
import { HeaderComponent } from './header.component';
import { StudentService } from '../../services/index';
describe("Header Component", () => {
let greet = "Hello Asd123";
let studentService;
beforeEach(() => {
studentService = {
greet: jasmine.createSpy("greet").and.returnValue(Observable.of(greet))
};
TestBed.configureTestingModule({
declarations: [
HeaderComponent
],
providers: [
{provide: StudentService, useValue: studentService}
]
});
});
it("can initialize header", async(() => {
TestBed.compileComponents().then(() => {
const fixture = TestBed.createComponent(HeaderComponent);
let element = fixture.nativeElement;
let component = fixture.componentInstance;
fixture.detectChanges();
expect(element).not.toBeNull();
expect(component).not.toBeNull();
expect(studentService.greet).toHaveBeenCalled();
let header = element.querySelector("div");
expect(header).not.toBeNull();
// expect(header.textContent).toBe("Greeting test");
let greeting = element.querySelector("div");
expect(greeting).not.toBeNull();
// expect(greeting.textContent).toBe(greet);
});
}));
});
When I run this test I get the following output in the console:
PhantomJS 2.1.1 (Windows 8 0.0.0) Header Component can initialize header FAILED invokeTask@node_modules/http://ift.tt/2nNJeZc onInvokeTask@node_modules/http://ift.tt/2nWpwYg invokeTask@node_modules/http://ift.tt/2nNArGI runTask@node_modules/http://ift.tt/2nWxaBV drainMicroTaskQueue@node_modules/http://ift.tt/2nNHVJJ g@node_modules/core-js/client/shim.min.js:8:19058 node_modules/core-js/client/shim.min.js:8:19180 k@node_modules/core-js/client/shim.min.js:8:14294 resolvePromise@node_modules/http://ift.tt/2nWrs33 resolvePromise@node_modules/http://ift.tt/2nNAtyk node_modules/http://ift.tt/2nWrV53 PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 16 of 16 (1 FAILED) (0.989 secs / 0.845 secs) [16:38:55] Remapping coverage to TypeScript format... [16:38:56] Test Done with exit code: 1 [16:38:56] 'unit-test' errored after 14 s [16:38:56] Error: 1 at formatError (C:\Users\jonathan.lane\Documents\dt-front-end\node_modules\gulp\bin\gulp.js:169:10) at Gulp. (C:\Users\jonathan.lane\Documents\dt-front-end\node_modules\gulp\bin\gulp.js:195:15) at emitOne (events.js:101:20) at Gulp.emit (events.js:188:7) at Gulp.Orchestrator._emitTaskDone (C:\Users\jonathan.lane\Documents\dt-front-end\node_modules\orchestrator\index.js:264:8) at C:\Users\jonathan.lane\Documents\dt-front-end\node_modules\orchestrator\index.js:275:23 at finish (C:\Users\jonathan.lane\Documents\dt-front-end\node_modules\orchestrator\lib\runTask.js:21:8) at cb (C:\Users\jonathan.lane\Documents\dt-front-end\node_modules\orchestrator\lib\runTask.js:29:3) at DestroyableTransform. (C:\Users\jonathan.lane\Documents\dt-front-end\config\gulp\tasks\test.js:67:13) at emitNone (events.js:91:20) at DestroyableTransform.emit (events.js:185:7) at finishMaybe (C:\Users\jonathan.lane\Documents\dt-front-end\node_modules\remap-istanbul\node_modules\readable-stream\lib_stream_writable.js:475:14) at afterWrite (C:\Users\jonathan.lane\Documents\dt-front-end\node_modules\remap-istanbul\node_modules\readable-stream\lib_stream_writable.js:361:3) at onwrite (C:\Users\jonathan.lane\Documents\dt-front-end\node_modules\remap-istanbul\node_modules\readable-stream\lib_stream_writable.js:352:9) at WritableState.onwrite (C:\Users\jonathan.lane\Documents\dt-front-end\node_modules\remap-istanbul\node_modules\readable-stream\lib_stream_writable.js:123:5) at afterTransform (C:\Users\jonathan.lane\Documents\dt-front-end\node_modules\remap-istanbul\node_modules\readable-stream\lib_stream_transform.js:81:3)
Aucun commentaire:
Enregistrer un commentaire