Factor out generic GraohQLService and make more testable

tjme · tjme · commit a66537f4db45 · 2018-02-19T11:05:36.000Z
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-io-example-graphql",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": false,
   "description": "Example Tour of Heroes project from an angular.io guide, but using a real relational database server (PostgreSQL), via GraphQL (generated using PostGraphile).",
   "scripts": {
@@ -30,7 +30,7 @@
     "apollo-angular": "^1.0.1",
     "apollo-angular-link-http": "^1.0.1",
     "apollo-cache-inmemory": "^1.1.5",
-    "apollo-client": "^2.2.0",
+    "apollo-client": "^2.2.2",
     "core-js": "^2.4.1",
     "graphql": "^0.12.3",
     "graphql-tag": "^2.6.1",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -13,6 +13,7 @@ import { HeroSearchComponent }  from './hero-search/hero-search.component';
 import { HeroService }          from './hero.service';
 import { MessageService }       from './message.service';
 import { MessagesComponent }    from './messages/messages.component';
+import { GraphQLService }       from './graphql.service';
 
 @NgModule({
   imports: [
@@ -31,7 +32,7 @@ import { MessagesComponent }    from './messages/messages.component';
     MessagesComponent,
     HeroSearchComponent
   ],
-  providers: [ HeroService, MessageService ],
+  providers: [ HeroService, GraphQLService, MessageService ],
   bootstrap: [ AppComponent ]
 })
 export class AppModule { }
diff --git a/src/app/graphql.service.ts b/src/app/graphql.service.ts
@@ -0,0 +1,128 @@
+import {Injectable} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {Apollo} from 'apollo-angular';
+import {HttpLink} from 'apollo-angular-link-http';
+import {InMemoryCache} from 'apollo-cache-inmemory';
+import gql from 'graphql-tag';
+import {Observable} from 'rxjs/Observable';
+import {of} from 'rxjs/observable/of';
+import {catchError, map, tap} from 'rxjs/operators';
+import {MessageService} from './message.service';
+
+export const GraphQLUrl = 'http://localhost:5000/graphql';  // URL to web api
+
+export interface GQLOptions {
+  readAll: any;
+  readById: any;
+  readWithTerm: any;
+  create: any;
+  update: any;
+  delete: any;
+  deleteById: any;
+}
+
+@Injectable()
+export class GraphQLService {
+
+  constructor(
+    private messageService: MessageService,
+    private apollo: Apollo,
+    private httpLink: HttpLink
+  ) {
+    apollo.create({
+      link: httpLink.create({ uri: GraphQLUrl }),
+      cache: new InMemoryCache()
+    });
+  }
+
+  /** Read all records from the server */
+  readAll<T>(options: GQLOptions): Observable<T> {
+    return this.apollo.subscribe({query: options.readAll}).pipe(
+        map(({data}) => data),
+        tap(_ => this.log(`read all`)),
+        catchError(this.handleError<T>('readAll'))
+      );
+  }
+
+  /** Read a record by id. Will 404 if id not found */
+  readById<T>(options: GQLOptions, id: any): Observable<T> {
+    return this.apollo.query<T>({query: options.readById, variables: {id: id}}).pipe(
+      map(({data}) => data), // returns a {0|1} element array
+      tap(_ => this.log(`read record with id=${id}`)),
+        catchError(this.handleError<T>(`readById id=${id}`))
+      );
+  }
+
+  /* Read all records whose name contains the search term */
+  readWithTerm<T>(options: GQLOptions, term: string): Observable<T> {
+    if (!term.trim()) {return of();} // if not search term, return empty array of records.
+    return this.apollo.watchQuery<T>({query: options.readWithTerm, variables: {term: term}}).valueChanges.pipe(
+      map(({data}) => data),
+      tap(_ => this.log(`read records matching "${term}"`)),
+      catchError(this.handleError<T>('readWithTerm'))
+    );
+  }
+
+  //////// Save methods //////////
+
+  /** Create a new record on the server */
+  create<T>(options: GQLOptions, record: any): Observable<T> {
+    return this.apollo.mutate<T>({mutation: options.create, variables: record}).pipe(
+      map(({data}) => data), // returns a {0|1} element array
+      tap(_ => this.log(`created record with ${JSON.stringify(record)}`)),
+      catchError(this.handleError<T>('create'))
+    );
+  }
+
+  /** Update the record on the server */
+  update<T>(options: GQLOptions, record: any): Observable<T> {
+    return this.apollo.mutate<T>({mutation: options.update, variables: record}).pipe(
+      map(({data}) => data),
+      tap(_ => this.log(`updated record with ${JSON.stringify(record)}`)),
+      catchError(this.handleError<T>('update'))
+    );
+  }
+
+  /** Delete the record from the server */
+  delete<T>(options: GQLOptions, record: any): Observable<T> {
+    return this.apollo.mutate<T>({mutation: options.delete, variables: record}).pipe(
+      map(({data}) => data),
+      tap(_ => this.log(`deleted record with ${JSON.stringify(record)}`)),
+      catchError(this.handleError<T>('delete'))
+    );
+  }
+
+  /** Delete the record from the server */
+  deleteById<T>(options: GQLOptions, id: any): Observable<T> {
+    return this.apollo.mutate<T>({mutation: options.deleteById, variables: {id: id}}).pipe(
+      map(({data}) => data),
+      tap(_ => this.log(`deleted record with id=${id}`)),
+      catchError(this.handleError<T>('deleteById'))
+    );
+  }
+
+  /**
+   * Handle Http operation that failed.
+   * Let the app continue.
+   * @param operation - name of the operation that failed
+   * @param result - optional value to return as the observable result
+   */
+  private handleError<T> (operation = 'operation', result?: T) {
+    return (error: any): Observable<T> => {
+
+      // TODO: send the error to remote logging infrastructure
+      console.error(error); // log to console instead
+
+      // TODO: better job of transforming error for user consumption
+      this.log(`${operation} failed: ${error.message} no: ${error.number}`);
+
+      // Let the app keep running by returning an empty result.
+      return of(result as T);
+    };
+  }
+
+  /** Log a GraphQLService message with the MessageService */
+  private log(message: string) {
+    this.messageService.add('GraphQLService: ' + message);
+  }
+}
diff --git a/src/app/hero.service.spec.ts b/src/app/hero.service.spec.ts
@@ -0,0 +1,55 @@
+import { TestBed, async, inject } from '@angular/core/testing';
+import { HeroService } from './hero.service';
+import { HttpClientModule, HttpClient } from '@angular/common/http';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { ApolloModule, Apollo } from 'apollo-angular';
+import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+import { MessageService } from './message.service';
+
+let messageService: MessageService;
+let apollo: Apollo;
+let httpLink: HttpLink;
+let heroService: HeroService;
+
+describe('HeroService', () => {
+  
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ApolloModule, HttpLinkModule, HttpClientModule, HttpClientTestingModule],
+      providers: [HeroService, MessageService, Apollo, HttpLink, HttpClient]
+    });
+    const messageService = TestBed.get(MessageService);
+    const apollo = TestBed.get(Apollo);
+    const heroService = TestBed.get(HeroService);
+    // httpClient = new HttpClient(undefined);
+    // httpLink = new HttpLink(httpClient);
+    // apollo.create({
+    //   link: httpLink.create({ uri: heroesUrl }),
+    //   cache: new InMemoryCache()
+    // });
+    // heroService = new HeroServiceBase;
+  });
+
+  it('should be created', (done: DoneFn) => {
+    expect(heroService).toBeTruthy();
+    done();
+  });
+
+  it('getHero should return the specified hero by id', (done: DoneFn) => {
+    heroService.getHero(12).subscribe(data => {
+      expect(data).toBeDefined;
+      expect(data.id).toBe(12);
+      expect(data.name).toBe('Narco');
+      done();
+    });
+  });
+
+  it('getHeroes should return all heroes', (done: DoneFn) => {
+    heroService.getHeroes().subscribe(data => {
+      expect(data.length).toBeGreaterThan(0);
+      // expect(data).toEqual([]);
+      done();
+    });
+  });
+});
diff --git a/src/app/hero.service.ts b/src/app/hero.service.ts
@@ -11,123 +11,72 @@ import { catchError, map, tap } from 'rxjs/operators';
 
 import { Hero } from './hero';
 import { MessageService } from './message.service';
-import { validateConfig } from '@angular/router/src/config';
-
-const heroesUrl = 'http://localhost:5000/graphql';  // URL to web api
-const allHeroes=gql`query tohAllHero{allHeroes{nodes{id,name}}}`;
-const heroById=gql`query tohHeroByID($id:Int!){heroById(id:$id){id,name}}`;
-const heroWithTerm=gql`query tohHeroWithTerm($term:String!){herowithterm(term:$term){nodes{id,name}}}`;
-const createHero=gql`mutation tohCreateHero($name:String!){createHero(input:{clientMutationId:"toh-createHero",hero:{name:$name}}){clientMutationId,hero{id,name}}}`;
-const updateHero=gql`mutation tohUpdateHeroById($id:Int!,$name:String!){updateHeroById(input:{clientMutationId:"toh-updateHero",id:$id,heroPatch:{name:$name}}){clientMutationId,hero{id,name}}}`;
-const deleteHero=gql`mutation tohDeleteHeroById($id:Int!){deleteHeroById(input:{clientMutationId:"toh-deleteHero",id:$id}){clientMutationId,hero{id,name}}}`;
+import { GraphQLService, GQLOptions } from './graphql.service';
+
+const options: GQLOptions = {
+  readAll: gql`query readAll{allHeroes{nodes{id,name}}}`,
+  readById: gql`query readById($id:Int!){heroById(id:$id){id,name}}`,
+  readWithTerm: gql`query readWithTerm($term:String!){allHeroes(term:$term){nodes{id,name}}}`,
+  create: gql`mutation create($name:String!)
+    {createHero(input:{clientMutationId:"toh-createHero",hero:{name:$name}})
+      {clientMutationId,hero{id,name}}}`,
+  update: gql`mutation update($id:Int!,$name:String!)
+    {updateHeroById(input:{clientMutationId:"toh-updateHero",id:$id,heroPatch:{name:$name}})
+      {clientMutationId,hero{id,name}}}`,
+  delete: gql`mutation delete($id:Int!)
+    {deleteHeroById(input:{clientMutationId:"toh-deleteHero",id:$id})
+      {clientMutationId,hero{id,name}}}`,
+  deleteById: gql`mutation deleteById($id:Int!)
+    {deleteHeroById(input:{clientMutationId:"toh-deleteHeroById",id:$id})
+      {clientMutationId,hero{id,name}}}`
+};
 
 @Injectable()
 export class HeroService {
 
   constructor(
-    private messageService: MessageService,
-    private apollo: Apollo,
-    private httpLink: HttpLink
-  ) {
-    apollo.create({
-      link: httpLink.create({ uri: heroesUrl }),
-      cache: new InMemoryCache()
-    });
-  }
+    private graphQLService: GraphQLService
+  ) { }
 
   /** Get all heroes from the server */
   getHeroes (): Observable<Hero[]> {
-    return this.apollo.subscribe({query: allHeroes}).pipe(
-        map(({data})=>data.allHeroes.nodes),
-        tap(heroes => this.log(`fetched heroes`)),
-        catchError(this.handleError('getHeroes', []))
-      );
-  }
-
-  /** Get a hero by id. Return `undefined` when id not found */
-  getHeroNo404<Data>(id: number): Observable<Hero> {
-    return this.apollo.query<{heroById:Hero}>({query: heroById, variables: {id: id}}).pipe(
-        map(({data}) => data.heroById), // returns a {0|1} element array
-        tap(h => {
-          const outcome = h ? `fetched` : `did not find`;
-          this.log(`${outcome} hero id=${id}`);
-        }),
-        catchError(this.handleError<Hero>(`getHero id=${id}`))
-      );
+    return this.graphQLService.readAll<{allHeroes:{nodes:Hero[]}}>(options).pipe(
+      map((data) => data.allHeroes.nodes))
   }
 
   /** Get a hero by id. Will 404 if id not found */
   getHero(id: number): Observable<Hero> {
-    return this.apollo.query<{heroById:Hero}>({query: heroById, variables: {id: id}}).pipe(
-      map(({data}) => data.heroById), // returns a {0|1} element array
-      tap(_ => this.log(`fetched hero id=${id}`)),
-        catchError(this.handleError<Hero>(`getHero id=${id}`))
-      );
+    return this.graphQLService.readById<{heroById:Hero}>(options, id).pipe(
+      map((data) => data.heroById))
   }
 
   /* Get all heroes whose name contains search term */
   searchHeroes(term: string): Observable<Hero[]> {
-    if (!term.trim()) {
-      // if not search term, return empty hero array.
-      return of([]);
-    }
-    return this.apollo.watchQuery<{herowithterm:{nodes:Hero[]}}>({query: heroWithTerm, variables: {term: term}}).valueChanges.pipe(
-      map(({data})=>data.herowithterm.nodes),
-      tap(_ => this.log(`found heroes matching "${term}"`)),
-      catchError(this.handleError<Hero[]>('searchHeroes', []))
-    );
+    if (!term.trim()) {return of([]);} // if not search term, return empty hero array.
+    return this.graphQLService.readWithTerm<{allHeroes:{nodes:Hero[]}}>(options, term).pipe(
+      map((data) => data.allHeroes.nodes))
   }
 
   //////// Save methods //////////
 
   /** Add a new hero to the server */
   addHero (hero: Hero): Observable<Hero> {
-    return this.apollo.mutate<{createHero:{hero:Hero}}>({mutation: createHero, variables: {name: hero.name}}).pipe(
-      map(({data}) => data.createHero.hero), // returns a {0|1} element array
-      tap(_ => this.log(`added hero id=${_.id}`)),
-      catchError(this.handleError<Hero>('addHero'))
-    );
+    return this.graphQLService.create<{createHero:{hero:Hero}}>(options, hero).pipe(
+      map((data) => data.createHero.hero))
   }
 
   /** Delete the hero from the server */
   deleteHero (hero: Hero | number): Observable<Hero> {
     const id = typeof hero === 'number' ? hero : hero.id;
-    return this.apollo.mutate({mutation: deleteHero, variables: {id: id}}).pipe(
-      tap(_ => this.log(`deleted hero id=${id}`)),
-      catchError(this.handleError<Hero>('deleteHero'))
-    );
+    return this.graphQLService.delete<{deleteHeroById:{hero:Hero}}>(options, {"id": id}).pipe(
+      map((data) => data.deleteHeroById.hero))
   }
 
