带有订阅的商店选择器的角度单元测试组件

Question

我正在使用NGRX扇区从商店获取数据。这是我的代码。

组件文件

export class SpinnerComponent implements OnInit {
  isLoading = false;
 
  constructor(private readonly store$: Store<AppState>) { }
 
  ngOnInit(): void {
    this.store$.pipe(select((state: AppState) => state.spinnerState.isLoading)).
      subscribe((data: any) => {
         this.isLoading = data;
      });
  }

规格文件

import { SpinnerComponent } from './spinner.component';
import { AppState } from '../../../core/store/app.state';
import { Store } from '@ngrx/store';
import { provideMockStore } from '@ngrx/store/testing';

fdescribe('SpinnerComponent', () => {
  let component: SpinnerComponent;
  let fixture: ComponentFixture<SpinnerComponent>;
  let store: Store<AppState>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ SpinnerComponent ],
      providers: [provideMockStore({
        selectors: [
          {
            selector: 'isLoading',
            value: [
              {
                isLoading: false,
              },
            ],
          },
        ],
      })],
    })
    .compileComponents();
  });
  beforeEach(() => {
    store = TestBed.inject(Store);
    spyOn(store, 'select').and.callThrough();
    fixture = TestBed.createComponent(SpinnerComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  describe('when "ngOnInit()" method calls', () => {
      it('should set "isLoading" as false ', () => {
        component.ngOnInit();
        expect(component.isLoading).toEqual(false);   
      });
    });
});

覆盖范围文件说

这些行不涵盖。 我添加了 spyon（store，'select'）。和。callthrough（）;

我需要在规格中访问store.select（）。订阅吗？

编辑1

在 .spec 文件中进行了一些更改

fdescribe('SpinnerComponent', () => {
  let component: SpinnerComponent;
  let fixture: ComponentFixture<SpinnerComponent>;
  let store: MockStore<AppState>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ SpinnerComponent ],
      providers: [provideMockStore({
        selectors: [
          {
            selector: SpinnerState.selectSpinnerState,
            value: [
              {
                isLoading: false,
              },
            ],
          },
        ],
      })],
    })
    .compileComponents();
  });

  beforeEach(() => {
    store = TestBed.inject(MockStore);
    store.overrideSelector(SpinnerState.selectSpinnerState, false);
    spyOn(store, 'select').and.callThrough();
    fixture = TestBed.createComponent(SpinnerComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  describe('when "ngOnInit()" method calls', () => {
      it('should set "isLoading" as false ', () => {
        component.ngOnInit();
        store.pipe(select(SpinnerState.selectSpinnerState)).subscribe((mockData: any) => {
          expect(mockData.isLoading).toBe(false);

        });
        expect(component.isLoading).toEqual(false);

      });
    });

});

，现在它在此行上显示remon

expect(mockData.isLoading).toBe(false);

我该如何解决此问题。

请

提前给我建议