使用模拟存储时如何在ngxs中模拟@Select

Question

我正在使用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 $？还有其他建议吗？

Answer 1

我偶然发现了同样的问题，我发现单独使用 Angular 的 DI 机制是不可能的。但是，可以通过创建实际实例然后像这样模拟它：

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 依赖项）的构造函数中有依赖项，您还需要将它们提供给提供者数组。