Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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();
}));
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment