Add HeroesComponent example with mocked service provider (#110) (#188)

example/src/app/app.module.ts

@@ -7,13 +7,15 @@ import { AppComponent } from './app.component';
 import { CalcComponent } from './calc/calc.component';
 import { SimpleComponent } from './simple/simple.component';
 import { OnPushComponent } from './on-push/on-push.component';
+import { HeroesComponent } from './heroes/heroes.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     CalcComponent,
     SimpleComponent,
-    OnPushComponent
+    OnPushComponent,
+    HeroesComponent
   ],
   imports: [
     BrowserModule,

example/src/app/heroes/heroes.component.css

@@ -0,0 +1 @@
+/* HeroesComponent's private CSS styles */

example/src/app/heroes/heroes.component.html

@@ -0,0 +1,7 @@
+<h2>My Heroes</h2>
+
+<ul class="heroes">
+  <li *ngFor="let hero of heroes">
+    <span class="badge">{{hero.id}}</span> {{hero.name}}
+  </li>
+</ul>

example/src/app/heroes/heroes.component.spec.ts

@@ -0,0 +1,55 @@
+import {async, ComponentFixture} from '@angular/core/testing';
+import {HeroesComponent} from './heroes.component';
+import {ConfigureFn, configureTests} from '@lib/testing';
+import {Hero} from '../service/hero';
+import {HeroService} from '../service/hero.service';
+import {Subject} from 'rxjs';
+
+describe('HeroesComponent', () => {
+  let component: HeroesComponent;
+  let fixture: ComponentFixture<HeroesComponent>;
+
+  const mockHeroesSubject = new Subject<Hero[]>();
+  const mockHeroService = {
+    getHeroes: jest.fn(() => mockHeroesSubject)
+  };
+
+  const allHeroes: Hero[] = [
+    {
+      id: 1,
+      name: 'Test hero 1',
+    },
+    {
+      id: 2,
+      name: 'Test hero 2',
+    }
+  ];
+
+  beforeEach(async(() => {
+    const configure: ConfigureFn = testBed => {
+      testBed.configureTestingModule({
+        declarations: [HeroesComponent],
+        providers: [{provide: HeroService, useValue: mockHeroService}]
+      });
+    };
+
+    configureTests(configure).then(testBed => {
+      fixture = testBed.createComponent(HeroesComponent);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+    });
+  }));
+
+  afterEach(() => {
+    mockHeroesSubject.complete();
+  });
+
+  it('should display a list of all heroes', () => {
+    mockHeroesSubject.next(allHeroes);
+    fixture.detectChanges();
+
+    const el = fixture.nativeElement;
+    expect(el.textContent).toContain('Test hero 1');
+    expect(el.textContent).toContain('Test hero 2');
+  });
+});

example/src/app/heroes/heroes.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Hero } from '../service/hero';
+import { HeroService } from '../service/hero.service';
+
+@Component({
+  selector: 'app-heroes',
+  templateUrl: './heroes.component.html',
+  styleUrls: ['./heroes.component.css']
+})
+export class HeroesComponent implements OnInit {
+  heroes: Hero[];
+
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.getHeroes();
+  }
+
+  getHeroes(): void {
+    this.heroService.getHeroes()
+      .subscribe(heroes => this.heroes = heroes);
+  }
+}

example/src/app/service/hero.service.spec.ts

@@ -4,7 +4,7 @@ import { HttpClientTestingModule, HttpTestingController } from '@angular/common/
 
 import { heroesUrl, HeroService } from './hero.service'
 
-describe('Service: GoogleBooks', () => {
+describe('Service: HeroService', () => {
   let service: HeroService
   let backend: HttpTestingController
 
@@ -13,6 +13,17 @@ describe('Service: GoogleBooks', () => {
     name: 'Test hero',
   }
 
+  const expectedDataAll = [
+    {
+      id: 1,
+      name: 'Test hero 1'
+    },
+    {
+      id: 2,
+      name: 'Test hero 2'
+    }
+  ]
+
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
@@ -40,6 +51,20 @@ describe('Service: GoogleBooks', () => {
     expect(service).toBeDefined()
   })
 
+  it('should call the GET heroes api and return all results', () => {
+    let actualDataAll = {}
+
+    service.getHeroes().subscribe(data => actualDataAll = data)
+
+    backend.expectOne((req: HttpRequest<any>) => {
+      return req.url === `${heroesUrl}`
+        && req.method === 'GET'
+    }, `GET all hero data from ${heroesUrl}`)
+      .flush(expectedDataAll)
+
+    expect(actualDataAll).toEqual(expectedDataAll)
+  })
+
   it('should call the GET hero api and return the result', () => {
     let actualData = {}
 

example/src/app/service/hero.service.ts

@@ -13,6 +13,14 @@ export class HeroService {
 
   constructor(private http: HttpClient) {}
 
+  /** GET heroes from the server */
+  getHeroes(): Observable<Hero[]> {
+    return this.http.get<Hero>(heroesUrl)
+      .pipe(
+        catchError(err => this.handleError(err, 'getHero')),
+      )
+  }
+
   /** GET hero by id. Will 404 if id not found */
   getHero(id: number): Observable<Hero> {
     const params = new HttpParams().set('id', id.toString())

example/tslint.json

@@ -12,7 +12,6 @@
     "curly": true,
     "eofline": true,
     "forin": true,
-    "import-blacklist": [true, "rxjs"],
     "import-spacing": true,
     "indent": [
       true,