Angular 2 - Component test using TestBed and Fixtures

Angular 2 - Component test using TestBed and Fixtures

import { async, TestBed, fakeAsync, tick } from "@angular/core/testing";
import { Observable } from "rxjs";

import { TooltipComponent } from "./tooltip.component";
import { TooltipService } from "./tooltip.service";

import { Sanitizer } from "../../../utils/eh.sanitizer.util.service";


class MockToolTipService {
    getExplanation(assestId: number): Observable<any> {
        return Observable.of({ "explanation": "some_text"});
    }
}

let fixture: any,
    elements: any,
    app: any;

describe("ToolTipComponent", () => {
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [
                TooltipComponent
            ],
            providers: [
               Sanitizer,
               { provide: TooltipService, useClass: MockToolTipService }
            ]
        });

        TestBed.overrideComponent(TooltipComponent, {
            set: {
              template: `<div *ngIf="showExplanation">
                            <section class="tooltip-icon"
                                (click)="showTooltip()">
                            </section>
                            <section class="explaination-container" [innerHtml]="explanation">
                            </section>
                          </div>`
            }
        }).compileComponents();

        fixture = TestBed.createComponent(TooltipComponent);
        elements = fixture.nativeElement;
        app = fixture.componentInstance;
    }));

    it("should NOT display an icon if there is NOT an explaination", (): void => {
            app.showExplanation = false;
            fixture.detectChanges();
            expect(elements.querySelectorAll("div").length).toBe(0);
    });

    it("should display an icon if there is an explaination", (): void => {
            app.showExplanation = true;
            fixture.detectChanges();
            expect(elements.querySelectorAll("div").length).toBe(1);
    });

    describe("When clicking on the tooltip icon", () => {

        beforeEach(() => {
            app.showExplanation = true;
            app.assestId = 1234;
        });

        it("should get the correct explaination based on the assestId", <any>fakeAsync((): void => {
                spyOn(app, "getExplanation");

                fixture.detectChanges();

                let tooltip = elements.getElementsByClassName("tooltip-icon")[0];
                tooltip.dispatchEvent(new Event("click"));

                expect(app.getExplanation).toHaveBeenCalledWith(1234);
                tick();
        }));

        it("should display an explaination", <any>fakeAsync((): void => {
                app.getExplanation(10001);

                fixture.detectChanges();

                let explainationContainer = elements.getElementsByClassName("explaination-container");

                expect(explainationContainer[0].innerHTML).toEqual("some_text");
                tick();
        }));
    });
});