如何为 Resolve 编写测试

Question

我想为我的服务编写测试，我想确保参数发送正常。我如何测试它

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { JhiPaginationUtil } from '.';

@Injectable()
export class JhiResolvePagingParams implements Resolve<any> {

    constructor(private paginationUtil: JhiPaginationUtil) { }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        const page = route.queryParams['page'] ? route.queryParams['page'] : '1';
        const defaultSort = route.data['defaultSort'] ? route.data['defaultSort'] : 'id,asc';
        const sort = route.queryParams['sort'] ? route.queryParams['sort'] : defaultSort;
        return {
            page: this.paginationUtil.parsePage(page),
            predicate: this.paginationUtil.parsePredicate(sort),
            ascending: this.paginationUtil.parseAscending(sort)
        };
    }
}

Answer 1

您需要为每个测试用例创建一个假 ActivatedRoute 并将其传递给 resolver.resolve() 方法。像这样：

import { JhiResolvePagingParams, JhiPaginationUtil } from '../..';
import { ActivatedRouteSnapshot } from '@angular/router';
import { TestBed, inject } from '@angular/core/testing';

describe('ResolvePagingParams  service test', () => {

    describe('ResolvePagingParams Links Service Test', () => {
        let resolver: JhiResolvePagingParams;
        let route: ActivatedRouteSnapshot;

        beforeEach(() => {
            resolver = new JhiResolvePagingParams(new JhiPaginationUtil());
            route = new ActivatedRouteSnapshot();
            TestBed.configureTestingModule({
                providers: [
                    JhiResolvePagingParams,
                    JhiPaginationUtil
                ]
            });
        });

        it(`should return { page: 1, predicate: 'id',ascending: true } when page and sort and defaultSort is undefined` ,
            inject([JhiResolvePagingParams], (service: JhiResolvePagingParams) => {
            route.queryParams = { page: undefined, sort: undefined };
            route.data = { defaultSort: undefined };
            const { page, predicate, ascending } = resolver.resolve(route, null);

            expect(page).toEqual(1);
            expect(predicate).toEqual('id');
            expect(ascending).toEqual(true);
        }));

    });
});

Answer 2

对于 Angular 8/9:

现在使用Testbed.inject([YourComponent/Service])代替TestBed.get([YourComponent/Service])，还需要在@Injectable注解上定义providedIn: 'root'属性。如果您使用 angular 服务来获取数据，那么这可以帮助您了解如何测试解析器是否已创建：

这是我要测试的解析器的单元测试：

describe('TagResolver', () => {
let resolver: TagResolver;

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [
      HttpClientTestingModule
    ],
    providers: [

    ]
  });
  resolver = TestBed.inject(TagResolver);
});

it('should create an instance', () => {
    expect(resolver).toBeTruthy();
  });
});

这是解析器：

@Injectable({
  providedIn: 'root'
})
export class TagResolver implements Resolve <Observable<Tag[]>> {

  constructor(private readonly refTagService: RefTagsService) {
  }
  resolve(route: ActivatedRouteSnapshot,
          state: RouterStateSnapshot):
          Observable<any[]> |
          Observable<Observable<any[]>> |
          Promise<Observable<any[]>> {
    return this.refTagService.getRefTags();
  }
}

最后一个，这是解析器从中获取数据的服务：

@Injectable({
  providedIn: 'root'
})
export class RefTagsService {
  refTagsEndPoint = '/api/tags';
  constructor(private readonly http: HttpClient) { }

  getRefTags(): Observable<Tag[]> {
    console.log('getRefTags');
    return this.http.get<Tag[]>(`${this.refTagsEndPoint}`).pipe(
      map(res => {
        return res;
      })
    );
  }
}

Answer 3

在解析路径之前测试令牌的解析器示例：

@Injectable({
  providedIn: 'root'
})
export class JwtResolverService implements Resolve<string> {

  constructor(private authService: AuthService) { }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<string> {
    return this.authService.getToken()
      .pipe(
        tap(value => log.debug(`============= Resolving token: ${value} =============`)),
        catchError(err => of(null))
      );
  }

}

测试：

import { TestBed } from '@angular/core/testing';
import { JwtResolverService } from './jwt-resolver.service';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { Observable, of } from 'rxjs';
import { AuthService } from '../../auth/auth.service';
import { ActivatedRouteSnapshot } from '@angular/router';

class MockAuthService {
  token = '1234';

  getToken(): Observable<string> {
    return of(this.token);
  }
}

describe('JWT ResolverService', () => {
  let resolver: JwtResolverService;
  let authService: AuthService;
  let route: ActivatedRouteSnapshot;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule
      ],
      providers: [
        { provide: AuthService, useClass: MockAuthService },
      ]
    });

    route = new ActivatedRouteSnapshot();
    authService = TestBed.inject(AuthService);
    resolver = TestBed.inject(JwtResolverService);
  });

  it('should be created', () => {
    expect(resolver).toBeTruthy();
  });

  it('should resolve when token is available', () => {
    // arrange

    // act
    resolver.resolve(route, null).subscribe(resolved => {
      // assert
      expect(resolved).toBeTruthy();
    });

  })

  it('should not resolve when token is not available', () => {
    // arrange
    spyOn(authService, 'getToken').and.returnValue(of(null));

    // act
    resolver.resolve(route, null).subscribe(resolved => {
      // assert
      expect(resolved).toBeFalsy();
    });

  })

  it('should not resolve on error', () => {
    // arrange
    spyOn(authService, 'getSVBToken').and.returnValue(throwError({status: 404}));

    // act
    resolver.resolve(route, null).subscribe(resolved => {
      // assert
      expect(resolved).toBeFalsy();
    });
  })
});

如何为 Resolve 编写测试

How to write test for Resolve

testbed

typescript

angular