Angular Testing Course

Author: jhades

.gitignore

@@ -40,3 +40,4 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+tmp.html

src/app/app.component.spec.ts

@@ -8,7 +8,7 @@ import {By} from '@angular/platform-browser';
 describe('AppComponent', () => {
 
 
-  beforeEach(async(() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
         RouterTestingModule,
@@ -22,36 +22,36 @@ describe('AppComponent', () => {
         AppComponent
       ],
     }).compileComponents();
-  }));
+  });
 
 
 
-  it('should create the app', async(() => {
+  it('should create the app', () => {
 
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
 
-  }));
+  });
 
 
 
-  it(`should have a title property`, async(() => {
+  it(`should have a title property`, () => {
 
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app.title).toEqual('Angular Testing Course');
 
-  }));
+  });
 
 
 
-  it('should have a navigation menu', async(() => {
+  it('should have a navigation menu', () => {
 
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     expect(fixture.debugElement.queryAll(By.css('mat-toolbar'))).toBeTruthy();
 
-  }));
+  });
 
 });

src/app/courses/courses-card-list/courses-card-list.component.spec.ts

@@ -17,8 +17,7 @@ describe('CoursesCardListComponent', () => {
   let component:CoursesCardListComponent;
   let el: DebugElement;
 
-  beforeEach(async(() => {
-
+  beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
         CoursesModule
@@ -29,17 +28,25 @@ describe('CoursesCardListComponent', () => {
     component = fixture.debugElement.componentInstance;
     el = fixture.debugElement;
 
-  }));
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CoursesCardListComponent);
+    component = fixture.componentInstance;
+    el = fixture.debugElement;
+    fixture.detectChanges();
+
+  });
 
 
-  it("should create the component", async(() => {
+  it("should create the component", () => {
 
     expect(component).toBeTruthy();
 
-  }));
+  });
 
 
-  it("should display the course list", async(() => {
+  it("should display the course list", () => {
 
     component.courses = setupCourses();
 
@@ -50,10 +57,10 @@ describe('CoursesCardListComponent', () => {
     expect(cards).toBeTruthy("Could not finds cards");
     expect(cards.length).toBe(12, "Unexpected number of courses");
 
-  }));
+  });
 
 
-  it("should display the first course", async(() => {
+  it("should display the first course", () => {
 
     component.courses = setupCourses();
 
@@ -70,7 +77,7 @@ describe('CoursesCardListComponent', () => {
     expect(image.nativeElement.src).toBe(course.iconUrl, "Wrong image found");
 
 
-  }));
+  });
 
 
 });

src/app/courses/home/home.component.spec.ts

@@ -15,16 +15,15 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
 
 
-fdescribe('HomeComponent', () => {
+describe('HomeComponent', () => {
 
   let fixture: ComponentFixture<HomeComponent>;
   let component:HomeComponent;
   let el: DebugElement;
-  let courseServicesSpy: any;
 
-  courseServicesSpy = jasmine.createSpyObj('CoursesService', ['findAllCourses']);
+  beforeEach((() => {
 
-  beforeEach(async(() => {
+    const courseServicesSpy = jasmine.createSpyObj('CoursesService', ['findAllCourses']);
 
     TestBed.configureTestingModule({
       imports: [
@@ -35,36 +34,62 @@ fdescribe('HomeComponent', () => {
         {provide: CoursesService, useValue: courseServicesSpy}
       ]
     }).compileComponents();
+  }));
+
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(HomeComponent);
-    component = fixture.debugElement.componentInstance;
+    component = fixture.componentInstance;
     el = fixture.debugElement;
+  });
 
 
-  }));
-
-
-  it("should create the component", async(() => {
+  it("should create the component", () => {
 
     expect(component).toBeTruthy();
 
-  }));
+  });
 
 
-  it("should display only beginner courses", async(() => {
+  it("should display only beginner courses", () => {
 
-    courseServicesSpy.findAllCourses.and.returnValue(of(setupCourses().filter(course => course.category == 'BEGINNER')));
+    TestBed.get(CoursesService).findAllCourses.and.returnValue(
+      of(setupCourses().filter(course => course.category == 'BEGINNER')));
 
     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", () => {
+
+    TestBed.get(CoursesService).findAllCourses.and.returnValue(
+      of(setupCourses().filter(course => course.category == 'ADVANCED')));
+
+    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", () => {
+
+    TestBed.get(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");
 
+  });
 
 });
 

src/app/courses/home/home.component.ts

@@ -22,6 +22,8 @@ export class HomeComponent implements OnInit {
 
     ngOnInit() {
 
+      console.log("called Home ngOnInit()");
+
       this.reloadCourses();
 
     }