使用@angular-redux/store测试@select装饰器

Question

当在Angular中测试依赖于@select()装饰器的组件时，我使用MockNgRedux.getSelectorStub('myStoreProperty').next(testState)向订阅者发送新值，但是当我调用next函数时，它不会用新值触发订阅。

参见示例代码：

export class BasicInfoComponent {
    @select() application$: Observable<Application>;
    this.application$.subscribe((app: Application) => { 
        //... this code is never triggered.
    }

}

下面是测试设置

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [BasicInfoComponent],
      imports: [
        NgReduxTestingModule,
        ReactiveFormsModule
      ],
      providers: [
       //... providers
      ],
      schemas: [NO_ERRORS_SCHEMA]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BasicInfoComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    MockNgRedux.reset();
  });

  afterEach(() => {
    fixture.destroy();
  });

Answer 1

在创建组件之前，必须调用MockNgRedux.reset()。MockNgRedux连接到测试期间创建的所有@select装饰器，在组件创建@select装饰器后调用reset将断开MockNgRedux与其当前连接的所有装饰器的连接。

将beforeEach函数修改为如下所示：

beforeEach(() => {
    // NOTE: MockNgRedux Reset must happen before the creation of the component
    // otherwise it will reset the connections to the select decorators.
    MockNgRedux.reset();
    fixture = TestBed.createComponent(BasicInfoComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

Answer 2

我也遇到过类似的问题，但这是因为我在@select(...)中使用了lambda选择。似乎MockNgRedux需要您使用与@select(...)使用的完全相同的选择器来调用getSelectorStub。

所以，如果你有

const selectorStub = MockNgRedux.getSelectorStub(['status', 'text']);

然后，您还需要在组件中以相同的方式选择它：

@select(['status', 'text'])
readonly statusText: Observable<string>;