角度/NGXS，基于失败的 API 请求测试操作时遇到问题

Question

我在尝试为调用http请求的NGXS操作编写测试时遇到问题。我想添加一些测试，以防请求成功或失败。

我的操作：

@Action(SearchChuckNorrisJokes)
searchChuckNorrisJokes({ getState, setState }: StateContext<ChuckNorrisStateModel>, { searchString }: SearchChuckNorrisJokes) {
// Handle loading
const state = getState();
return this.chuckNorrisService.fetchCustomChuckNorrisJokes(searchString).subscribe(
res => {
setState({
...state,
loading: false,
error: false,
chuckData: res['result'],
});
}, err => {
setState({
...state,
loading: false,
error: true,
});
return throwError(err);
}
);

规范：

describe('ChuckStateComponent', () => {
let store: Store;
let chuckState: ChuckNorrisState;
let apiService: ApiService;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [NgxsModule.forRoot([ChuckNorrisState]), HttpClientTestingModule, HttpClientTestingModule],
providers: [ApiService]
}).compileComponents();
store = TestBed.get(Store);
chuckState = TestBed.get(ChuckNorrisState);
apiService = TestBed.get(ApiService);
}));
it('should toggle a failed API call', () => {
spyOn(chuckState, 'searchChuckNorrisJokes').and.returnValue(throwError({ 'An Error' })); 
spyOn(apiService, 'fetchCustomChuckNorrisJokes').and.returnValue(throwError({ 'status: 404' }));
store.dispatch(new SearchChuckNorrisJokes(null));
store.selectOnce(state => state.chuckData).subscribe(data => {
expect(data.error).toBe(true); // Never set to false
});
});
});

我相信我正在监视状态/服务，但由于我使用的是NGXS商店，因此它看不到我的"我嘲笑了"响应"。

如果需要，我很乐意提供更多信息。在最后一天左右的时间里一直在与这个问题作斗争，并且惊讶地发现没有更多信息来测试 NGXS 失败的 API 调用......

Answer 1

我同意Shadow的观点。 一旦你通过管道服务调用并返回可观察到的，你嘲笑"fetchCustomChuckNorrisJokes"的模式应该适合你。 我也不确定为什么你需要规范中的ChuckNorrisState。

Answer 2

谢谢大家，我需要管道响应而不是订阅它。非常感谢..更新了代码，以防有人卡住：

州：

@Action(SearchChuckNorrisJokes)
searchChuckNorrisJokes({ getState, setState }: StateContext<ChuckNorrisStateModel>, { searchString }: SearchChuckNorrisJokes) {
// Handle loading
const state = getState();
return this.chuckNorrisService.fetchCustomChuckNorrisJokes(searchString).pipe(
tap(res => {
setState({
...state,
loading: false,
error: false,
chuckData: res['result'],
});
}),
catchError(err => {
setState({
...state,
loading: false,
error: true,
});
return of(err);
})
);
}

规范：

it('should toggle a failed API call', () => {
spyOn(apiService, 'fetchCustomChuckNorrisJokes').and.returnValue(throwError({}));
store.dispatch(new SearchChuckNorrisJokes(null));
store.selectOnce(state => state.chuckData).subscribe(data => {
expect(data.error).toBe(true);
});
});