Angular Testing Course

Author: jhades

src/app/app.module.ts

@@ -37,7 +37,10 @@ import {CoursesModule} from './courses/courses.module';
         BrowserModule,
         BrowserAnimationsModule,
         HttpClientModule,
-        CoursesModule
+        MatToolbarModule,
+        MatButtonModule,
+        CoursesModule,
+        AppRoutingModule
     ],
     providers: [
     ],

src/app/courses/courses.module.ts

@@ -44,18 +44,17 @@ import {CourseResolver} from './services/course.resolver';
     MatTabsModule,
     MatSidenavModule,
     MatListModule,
-    MatToolbarModule,
     MatInputModule,
     MatTableModule,
     MatPaginatorModule,
     MatSortModule,
     MatProgressSpinnerModule,
     MatDialogModule,
-    AppRoutingModule,
     MatSelectModule,
     MatDatepickerModule,
     MatMomentDateModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    AppRoutingModule
   ],
   exports: [
     HomeComponent,

src/app/courses/home/home.component.html

@@ -5,24 +5,35 @@ <h3>All Courses</h3>
 
     <mat-tab-group>
 
-        <mat-tab label="Beginners">
 
-            <courses-card-list (courseEdited)="reloadCourses()"
-                    [courses]="beginnerCourses$ | async">
+      <ng-container *ngIf="(beginnerCourses$ | async) as beginnerCourses">
 
-            </courses-card-list>
+        <mat-tab label="Beginners" *ngIf="beginnerCourses?.length > 0">
+
+          <courses-card-list (courseEdited)="reloadCourses()"
+                             [courses]="beginnerCourses">
+
+          </courses-card-list>
 
         </mat-tab>
 
-        <mat-tab label="Advanced">
+      </ng-container>
+
+
+      <ng-container  *ngIf="(advancedCourses$ | async) as advancedCourses">
 
-            <courses-card-list (courseEdited)="reloadCourses()"
-                    [courses]="advancedCourses$ | async"
+        <mat-tab label="Advanced" *ngIf="advancedCourses?.length > 0">
 
-            ></courses-card-list>
+          <courses-card-list (courseEdited)="reloadCourses()"
+                             [courses]="advancedCourses">
+
+
+          </courses-card-list>
 
         </mat-tab>
 
+      </ng-container>
+
     </mat-tab-group>
 
 </div>

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

@@ -0,0 +1,71 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {CoursesModule} from '../courses.module';
+import {DebugElement} from '@angular/core';
+
+import {HomeComponent} from './home.component';
+import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
+import {CoursesService} from '../services/courses.service';
+import {HttpClient} from '@angular/common/http';
+import {COURSES} from '../../../../server/db-data';
+import {setupCourses} from '../common/setup-test-data';
+import {By} from '@angular/platform-browser';
+import {of} from 'rxjs';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+
+
+
+
+fdescribe('HomeComponent', () => {
+
+  let fixture: ComponentFixture<HomeComponent>;
+  let component:HomeComponent;
+  let el: DebugElement;
+  let courseServicesSpy: any;
+
+  courseServicesSpy = jasmine.createSpyObj('CoursesService', ['findAllCourses']);
+
+  beforeEach(async(() => {
+
+    TestBed.configureTestingModule({
+      imports: [
+        CoursesModule,
+        NoopAnimationsModule
+      ],
+      providers: [
+        {provide: CoursesService, useValue: courseServicesSpy}
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.debugElement.componentInstance;
+    el = fixture.debugElement;
+
+
+  }));
+
+
+  it("should create the component", async(() => {
+
+    expect(component).toBeTruthy();
+
+  }));
+
+
+  it("should display only beginner courses", async(() => {
+
+    courseServicesSpy.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");
+
+  }));
+
+
+
+
+});
+
+