Created
June 19, 2019 10:33
-
-
Save MatLang/72be0e16efd917f07e1799b2a45d8e28 to your computer and use it in GitHub Desktop.
Smart component testing #testing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
describe("HomeComponent", () => { | |
let fixture: ComponentFixture<HomeComponent>; | |
let component: HomeComponent; | |
let el: DebugElement; | |
let coursesService: any; | |
const beginnerCourses = setupCourses().filter( | |
course => course.category == "BEGINNER" | |
); | |
const advancedCourses = setupCourses().filter( | |
course => course.category == "ADVANCED" | |
); | |
beforeEach(async(() => { | |
const coursesServiceSpy = jasmine.createSpyObj("CoursesService", [ | |
"findAllCourses" | |
]); | |
TestBed.configureTestingModule({ | |
imports: [CoursesModule, NoopAnimationsModule], | |
providers: [{ provide: CoursesService, useValue: coursesServiceSpy }] | |
}) | |
.compileComponents() | |
.then(() => { | |
fixture = TestBed.createComponent(HomeComponent); | |
component = fixture.componentInstance; | |
el = fixture.debugElement; | |
coursesService = TestBed.get(CoursesService); | |
}); | |
})); | |
it("should create the component", () => { | |
expect(component).toBeTruthy(); | |
}); | |
it("should display only beginner courses", () => { | |
coursesService.findAllCourses.and.returnValue(of(beginnerCourses)); | |
fixture.detectChanges(); | |
const tabs = el.queryAll(By.css(".mat-tab-label")); | |
expect(tabs.length).toBe(1, "Unexpected number of tabs found"); | |
}); | |
it("should display only advanced courses", () => { | |
coursesService.findAllCourses.and.returnValue(of(advancedCourses)); | |
fixture.detectChanges(); | |
const tabs = el.queryAll(By.css(".mat-tab-label")); | |
expect(tabs.length).toBe(1, "Unexpected number of tabs found"); | |
}); | |
it("should display both tabs", () => { | |
coursesService.findAllCourses.and.returnValue(of(setupCourses())); | |
fixture.detectChanges(); | |
const tabs = el.queryAll(By.css(".mat-tab-label")); | |
expect(tabs.length).toBe(2, "Expected to find 2 tabs"); | |
}); | |
it("should display advanced courses when tab clicked - fakeAsync", fakeAsync(() => { | |
coursesService.findAllCourses.and.returnValue(of(setupCourses())); | |
fixture.detectChanges(); | |
const tabs = el.queryAll(By.css(".mat-tab-label")); | |
click(tabs[1]); | |
fixture.detectChanges(); | |
flush(); | |
const cardTitles = el.queryAll(By.css(".mat-card-title")); | |
expect(cardTitles.length).toBeGreaterThan(0, "Could not find card titles"); | |
expect(cardTitles[0].nativeElement.textContent).toContain( | |
"Angular Security Course" | |
); | |
})); | |
it("should display advanced courses when tab clicked - async", async(() => { | |
coursesService.findAllCourses.and.returnValue(of(setupCourses())); | |
fixture.detectChanges(); | |
const tabs = el.queryAll(By.css(".mat-tab-label")); | |
click(tabs[1]); | |
fixture.detectChanges(); | |
fixture.whenStable().then(() => { | |
console.log("called whenStable() "); | |
const cardTitles = el.queryAll(By.css(".mat-card-title")); | |
expect(cardTitles.length).toBeGreaterThan( | |
0, | |
"Could not find card titles" | |
); | |
expect(cardTitles[0].nativeElement.textContent).toContain( | |
"Angular Security Course" | |
); | |
}); | |
})); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment