Angularアプリケーションのテストコードを書いています。

サービスクラスのテストコードを書いていて、Apolloの部分のモックを作ろうと思い、念のためApolloのサイトに行ってみると、テストツールが準備されていました。

テストするサービスクラス

テストするサービスはこちらです。

import { Injectable } from '@angular/core';

import { Apollo } from 'apollo-angular';

import { Observable } from 'rxjs';

import { environment } from '../../environments/environment';

import { MEMBERS, REGIST_MEMBER, DELETE_MEMBER } from './member.graphql';

import { Member } from './member';

@Injectable({
 providedIn: 'root'
})
export class MemberService {

 constructor(
   private readonly apollo: Apollo,
 ) { }

 /**
  * すべてのメンバーを取得する
  */
 getAll(): Observable<Member[]> {
   return new Observable<Member[]>((observer) => {
     // APIサーバーからメンバー情報を取得する
     this.apollo.watchQuery({
       query: MEMBERS,
     })
     .valueChanges
     .subscribe(
       (res: any) => {
         observer.next(res.data.members);
       },
       err => {
         observer.error(err);
       },
     );
   });
 }
}

GraphQLのタグは外出しにしています。

import gql from 'graphql-tag';

/**
* メンバー取得クエリー
*/
export const MEMBERS = gql`
 query members {
   members {
     memberId
     auth0UserId
     name
     email
     role
     companyName
     department
     memo
   }
 }
`;

テストコード

テストを実行するコードはこちらです。

ApolloTestingControllerを使うと、watchQueryの呼び出しをシュミレートしてくれます。

executeOneでgqlを投げて、返ってきたオブジェクトで返ってくるべきデータをflushすれば、そのデータがwatchQueyの復帰値として返ってくる仕組みです。

import { TestBed } from '@angular/core/testing';
import { ApolloTestingModule, ApolloTestingController } from 'apollo-angular/testing';

import { MemberService } from './member.service';
import { MEMBERS } from './member.graphql';

describe('MemberService', () => {
   let memberService: MemberService;
   let controller: ApolloTestingController;
   
   beforeEach(() => {
       TestBed.configureTestingModule({
           imports: [
               ApolloTestingModule,
           ],
       });

       memberService = TestBed.inject(MemberService);
       controller = TestBed.get(ApolloTestingController);
   });
   
   it('should be created', () => {
       expect(memberService).toBeTruthy();
   });
   
   it('Test: getAll', () => {
       // テストメソッドを呼び出す
       memberService.getAll()
       .subscribe(m => {
           // 2件取得できたらOK
           expect(m.length).toEqual(2);
       });

       // members Queryを呼び出す
       const op = controller.expectOne(MEMBERS);

       // member Queryの結果を返す
       op.flush({
           data: {
               members: [
                   {
                       memberId: 0,
                       auth0UserId: 'test0',
                       name: 'test0',
                       email: 'test0',
                       role: 100,
                       companyName: 'test0',
                       department: 'test0',
                       memo: 'test0',
                   },
                   {
                       memberId: 1,
                       auth0UserId: 'test1',
                       name: 'test1',
                       email: 'test1',
                       role: 20,
                       companyName: 'test1',
                       department: 'test1',
                       memo: 'test1',
                   },
               ],
           },
       });

       // テストを実行する
       controller.verify();
   });
});

Apollo(GraphQL)をいじり始めて、2年が経ちますが、どんどん進化しています。

こういう進化はいじっていて楽しいですね！