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
+
+
+ -
+ {{hero.id}} {{hero.name}}
+
+
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,