【发布时间】：2019-03-17 11:27:49
【问题描述】：
我有一个发出 HTTP 请求的 Angular 服务。该服务的主要工作是刷新访问令牌并在请求导致 401 时重试请求。该服务还能够优雅地处理多个并发请求：如果有 3 个请求导致 401，则令牌只会刷新一次，所有 3 个请求都将被重放。 以下 GIF 总结了这种行为：
我的问题是我似乎无法测试这种行为。最初，我的测试总是因超时而失败，因为我的订阅或错误方法没有被调用。添加 fakeAsync 后，我不再超时，但仍然没有调用我的观察者。我还注意到，如果我从 tokenObservable 中删除共享运算符，则会调用我的测试订阅，但这样做我将失去多播的好处。
这是无法正常工作的测试
it('refreshes token when getting a 401 but gives up after 3 tries', fakeAsync(() => {
const errorObs = new Observable(obs => {
obs.error({ status: 401 });
}).pipe(
tap(data => {
console.log('token refreshed');
})
);
const HttpClientMock = jest.fn<HttpClient>(() => ({
post: jest.fn().mockImplementation(() => {
return errorObs;
})
}));
const httpClient = new HttpClientMock();
const tokenObs = new Observable(obs => {
obs.next({ someProperty: 'someValue' });
obs.complete();
});
const AuthenticationServiceMock = jest.fn<AuthenticationService>(() => ({
refresh: jest.fn().mockImplementation(() => {
return tokenObs;
})
}));
const authenticationService = new AuthenticationServiceMock();
const service = createSut(authenticationService, httpClient);
service.post('controller', {}).subscribe(
data => {
expect(true).toBeFalsy();
},
(error: any) => {
expect(error).toBe('random string that is expected to fail the test, but it does not');
expect(authenticationService.refresh).toHaveBeenCalledTimes(3);
}
);
}));
这就是我在我的 SUT 中注入模拟的方式：
const createSut = (
authenticationServiceMock: AuthenticationService,
httpClientMock: HttpClient
): RefreshableHttpService => {
const config = {
endpoint: 'http://localhost:64104',
login: 'token'
};
const authConfig = new AuthConfig();
TestBed.configureTestingModule({
providers: [
{
provide: HTTP_CONFIG,
useValue: config
},
{
provide: AUTH_CONFIG,
useValue: authConfig
},
{
provide: STATIC_HEADERS,
useValue: new DefaultStaticHeaderService()
},
{
provide: AuthenticationService,
useValue: authenticationServiceMock
},
{
provide: HttpClient,
useValue: httpClientMock
},
RefreshableHttpService
]
});
try {
const testbed = getTestBed();
return testbed.get(RefreshableHttpService);
} catch (e) {
console.error(e);
}
};
下面是被测系统的相关代码：
@Injectable()
export class RefreshableHttpService extends HttpService {
private tokenObservable = defer(() => this.authenthicationService.refresh()).pipe(share());
constructor(
http: HttpClient,
private authenthicationService: AuthenticationService,
injector: Injector
) {
super(http, injector);
}
public post<T extends Response | boolean | string | Array<T> | Object>(
url: string,
body: any,
options?: {
type?: { new (): Response };
overrideEndpoint?: string;
headers?: { [header: string]: string | string[] };
params?: HttpParams | { [param: string]: string | string[] };
}
): Observable<T> {
return defer<T>(() => {
return super.post<T>(url, body, options);
}).pipe(
retryWhen((error: Observable<any>) => {
return this.refresh(error);
})
);
}
private refresh(obs: Observable<ErrorResponse>): Observable<any> {
return obs.pipe(
mergeMap((x: ErrorResponse) => {
if (x.status === 401) {
return of(x);
}
return throwError(x);
}),
mergeScan((acc, value) => {
const cur = acc + 1;
if (cur === 4) {
return throwError(value);
}
return of(cur);
}, 0),
mergeMap(c => {
if (c === 4) {
return throwError('Retried too many times');
}
return this.tokenObservable;
})
);
}
}
以及它继承自的类：
@Injectable()
export class HttpService {
protected httpConfig: HttpConfig;
private staticHeaderService: StaticHeaderService;
constructor(protected http: HttpClient, private injector: Injector) {
this.httpConfig = this.injector.get(HTTP_CONFIG);
this.staticHeaderService = this.injector.get(STATIC_HEADERS);
}
由于某种未知原因，它在第二次调用时无法解析由 refresh 方法返回的 observable。 奇怪的是，如果您从 SUT 的 tokenObservable 属性中删除共享运算符，它就会起作用。 它可能与时间有关。与 Jasmine 不同，Jest 不会模拟 RxJs 使用的 Date.now。 一种可能的方法是尝试使用 RxJs 中的 VirtualTimeScheduler 来模拟时间， 虽然这是 fakeAsync 应该做的。
依赖和版本：
- Angular 6.1.0
- Rxjs 6.3.3
- 开玩笑 23.6.0
- 节点 10.0.0
- Npm 6.0.1
以下文章帮助我实现了该功能： RxJS: Understanding the publish and share Operators
【问题讨论】：