angular - 使用模拟商店时如何在 ngxs 中模拟 @Select

Question

我正在使用 ngxs 进行 Angular 状态处理，我正在尝试将我们的组件作为单元进行测试，因此最好只使用模拟商店、状态等。

我们的组件中有这样的东西:

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 模块，但随后我需要创建服务模拟以注入(inject)状态对象，我不喜欢这样做，因为这样我就不再单独测试组件了。我试图创建一个模拟 SelectFactory，但它似乎没有从模块中导出。

有没有办法模拟 SelectFactory，或者直接将一些模拟注入(inject) 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 依赖项)，您还需要将它们提供给 providers 数组。