Как смоделировать @Select в ngxs при использовании фиктивного магазина - PullRequest
Новая
       19

Как смоделировать @Select в ngxs при использовании фиктивного магазина

0 голосов
/ 28 июня 2018

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

То, что мы имеем в нашем компоненте, выглядит примерно так: 

export class SelectPlatformComponent {

  @Select(PlatformListState) platformList$: Observable<PlatformListStateModel>;

  constructor(private store: Store, private fb: FormBuilder) {
    this.createForm();
    this.selectPlatform();
  }

  createForm() {
    this.selectPlatformForm = this.fb.group({
      platform: null,
    });
  }

  selectPlatform() {
    const platformControl = this.selectPlatformForm.get('platform');
    platformControl.valueChanges.forEach(
      (value: Platform) => {
        console.log("select platform " + value);
        this.store.dispatch(new PlatformSelected(value));
      }
    );
  }

}

И наша установка прибора выглядит следующим образом, поэтому мы можем проверить звонки в магазине: 

describe('SelectPlatformComponent', () => {
  let component: SelectPlatformComponent;
  let fixture: ComponentFixture<SelectPlatformComponent>;
  let store: Store;

  beforeEach(async(() => {
    const storeSpy = jasmine.createSpyObj('Store', ['dispatch']);
    TestBed.configureTestingModule({
      imports: [ReactiveFormsModule],
      declarations: [SelectPlatformComponent],
      providers: [{provide: Store, useValue: storeSpy}]

    })
      .compileComponents();
    store = TestBed.get(Store);
  }));

Но когда мы запускаем это, мы получаем следующую ошибку: 

Error: SelectFactory not connected to store!
    at SelectPlatformComponent.createSelect (webpack:///./node_modules/@ngxs/store/fesm5/ngxs-store.js?:1123:23)
    at SelectPlatformComponent.get [as platformList$] (webpack:///./node_modules/@ngxs/store/fesm5/ngxs-store.js?:1150:89)
    at Object.eval [as updateDirectives] (ng:///DynamicTestModule/SelectPlatformComponent.ngfactory.js:78:87)
    at Object.debugUpdateDirectives [as updateDirectives] (webpack:///./node_modules/@angular/core/fesm5/core.js?:11028:21)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:10425:14)
    at callViewAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:10666:21)
    at execComponentViewsAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:10608:13)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:10431:5)
    at callWithDebugContext (webpack:///./node_modules/@angular/core/fesm5/core.js?:11318:25)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (webpack:///./node_modules/@angular/core/fesm5/core.js?:10996:12)

Я мог бы включить для этого весь модуль ngxs, но тогда мне нужно было бы создавать макеты служб для внедрения в объекты состояния, что мне не нравится, потому что я больше не тестирую компонент изолированно. Я пытался создать макет SelectFactory, но, похоже, он не экспортируется из модуля.

Есть ли способ смоделировать SelectFactory или напрямую вставить некоторые макеты в platformList $? Другие предложения?

Ответы [ 2 ]

0 голосов
/ 02 апреля 2019

Я наткнулся на ту же проблему и обнаружил, что это невозможно с одним только механизмом DI Angular. Тем не менее, это возможно, получив фактический экземпляр и затем смоделируя его так: 

beforeEach(async(() => {
   TestBed.configureTestingModule({
      declarations: [MyComponent]
      imports: [NgxsModule.forRoot([])] // import real module without state
   });

   const store:Store = TestBed.get(Store);
   spyOn(store, 'select').and.returnValue(of(null)); // be sure to mock the implementation here
   spyOn(store, 'selectSnapshot').and.returnValue(null); // same here
}));

Если вы используете запомненные селекторы (например, @Select(MyState.selector)) внутри вашего компонента, обязательно ВСЕГДА высмеивайте функцию выбора магазина. Если вы этого не сделаете, NGXS попытается создать экземпляр класса MyState независимо от того, не был ли он предоставлен NgxsModule.forRoot([]). Во многих случаях это не проблема, но как только у вас есть зависимости внутри конструктора MyState (зависимости Angular DI), вам также нужно будет предоставить их массиву провайдеров.

0 голосов
/ 28 июня 2018

У меня была та же проблема, и я решил ее, удалив поставщика Магазина из массива провайдеров, а также настроил: 

TestBed.configureTestingModule({
        imports: [NgxsModule.forRoot([MyState])],
});
...