Angular Testing Course

Author: jhades

src/app/app-routing.module.ts

@@ -1,9 +1,9 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import {HomeComponent} from "./home/home.component";
+import {HomeComponent} from "./courses/home/home.component";
 import {AboutComponent} from "./about/about.component";
-import {CourseComponent} from "./course/course.component";
-import {CourseResolver} from "./services/course.resolver";
+import {CourseComponent} from "./courses/course/course.component";
+import {CourseResolver} from "./courses/services/course.resolver";
 
 const routes: Routes = [
     {

src/app/app.module.ts

@@ -8,11 +8,11 @@ import {MatMenuModule} from '@angular/material/menu';
 import {MatButtonModule} from '@angular/material/button'
 import {MatIconModule} from '@angular/material/icon';
 import {MatCardModule} from '@angular/material/card';
-import { HomeComponent } from './home/home.component';
+import { HomeComponent } from './courses/home/home.component';
 import { AboutComponent } from './about/about.component';
 import {MatTabsModule} from '@angular/material/tabs';
-import { CoursesCardListComponent } from './courses-card-list/courses-card-list.component';
-import {CourseComponent} from "./course/course.component";
+import { CoursesCardListComponent } from './courses/courses-card-list/courses-card-list.component';
+import {CourseComponent} from "./courses/course/course.component";
 import {
     MatDatepickerModule,
     MatDialogModule,
@@ -21,52 +21,28 @@ import {
     MatTableModule,
     MatToolbarModule
 } from "@angular/material";
-import {CoursesService} from "./services/courses.service";
+import {CoursesService} from "./courses/services/courses.service";
 import {HttpClientModule} from "@angular/common/http";
-import {CourseResolver} from "./services/course.resolver";
-import { CourseDialogComponent } from './course-dialog/course-dialog.component';
+import {CourseResolver} from "./courses/services/course.resolver";
+import { CourseDialogComponent } from './courses/course-dialog/course-dialog.component';
 import {ReactiveFormsModule} from "@angular/forms";
 import {MatMomentDateModule} from "@angular/material-moment-adapter";
+import {CoursesModule} from './courses/courses.module';
 
 @NgModule({
     declarations: [
-        AppComponent,
-        HomeComponent,
-        AboutComponent,
-        CourseComponent,
-        CoursesCardListComponent,
-        CourseDialogComponent
+      AppComponent
     ],
     imports: [
         BrowserModule,
         BrowserAnimationsModule,
         HttpClientModule,
-        MatMenuModule,
-        MatButtonModule,MatToolbarModule,
-        MatIconModule,
-        MatCardModule,
-        MatTabsModule,
-        MatSidenavModule,
-        MatListModule,
-        MatToolbarModule,
-        MatInputModule,
-        MatTableModule,
-        MatPaginatorModule,
-        MatSortModule,
-        MatProgressSpinnerModule,
-        MatDialogModule,
-        AppRoutingModule,
-        MatSelectModule,
-        MatDatepickerModule,
-        MatMomentDateModule,
-        ReactiveFormsModule
+        CoursesModule
     ],
     providers: [
-        CoursesService,
-        CourseResolver
     ],
-    bootstrap: [AppComponent],
-    entryComponents: [CourseDialogComponent]
+    bootstrap: [AppComponent]
+
 })
 export class AppModule {
 }

src/app/courses/common/setup-test-data.ts

@@ -0,0 +1,10 @@
+import {Course} from '../model/course';
+import {COURSES} from '../../../../server/db-data';
+import {sortCoursesBySeqNo} from '../home/sort-course-by-seq';
+
+
+export function setupCourses() : Course[] {
+  return Object.values(COURSES).sort(sortCoursesBySeqNo) as Course[];
+}
+
+

src/app/course-dialog/course-dialog.component.css renamed to src/app/courses/course-dialog/course-dialog.component.css

@@ -0,0 +1,78 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {CoursesCardListComponent} from './courses-card-list.component';
+import {CoursesModule} from '../courses.module';
+import {COURSES} from '../../../../server/db-data';
+import {DebugElement} from '@angular/core';
+import {By} from '@angular/platform-browser';
+import {sortCoursesBySeqNo} from '../home/sort-course-by-seq';
+import {Course} from '../model/course';
+import {setupCourses} from '../common/setup-test-data';
+
+
+
+
+describe('CoursesCardListComponent', async () => {
+
+  let fixture: ComponentFixture<CoursesCardListComponent>;
+  let component:CoursesCardListComponent;
+  let el: DebugElement;
+
+  beforeEach(async(() => {
+
+    TestBed.configureTestingModule({
+      imports: [
+        CoursesModule
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CoursesCardListComponent);
+    component = fixture.debugElement.componentInstance;
+    el = fixture.debugElement;
+
+  }));
+
+
+  it("should create the component", async(() => {
+
+    expect(component).toBeTruthy();
+
+  }));
+
+
+  it("should display the course list", async(() => {
+
+    component.courses = setupCourses();
+
+    fixture.detectChanges();
+
+    const cards = el.queryAll(By.css('.course-card'));
+
+    expect(cards).toBeTruthy("Could not finds cards");
+    expect(cards.length).toBe(12, "Unexpected number of courses");
+
+  }));
+
+
+  it("should display the first course", async(() => {
+
+    component.courses = setupCourses();
+
+    const course = component.courses[0];
+
+    fixture.detectChanges();
+
+    const card = el.query(By.css('.course-card:first-child')),
+          title = card.query(By.css("mat-card-title")),
+          image = card.query(By.css("img"));
+
+    expect(card).toBeTruthy("Could not finds course card");
+    expect(title.nativeElement.textContent).toBe(course.titles.description, "Wrong course title found");
+    expect(image.nativeElement.src).toBe(course.iconUrl, "Wrong image found");
+
+
+  }));
+
+
+});
+
+

src/app/course-dialog/course-dialog.component.html renamed to src/app/courses/course-dialog/course-dialog.component.html

@@ -0,0 +1,80 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {AppComponent} from '../app.component';
+import {HomeComponent} from './home/home.component';
+import {AboutComponent} from '../about/about.component';
+import {CourseComponent} from './course/course.component';
+import {CoursesCardListComponent} from './courses-card-list/courses-card-list.component';
+import {CourseDialogComponent} from './course-dialog/course-dialog.component';
+import {BrowserModule} from '@angular/platform-browser';
+import {
+  MatButtonModule,
+  MatCardModule,
+  MatDatepickerModule,
+  MatDialogModule, MatIconModule,
+  MatInputModule,
+  MatListModule, MatMenuModule,
+  MatPaginatorModule, MatProgressSpinnerModule, MatSelectModule,
+  MatSidenavModule,
+  MatSortModule,
+  MatTableModule, MatTabsModule,
+  MatToolbarModule
+} from '@angular/material';
+import {AppRoutingModule} from '../app-routing.module';
+import {MatMomentDateModule} from '@angular/material-moment-adapter';
+import {ReactiveFormsModule} from '@angular/forms';
+import {CoursesService} from './services/courses.service';
+import {CourseResolver} from './services/course.resolver';
+
+@NgModule({
+  declarations: [
+    HomeComponent,
+    AboutComponent,
+    CourseComponent,
+    CoursesCardListComponent,
+    CourseDialogComponent
+  ],
+  imports: [
+    CommonModule,
+    MatMenuModule,
+    MatButtonModule,
+    MatToolbarModule,
+    MatIconModule,
+    MatCardModule,
+    MatTabsModule,
+    MatSidenavModule,
+    MatListModule,
+    MatToolbarModule,
+    MatInputModule,
+    MatTableModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatProgressSpinnerModule,
+    MatDialogModule,
+    AppRoutingModule,
+    MatSelectModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
+    ReactiveFormsModule
+  ],
+  exports: [
+    HomeComponent,
+    AboutComponent,
+    CourseComponent,
+    CoursesCardListComponent,
+    CourseDialogComponent
+  ],
+  providers: [
+    CoursesService,
+    CourseResolver
+  ],
+  entryComponents: [CourseDialogComponent]
+
+})export class CoursesModule {
+
+
+
+}
+
+
+

src/app/course-dialog/course-dialog.component.ts renamed to src/app/courses/course-dialog/course-dialog.component.ts

@@ -3,6 +3,7 @@ import {Course} from "../model/course";
 import {Observable} from "rxjs/Observable";
 import {CoursesService} from "../services/courses.service";
 import {map} from "rxjs/operators";
+import {sortCoursesBySeqNo} from './sort-course-by-seq';
 
 @Component({
     selector: 'home',
@@ -38,14 +39,10 @@ export class HomeComponent implements OnInit {
 
     filterByCategory(courses$: Observable<Course[]>, category:string) {
       return courses$.pipe(
-        map(courses => courses.filter(course => course.category === category).sort(sortBySeqNo) )
+        map(courses => courses.filter(course => course.category === category).sort(sortCoursesBySeqNo) )
       );
     }
 
 }
 
 
-function sortBySeqNo(c1:Course, c2: Course) {
-  return c1.seqNo - c2.seqNo;
-
-}

src/app/course/course.component.css renamed to src/app/courses/course/course.component.css

@@ -0,0 +1,7 @@
+import {Course} from '../model/course';
+
+
+export function sortCoursesBySeqNo(c1:Course, c2: Course) {
+  return c1.seqNo - c2.seqNo;
+
+}

src/app/course/course.component.html renamed to src/app/courses/course/course.component.html

@@ -2,7 +2,7 @@ import {TestBed} from '@angular/core/testing';
 import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
 import {CoursesService} from './courses.service';
 import {HttpClient, HttpErrorResponse} from '@angular/common/http';
-import {COURSES} from '../../../server/db-data';
+import {COURSES} from '../../../../server/db-data';
 
 
 describe('CoursesService', () => {