Блог

Я пытаюсь создать два разных макетных поставщика и spys для классов, которые вводятся в мой компонент. Зависимости относятся к одному и тому же классу, но используют другой набор текста, используя общие.

 constructor(
private readonly languageStore: Store<fromLanguageStore.LanguageState>,
private readonly userStore: Store<fromUserStore.UserState>) {}
 

component.ts

Я пробовал следующее;

 providers: [
    {
      provide: Store<fromLangaugeStore.LanguageState>,
      useValue: languageStoreMock
    },
    {
      provide: Store<fromUserStore.UserState>,
      useValue: userStoreMock
    }
  ]
 

component.spec.ts

В файле спецификации невозможно выполнить вышеуказанное. Я также пытался использовать одного поставщика и использовать spyOn следующим образом;

 spyOn(storeMock, 'pipe').and.callFake((func) => {
  //
})
 

но в метод передается функция select() '@ngrx/store' , и я не вижу, как переключить то, что возвращается поддельным, на основе метода, поскольку они оба передают select, но аргумент отличается, т.е.

 this.languageStore.pipe(select(fromLanguageStore.getLanguageContext))
this.userStore.pipe(select(fromUserStore.getUserContext))
 

Мне странно, что вы вводите Store дважды в свой компонент. Я бы просто ввел его один раз вот так:

 constructor(
private readonly store: Store<fromLanguageStore.LanguageState | fromUserStore.UserState>) {}
 

Хранилище — это одна база данных, и в любое время, когда вам нужно languageState , вы можете сделать:

 languageState$ = this.store.select(....); // select the language state from the store
userState$ = this.store.select(....); // select the user state from the store
 

Таким образом, вам нужно будет создать макет только Store один раз.

Редактировать

Я предоставляю хранилище и провожу интеграционное тестирование, чтобы имитировать разные фрагменты хранилища.

 TestBed.configureTestingModule({
  declarations: [AppComponent, BookListComponent, BookCollectionComponent],
  imports: [
    HttpClientTestingModule,
    StoreModule.forRoot({
      books: booksReducer,
      collection: collectionReducer,
    }),
  ],
  providers: [GoogleBooksService],
}).compileComponents();
 
fixture = TestBed.createComponent(AppComponent);
component = fixture.debugElement.componentInstance;
store = TestBed.inject(Store);  // get a handle on the store
store.dispatch(new SetUsers(...)); // put the users you want in the ...
store.dispatch(new SetLanguage(...)); // put the language state you want in the ... // after doing the above lines, your store should be populated with what you want
fixture.detectChanges();
 

Проверьте эту ссылку.