testing - 如何使用 Angular 6 和 Apollo 客户端对 GraphQl 进行测试

Question

我正在尝试使用 Angular 6 和 GraphQl 进行测试开发，但我们真的不知道如何以最佳方式进行。我试图在 Internet 上找到一些解释这一点的东西，但没有找到真正好的东西。

我会在这里发布我的案例，寻找可以帮助我做的人，或者可以告诉我任何教程/网络以找到更多有用信息的人。

问题

我想测试一个授权。我有一个 auth.service.js 和相应的 spec.js。你可以在下面看到它:

AUTH_SERVICE_TS

import { Injectable } from '@angular/core';
import { Store } from '@ngrx/store';
import * as UserActions from './../../store/user/actions';
import gql from 'graphql-tag';
import { Apollo } from 'apollo-angular';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
    user;

    constructor(private store: Store<any>, private apollo: Apollo, private router: Router) {
        this.store.select('state').subscribe(state => this.user = state);
    }

    /**
     * Function that check the email and password for login
     * @param email
     * @param password
     */
    login(email: string, password: string) {
        this.apollo.mutate({
            mutation: this.loginRequestGql(),
            variables: {
                email: email,
                password: password
            }
        }).subscribe(value => {
            const data = value.data.login;

            this.saveUserData(data);
            this.router.navigate(['/app']);
        });

    }

    /**
     * Function that save user data in the store and in the session storage
     * @param data
     */
    saveUserData(data) {
        this.store.dispatch(new UserActions.Login({token: data.token}));
        this.setSessionStorage(this.user);
    }

    /**
     * Function that remove user info in the store
     */
    logout() {
        this.store.dispatch(new UserActions.Logout());
        this.setSessionStorage(this.user);
    }

    /**
     * Function that create the request with Graphql sintax
     */
    loginRequestGql() {
        return gql`
            mutation Login($email: String!, $password: String!) {
                login(email: $email, password: $password) {
                    token
                }
            }
        `;
    }

    /**
     * Function that save in the session storage the data parameter
     * @param data
     */
    setSessionStorage(data) {
        sessionStorage.setItem('session', JSON.stringify(data));
    }
}

AUTH_SERVICE_SPEC_TS

import { TestBed, inject } from '@angular/core/testing';

import { ApolloTestingController, ApolloTestingModule } from "apollo-angular/testing";
import { RouterTestingModule } from '@angular/router/testing';
import { AuthService } from './auth.service';

import { Store, StoreModule } from '@ngrx/store';
import { reducer } from '../../store/user/reducer';

describe('AuthService', () => {
    let backend: ApolloTestingController;
    let authService: AuthService;

    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [ RouterTestingModule, ApolloTestingModule, StoreModule.forRoot({ state: reducer }) ],
            providers: [ AuthService,
                { provide: ApolloTestingModule, useClass: ApolloTestingModule }
            ]
        });
    });

    beforeEach(() => {
        backend = TestBed.get(ApolloTestingController);
        authService = TestBed.get(AuthService);
    });

    it('should be created', inject([AuthService], (service: AuthService) => {
        expect(service).toBeTruthy();
    }));

    it('should test login', (done) => {
        const email = 'diego@mail.com';
        const password = '123456';

        // const a = authService.login(email, password);
        // expect(a).toBe(TEST_RESPONSE['data'].login.token);
        // authService.login(email, password);
        // backend.expectOne(authService.loginRequestGql).flush(TEST_RESPONSE);
    });
});

const TEST_RESPONSE: Object = {
        "data": {
            "login": {
                "token": "eyJ0eXAiOiJKLCJhbGciOiJSUzI1NiIsImp0aSI6IjZjZDBjMDMXX0.as7-r_nlYfJ2w3CfOqwtLcTlBg5LrwFcm_ZXZ_GzCl5Qq0GS92r5tqGJtFzRfG02PPoLZ8uwsbgLj-5v2pYBXHjBLZvbjnW_zgXRLoDEcrBDpfPAoVH85ca_hb_xVaIgEUGumUPfn2IOx0Ce8fLlqtWGqoWtWzcCE
        }
    };

提前感谢社区!!希望你能帮助我!!

PD:如果您需要更多信息，请提出要求，我会提供。

Answer 1

在 apollo-angular 的最新版本之一中，我们发布了一个测试实用程序。测试技术与您在 Angular 中测试 HttpClient 的方式非常相似。

要了解有关如何测试使用 Apollo 的组件和服务的更多信息，请阅读有关它的官方文档。

https://www.apollographql.com/docs/angular/guides/testing.html