我有一个使用Angular和NgRx的应用程序，使用大理石测试无法测试我的效果。
我得到的错误是：
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',
},
};
问题似乎与我的服务模拟有关。即使我将其配置为返回可观察到的寒冷，但似乎返回的是不确定的。
有人可以帮助我吗？
Stack Blitz ：https://stackblitz.com/edit/angular-effects-test
答案 0 :(得分：1)
有一些问题：
首先，loadOrdersLogisticStatus缺少回报：
loadOrdersLogisticStatus (/* ... */) {
return this.orderLogisticStatusService.getOrdersStatus(/* ... */)
}
然后，我发现jasmine-marbles不会自动设置AsyncScheduler.delegate，而不是TestScheduler.run：
run<T>(callback: (helpers: RunHelpers) => T): T {
const prevFrameTimeFactor = TestScheduler.frameTimeFactor;
const prevMaxFrames = this.maxFrames;
TestScheduler.frameTimeFactor = 1;
this.maxFrames = Infinity;
this.runMode = true;
AsyncScheduler.delegate = this;
/* ... */
}
这很重要，因为使用大理石时，所有内容都是同步。但是在您的实现中，有一个timer(0, pollingInterval)可观察的对象，默认情况下使用AsyncScheduler。如果不设置AsyncScheduler.delegate，我们将有异步操作，我认为这是主要问题。
因此，为了设置delegate属性，我在beforeEach()中添加了这一行：
AsyncScheduler.delegate = getTestScheduler();
最后，我认为您的主张存在一个小问题。您的效果属性似乎从未完成，并且您还在使用timer(0, pollingInterval)。因此，我认为您现在可以做的就是添加take(N)运算符，以便针对N发射进行测试：
it("should sucessfully load the orders logistics status", () => {
const service: jasmine.SpyObj<OrderLogisticStatusService> = TestBed.inject(OrderLogisticStatusService) as any;
service.getOrdersStatus.and.callFake(() => cold('-a|', { a: mockData }));
actions$ = hot('a', { a: new LoadOrdersLogisticStatus() });
const expected = hot('-a--(b|)', {
a: new LoadOrderLogisticStatusSuccess(mockData),
b: new LoadOrderLogisticStatusSuccess(mockData),
});
expect(effects.loadOrdersLogisticStatus$.pipe(take(2))).toBeObservable(expected);
});
'-a--(b|)'-在第10帧发送a，并在{{1}发送b + complete通知（由于take） }帧，因为40th是pollingInterval，而当第二个通知（30）被调度时，当前帧将是10。
答案 1 :(得分：0)
安德烈（Andrei）的解决方案确实适用于Stack Blitz，但在我自己的环境中却不起作用，我认为这是由于某些导入混淆了。但是其背后的想法是：TestScheduler的{{1}}不能代替RxJ的jasmine-marbles是正确的。这就是我的问题（除了忘记在AsyncScheduler函数中添加return语句）。
因此，要使所有功能正常运行，我必须做两件事：
首先，我必须手动将效果的调度程序设置为loadOrdersLogisticStatus。当我这样做时，我终于能够看到TestScheduler可以观察到的结果，而不是像以前那样timer。
但是我那时还有另一个问题。 undefined不会停止发出信号，因此出现了如下这样的长错误流：
timer前两个值可以，但其他两个则不能。因此，我做的第二件事是使用Expected $.length = 26 to equal 2.
Unexpected $[2] = Object({ frame: 60, 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 }) }) in array.
Unexpected $[3] = Object({ frame: 90, 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 }) }) in array.
Unexpected $[4] = Object({ frame: 120, 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 }) }) in array.
Unexpected $[5] = Object({ frame: 150, 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 }) }) in array.
Unexpected $[6] = Object({ frame: 180, 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 }) }) in array.
Unexpected $[7] = Object({ frame: 210, 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 }) }) in array.
Unexpected $[8] = Object({ frame: 240, 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 }) }) in array.
Unexpected $[9] = Object({ frame: 270, 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 }) }) in array.
运算符从完成测试的takeUntil退订（我不确定这是否是最好的测试方法，因为我绝对不能使用它测试之外的操作员，否则我的轮询将停止。
这是代码的最终工作版本：
效果：
timer测试：
@Injectable()
export class OrderLogisticStatusEffects {
loadOrdersLogisticStatus$ = createEffect(() => ({ scheduler = asyncScheduler, stopTimer = EMPTY } = {}) =>
this.actions$.pipe(
ofType(LOAD_ORDERS_LOGISTIC_STATUS),
withLatestFrom(this.store$.pipe(select(orderLogisticsStatusPollingIntervalSelector))),
switchMap(([action, pollingInterval]) =>
timer(0, pollingInterval, scheduler).pipe(
takeUntil(stopTimer),
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')));
}
return 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));
})
);
}
}