如何使用 Apollo Angular 測試查詢、變異、訂閱服務？

Question

我在 angular 中看到了測試 apollo的示例，基本上只使用ApolloTestingModule進行測試。 我的測試看起來像：

測試服

describe('CountriesService', () => {
  let countryService: CountriesService;
  let controller: ApolloTestingController;
  let scheduler: TestScheduler;
  let countries: any;

  beforeAll(() => {
    TestBed.configureTestingModule({
      imports: [ApolloTestingModule],
    });

    countries = [{ code: 'C1', phone: '500', name: 'Country' }];
    scheduler = new TestScheduler((actual, expected) => {
      expect(actual).toEqual(expected);
    });
    countryService = TestBed.inject(CountriesService);
    controller = TestBed.inject(ApolloTestingController);
  });

  test('should be created', () => {
    expect(countryService).toBeTruthy();
  });

  test('should return an array of countries', () => {
    countryService.watch().valueChanges.subscribe(console.log);

    const operation = controller.expectOne(COUNTRIES_GQL);
    operation.flush({ data: { countries } });

    controller.verify();
  });
});

服務

@Injectable({ providedIn: 'root' })
export class CountriesService {
  constructor(private apollo: Apollo) {}

  watch() {
    return this.apollo.watchQuery({
      query: COUNTRIES_GQL,
    });
  }
}

問題

我想使用使用查詢、變異、訂閱服務的方法，但是使用這種方法測試不起作用。

@Injectable({ providedIn: 'root' })
export class CountriesService extends Query<any> {
  document = COUNTRIES_GQL;
}

錯誤

● CountriesService › should return an array of countries

    TypeError: Cannot read property 'use' of undefined

      30 | 
      31 |   test('should return an array of countries', () => {
      32 |     countryService.watch().valueChanges.subscribe(console.log);
         |                    ^
      33 | 
      34 |     const operation = controller.expectOne(COUNTRIES_GQL);
      35 |     operation.flush({ data: { countries } });

對我來說，這個錯誤是有道理的，因為在查詢 class的官方實現中，方法 fetch 和 watch 使用的是 Apollo 服務提供的使用方法。

問題

• 是否可以替代測試 apollo 提供的此類服務？
• 如果我想使用這種方法，我應該將它作為一項基本服務進行測試？

我等你的答案

Answer 1

嘗試實例化你的服務並使用methode countryService.watch()然后調用它

countryService.watch().valueChanges.subscribe(console.log);

Answer 2

我能夠使用這種方法使其工作 mocking 提供者中的服務（不使用 AppolloTestingModule）。 制作了一個助手 function graphQlServiceMock以便在所有服務中重用。

TestBed.configureTestingModule({
  ...
  providers: [
    {
       provide: MyGQLService,
       useValue: graphQlServiceMock({ users: null }),
    },
  ]

})

export const graphQlServiceMock = (response: any) => ({
  watch: () => ({
    valueChanges: of({
      data: {
        ...response,
      },
      loading: false,
    }),
  }),
});

或沒有幫手..

TestBed.configureTestingModule({
  ...
  providers: [
  {
    provide: MyGQLService,
    useValue: {
      watch: () => ({
        valueChanges: of({
          data: {
            users: null,
          },
          loading: false,
        }),
      }),
    },
  },
 ];
})