Angular 在角分量中测试ngrx动作流

我想为以下组件创建单元测试：

@Component({
    selector: 'app-my-component',
    templateUrl: './wirtschaftseinheitstypen.component.html',
    styleUrls: ['./wirtschaftseinheitstypen.component.scss']
})
export class MyComponent {
    loading = false;
    ctrl = this.fb.control(null, Validators.required);

    constructor(
        private store: Store<State>,
        private actions$: Actions,
        private fb: FormBuilder,
    ) { }

    create() {
        this.loading = true;
        const actn = createAction({ value: this.ctrl.value });
        merge(
            this.actions$.pipe(
                ofType(successAction),
                tap(() => this.ctrl.reset()),
            ),
            this.actions$.pipe(
                ofType(errorAction),
                filter(({ action }) => action === actn))
        ).pipe(take(1)).subscribe(() =>
            this.loading = false
        );

        this.store.dispatch(actn);
    }
}

@组件({
选择器：“应用程序我的组件”，
templateUrl:'./wirtschaftseinheitstypen.component.html'，
样式URL:['./wirtschaftseinheitstypen.component.scss']
})
导出类MyComponent{
加载=假；
ctrl=this.fb.control（null，Validators.required）；
建造师(
私家店，
私有操作$：操作，
私人fb:FormBuilder，
) { }
创建（）{
这是。加载=真；
const actn=createAction（{value:this.ctrl.value}）；
合并(
此.actions$管道(
类型（成功动作），
点击（（）=>this.ctrl.reset（）），
),
此.actions$管道(
类型（错误动作），
过滤器（（{action}=>action==actn））
).pipe（take（1））.subscribe（（）=>
此参数为0。加载=错误
);
本.存储.调度（actn）；
}
}

单击“创建”按钮时，将向ngrx存储发送操作，并显示加载指示器。使用ngrx效果，将执行对后端的请求，并将调度成功或错误操作。在这两种情况下，加载指示器都应隐藏在部件中

对于测试规范，使用了旁观者和笑话。我想测试以下内容：

• 一开始不应该有加载指示器
• 调用create方法后，应执行createAction
• 调用create方法后，应该显示加载指示器
• 执行成功或失败操作时，应隐藏加载指示器

最后一点是我正在努力的地方。我不知道如何用我的成功行动“填充”行动流。以下是设置：

describe('MyComponent', () => {
    let actions$: Observable<Action>;
    const initialState: State = { items: [] };
    let spectator: Spectator<MyComponent>;

    const createComponent = createComponentFactory({
        component: MyComponent,
        imports: [
            ReactiveFormsModule,
            FormsModule,
        ],
        declarations: [
            MyComponent,
        ],
        providers: [
            provideMockStore({ initialState }),
            provideMockActions(() => actions$),
            FormBuilder,
        ],
    });

    beforeEach(() => spectator = createComponent());

    test('should create', () => {
        const value = 'value';
        const mockStore = spectator.inject(MockStore);

        spectator.component.ctrl.setValue(value);
        expect(spectator.component.ctrl.valid).toBeTruthy();

        let scheduler = new TestScheduler((actual, expected) => expect(actual).toStrictEqual(expected));
        scheduler.run(({ expectObservable }) => {
            spectator.component.create();
            expectObservable(mockStore.scannedActions$).toBe('a', { a: createAction({ value }) });
        });

        expect(spectator.component.loading).toBeTruthy();
        
        // This is where it gets tricky

        const item = { id: 42, text: value };
        scheduler = new TestScheduler((actual, expected) => expect(actual).toStrictEqual(expected));
        scheduler.run(({ cold, expectObservable }) => {
            const action = addWirtschaftseinheitsTyp({ wirtschaftseinheitsTyp });
            actions$ = cold('a', { a: action }).pipe(tap(() => mockStore.dispatch(action)));
            expectObservable(actions$).toBe('a');
        });

        // This part of the test fails

        expect(Array.from(spectator.component.loading)).toBeFalsy();
    });
}

description（'MyComponent'，（）=>{
让动作$：可观察；
const initialState:State={items:[]}；
让观众：观众；
const createComponent=createComponentFactory({
成分：MyComponent，
进口：[
反应形式模块，
FormsModule，
],
声明：[
MyComponent，
],
供应商：[
provideMockStore（{initialState}），
provideMockActions（（）=>actions$），
造模工，
],
});
beforeach（（）=>旁观者=createComponent（））；
测试（'应该创建'，（）=>{
常量值='value'；
const mockStore=旁观者注入（mockStore）；
旁观者.component.ctrl.setValue（值）；
expect（conspector.component.ctrl.valid）.toBeTruthy（）；
let scheduler=newtestscheduler（（实际，预期）=>expect（实际）.toStrictEqual（预期））；
scheduler.run（（{expectObservable}）=>{
component.create（）；
expectObservable（mockStore.scannedActions$）.toBe（'a'，{a:createAction（{value}）}）；
});
expect（旁观者.组件.加载）.toBeTruthy（）；
//这就是它变得棘手的地方
const item={id:42，text:value}；
调度器=新的TestScheduler（（实际，预期）=>expect（实际）.ToStritteQual（预期））；
scheduler.run（{cold，expectObservable}）=>{
const action=addWirtschaftseinheitsTyp（{wirtschaftseinheitsTyp}）；
actions$=cold（'a'，{a:action}）.pipe（tap（（）=>mockStore.dispatch（action））；
预期可观察（行动$）.toBe（'a'）；
});
//这部分测试失败
expect（Array.from（conspector.component.load））.toBeFalsy（）；
});
}

我很高兴听到关于如何正确进行这些测试的任何建议