diff --git a/example/src/app/app.module.ts b/example/src/app/app.module.ts index d6f58025d1..babd47c6d6 100644 --- a/example/src/app/app.module.ts +++ b/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, diff --git a/example/src/app/heroes/heroes.component.css b/example/src/app/heroes/heroes.component.css new file mode 100644 index 0000000000..c9859da8e1 --- /dev/null +++ b/example/src/app/heroes/heroes.component.css @@ -0,0 +1 @@ +/* HeroesComponent's private CSS styles */ diff --git a/example/src/app/heroes/heroes.component.html b/example/src/app/heroes/heroes.component.html new file mode 100644 index 0000000000..b60344cc4f --- /dev/null +++ b/example/src/app/heroes/heroes.component.html @@ -0,0 +1,7 @@ +

My Heroes

+ + diff --git a/example/src/app/heroes/heroes.component.spec.ts b/example/src/app/heroes/heroes.component.spec.ts new file mode 100644 index 0000000000..07cc1f8646 --- /dev/null +++ b/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; + + const mockHeroesSubject = new Subject(); + 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'); + }); +}); diff --git a/example/src/app/heroes/heroes.component.ts b/example/src/app/heroes/heroes.component.ts new file mode 100644 index 0000000000..53e952a145 --- /dev/null +++ b/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); + } +} diff --git a/example/src/app/service/hero.service.spec.ts b/example/src/app/service/hero.service.spec.ts index 96e34c9d29..638596671d 100644 --- a/example/src/app/service/hero.service.spec.ts +++ b/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) => { + 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 = {} diff --git a/example/src/app/service/hero.service.ts b/example/src/app/service/hero.service.ts index ecc2d290f3..48709078eb 100644 --- a/example/src/app/service/hero.service.ts +++ b/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 { + return this.http.get(heroesUrl) + .pipe( + catchError(err => this.handleError(err, 'getHero')), + ) + } + /** GET hero by id. Will 404 if id not found */ getHero(id: number): Observable { const params = new HttpParams().set('id', id.toString()) diff --git a/example/tslint.json b/example/tslint.json index 9113f1368b..6291cc347b 100644 --- a/example/tslint.json +++ b/example/tslint.json @@ -12,7 +12,6 @@ "curly": true, "eofline": true, "forin": true, - "import-blacklist": [true, "rxjs"], "import-spacing": true, "indent": [ true,