angular - NgRx 8 Test provideMockStore - Durum Dilimi için setState

NgRx uygulamam için şöyle görünen akıllı bir bileşen testim var:

describe( 'Component', () => {
  let store: MockStore<State>;

  beforeEach( async( () => {
    TestBed.configureTestingModule( {
        /* ... */
        providers: [
            provideMockStore( { initialState: fromReducer.initialState } )
        ]
    } ).compileComponents();
    store = TestBed.get<Store<State>>( Store );
  } ) );

  it( 'should load items in #ngOnInit', () => {
    store.setState( {
        item: {
          ...fromReducer.initialState,
          entities: { [item.id]: item },
        },
        otherFeature: null,
        otherFeature: null,
        otherFeature: null
    } );
    component.items$.subscribe( items =>
        store.select( ItemStoreSelectors.selectItems ).subscribe( fromStore => expect( items ).toEqual( fromStore ) )
    );
  } );
});

provideMockStore ve setState kullanarak NgRx durumumu taklit ediyorum. Her şey bu şekilde gayet iyi çalışıyor, ama gerçekten bundan hoşlanmıyorum:

store.setState( {
    item: {
      ...fromReducer.initialState,
      entities: { [item.id]: item },
    },
    otherFeature: null,
    otherFeature: null,
    otherFeature: null
} );

Durumumu oluşturan diğer her özellik dilimini setState fonksiyonuna eklemem gerekiyor. Aksi takdirde Typescript Hatalar verecektir.

Tercihen kök durumu ayarlamak istemiyorum, bunun yerine şöyle belirli bir özellik dilimini ayarlamak istiyorum:

store.setState( {
  ...fromReducer.initialState,
  entities: { [item.id]: item },
} );

Burada, durumun belirli dilimleri için provideMockStore kullanmaya dair herhangi bir belge bulamadım.

Cevap #1

Burada farklı bir yaklaşım benimsemenizi tavsiye ederim. Bunun yerine yapmanız gereken, seçicinizi ve bileşeninizi bağımsız olarak birim testine tabi tutmaktır.

NgRx 8, sahte seçicilere izin verir. Bileşeninizde bunu kullanarak bileşenin mantığının doğru olduğunu doğrulayın.

Sonra, seçicinizi bağımsız olarak birim testi yaparak seçicinizin amaçlandığı gibi çalıştığını doğrulayın.

Bu şekilde testler bağımsız, kırılgan değil ve gerçekten birim testleridir.

Düzeltme: Bağlantısını verdiğim belgeler resmidir, ama seçicilerinizi taklit etmenin alternatif bir yolu şudur:

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        provideMockStore({
          selectors: [
            {
              selector: yourSelectorNameHere,
              value: someMockValueHere
            }
          ]
        })
      ]
    });

Cevap #2

Xander'in bahsettiği gibi mockSelectors kullanabilirsiniz. TS'in şikayet etmesinin nedeni onu nasıl yazdığınız.

MockStore<State> muhtemelen tüm durum ağacınızdır, sadece bir özellik dilimi için MockStore<FeatureState> kullanın

İlgili makaleler