2

Am using using ngrx sectors to get the data from store. Here is my code.

component file

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;
      });
  }

spec file

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);   
      });
    });
});

The coverage file says

enter image description here

these lines are not covered. i have added spyOn(store, 'select').and.callThrough();

Do i need to call store.select().subscribe inside the spec?

Edit 1

made some changes in the .spec file

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);

      });
    });

});

Now its showing errorn on this line

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

enter image description here

How can i fix this.

please give advice

Thanks in advance

arj
  • 887
  • 1
  • 15
  • 37

0 Answers0