jeudi 23 mars 2017

Cant seem to get a simple PhantomJS test to pass for an Angular 2 Component

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