@ angle-redux/storeで@selectデコレータをテストする

Question

@select()デコレータに依存するAngularでコンポーネントをテストする場合、私はMockNgRedux.getSelectorStub('myStoreProperty').next(testState)を使用して新しい値をサブスクライバに送信しますが、次の関数を呼び出すと、新しい価値を持つサブスクリプション。

のコード例を参照してください：ここで

export class BasicInfoComponent { 
    @select() application$: Observable<Application>; 
    this.application$.subscribe((app: Application) => { 
     //... this code is never triggered. 
    } 

} 

は、コンポーネントが作成されている前にあなたがMockNgRedux.reset()を呼び出す必要があり、テスト・セットアップ

beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [BasicInfoComponent], 
     imports: [ 
     NgReduxTestingModule, 
     ReactiveFormsModule 
     ], 
     providers: [ 
     //... providers 
     ], 
     schemas: [NO_ERRORS_SCHEMA] 
    }) 
     .compileComponents(); 
    })); 

    beforeEach(() => { 
    fixture = TestBed.createComponent(BasicInfoComponent); 
    component = fixture.componentInstance; 
    fixture.detectChanges(); 
    MockNgRedux.reset(); 
    }); 

    afterEach(() => { 
    fixture.destroy(); 
    }); 

Answer 1

です。 MockNgReduxは、テスト中に作成されたすべての@selectデコレータに接続し、@selectデコレータがコンポーネントによって作成された後にリセットを呼び出すと、現在接続しているすべてのデコレータからMockNgReduxが切断されます。

は次のように見えるようにbeforeEach機能を変更します。

beforeEach(() => { 
    // NOTE: MockNgRedux Reset must happen before the creation of the component 
    // otherwise it will reset the connections to the select decorators. 
    MockNgRedux.reset(); 
    fixture = TestBed.createComponent(BasicInfoComponent); 
    component = fixture.componentInstance; 
    fixture.detectChanges(); 
    }); 

Answer 2

私は同様の問題があったが、私は@select(...)にラムダの選択を使用していたので、それを引き起こしました。 MockNgReduxは、と全く同じセレクタでgetSelectorStubに電話する必要があるようです。だから、

、あなたが

const selectorStub = MockNgRedux.getSelectorStub(['status', 'text']); 

を持っているならば、あなたもそれをコンポーネントでも同じ方法を選択する必要があります。

@select(['status', 'text']) 
readonly statusText: Observable<string>;