+
   /** Update the hero on the server */
   updateHero (hero: Hero): Observable<Hero> {
-    return this.apollo.mutate({mutation:updateHero, variables: hero}).pipe(
-      tap(_ => this.log(`updated hero id=${hero.id} new name=${hero.name}`)),
-      catchError(this.handleError<Hero>('updateHero'))
-    );
+    return this.graphQLService.update<{updateHeroById:{hero:Hero}}>(options, hero).pipe(
+      map((data) => data.updateHeroById.hero))
   }
 
-  /**
-   * Handle Http operation that failed.
-   * Let the app continue.
-   * @param operation - name of the operation that failed
-   * @param result - optional value to return as the observable result
-   */
-  private handleError<T> (operation = 'operation', result?: T) {
-    return (error: any): Observable<T> => {
-
-      // TODO: send the error to remote logging infrastructure
-      console.error(error); // log to console instead
-
-      // TODO: better job of transforming error for user consumption
-      this.log(`${operation} failed: ${error.message} no: ${error.number}`);
-
-      // Let the app keep running by returning an empty result.
-      return of(result as T);
-    };
-  }
-
-  /** Log a HeroService message with the MessageService */
-  private log(message: string) {
-    this.messageService.add('HeroService: ' + message);
-  }
 }
diff --git a/src/app/message.service.spec.ts b/src/app/message.service.spec.ts
