【发布时间】：2020-06-11 09:13:27
【问题描述】：
我有一个使用 Angular 和 NgRx 的应用程序，我在使用 Marble 测试测试我的效果时遇到了困难。
我得到的错误是：
Expected $.length = 0 to equal 2.
Expected $[0] = undefined to equal Object({ frame: 10, notification: Notification({ kind: 'N', value: LoadOrderLogisticStatusSuccess({ payload: Object({ 1047522: Object({ status: 0, partner: Object({ id: 1, slug: 'loggi' }), eta: '2020-06-09 10:00', pickupEta: '2020-06-09 12:00' }) }), type: 'load-order-logistic-status-success' }), error: undefined, hasValue: true }) }).
Expected $[1] = undefined to equal Object({ frame: 20, notification: Notification({ kind: 'C', value: undefined, error: undefined, hasValue: false }) }).
效果如下：
@Injectable()
export class OrderLogisticStatusEffects {
loadOrdersLogisticStatus$ = createEffect(() =>
this.actions$.pipe(
ofType(LOAD_ORDERS_LOGISTIC_STATUS),
withLatestFrom(this.store$.pipe(select(orderLogisticsStatusPollingIntervalSelector))),
switchMap(([action, pollingInterval]) =>
timer(0, pollingInterval).pipe(
withLatestFrom(this.store$.pipe(select(selectedCompanySelector))),
switchMap(([timerNum, company]) => this.loadOrdersLogisticStatus(pollingInterval, company))
)
)
)
);
constructor(private actions$: Actions, private orderLogisticStatusService: OrderLogisticStatusService, private store$: Store<AppState>) {}
private loadOrdersLogisticStatus(
pollingInterval: number,
company: Company
): Observable<LoadOrderLogisticStatusSuccess | LoadOrderLogisticStatusFail> {
if (!company?.logisticsToken) {
return of(new LoadOrderLogisticStatusFail(new Error('No company selected')));
}
this.orderLogisticStatusService.getOrdersStatus(company.logisticsToken).pipe(
timeout(pollingInterval),
map((result) => new LoadOrderLogisticStatusSuccess(result)),
catchError((error) => {
if (error.name === 'TimeoutError') {
console.warn('Timeout error while loadin logistic status service', error);
} else {
console.error('Error loading order logistic status', error);
Sentry.captureException(error);
}
return of(new LoadOrderLogisticStatusFail(error));
})
);
}
}
这是我的测试：
fdescribe('Order Logistic Status Effect', () => {
let actions$: Observable<Action>;
let effects: OrderLogisticStatusEffects;
describe('With a selected company', () => {
beforeEach(() => {
const mockState = {
ordersLogisticStatus: {
pollingInterval: 10,
},
company: {
selectedCompany: {
logisticsToken: 'ey.xxxx.yyyy',
},
},
};
TestBed.configureTestingModule({
providers: [
{ provide: OrderLogisticStatusService, useValue: jasmine.createSpyObj('orderLogisticsStatusServiceSpy', ['getOrdersStatus']) },
OrderLogisticStatusEffects,
provideMockActions(() => actions$),
provideMockStore({
selectors: [
{
selector: orderLogisticsStatusPollingIntervalSelector,
value: 30,
},
{
selector: selectedCompanySelector,
value: {
logisticsToken: 'ey.xxxx.yyy',
},
},
],
}),
],
});
effects = TestBed.inject<OrderLogisticStatusEffects>(OrderLogisticStatusEffects);
});
it('should sucessfully load the orders logistics status', () => {
const service: jasmine.SpyObj<OrderLogisticStatusService> = TestBed.inject(OrderLogisticStatusService) as any;
service.getOrdersStatus.and.returnValue(cold('-a|', { a: mockData }));
actions$ = hot('a', { a: new LoadOrdersLogisticStatus() });
const expected = hot('-a|', {
a: new LoadOrderLogisticStatusSuccess(mockData),
});
getTestScheduler().flush();
expect(effects.loadOrdersLogisticStatus$).toBeObservable(expected);
});
});
});
const mockData = {
1047522: {
status: 0,
partner: {
id: 1,
},
eta: '2020-06-09 10:00',
pickupEta: '2020-06-09 12:00',
},
};
问题似乎与我的服务模拟有关。即使我将它配置为返回一个冷的 observable，它似乎返回 undefined。
谁能帮帮我？
【问题讨论】：
-
我认为问题在于
actions$在您的效果类注入它之后 被初始化，因此它会获得旧值。尝试在effects = TestBed.inject...之前设置actions$ = hot('a',...) -
嗨，我不认为是这种情况，因为我的效果被调用了。问题发生在我的服务模拟中。不知何故，模拟函数返回未定义而不是冷观察者。
-
'$.length = 0 to equal 2' 让我觉得 actions$ 根本没有发出。我可能错了。你能创建一个堆栈闪电战吗？
-
是的，我已经用这个 stackblitz 链接更新了描述：stackblitz.com/edit/angular-effects-test。