无法在角度单元测试中模拟服务并返回数据 - 表示未定义

Question

I have the following component for which I am trying to write a unit tests for. When I run the below test, I see value for

console.log('**fav**' + favorite[`isFavorite`]);

as undefined meaning the data that I am trying to return by mocking service is not getting returned I think. My understanding is that in order to test it, I should mock the service and return data, which then would call handleData and executes. Where is the mistake I am committing?

  ngOnInit(): void {
    this.favoriteService.getData().subscribe(item => {
      if (Object.keys(item).length) {
        this.handleData(item);
      }
    });
  }

  handleData(favorite) {
    console.log('**fav**' + favorite[`isFavorite`]);
    if (favorite[`isFavorite`]) {
      console.log('****1****');
      // some logic
    } else {
      // some logic
    }
  }

Following is my spec file -

describe('FavoritesComponent', () => {
  let component: FavoritesComponent;
  let fixture: ComponentFixture<FavoritesComponent>;
  let stubFavoriteGatewaySpec: StubFavoriteGatewaySpec;
  let spyFavoriteService: jasmine.SpyObj<FavoriteService>;

  const favouriteData = [
    {
      tickerTypeName: 'Market Price',
      type: 'MP',
      headers: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
      data: [
        [1, '1.020'],
        [0, '-0.250'],
        [-5, '-4.560'],
        [-149, '-149.000'],
      ],
      isFavorite: true,
    }
  ];

  beforeEach(async(() => {
    stubFavoriteGatewaySpec = new StubFavoriteGatewaySpec();
    spyFavoriteService = jasmine.createSpyObj('FavoriteService', [
      'getData',
    ]);
    spyFavoriteService.getData.and.returnValues(of(favouriteData));

    TestBed.configureTestingModule({
      imports: [MatExpansionModule],
      declarations: [FavoritesComponent],
      providers: [
        { provide: FavoritesGateway, useValue: stubFavoriteGatewaySpec },
        { provide: FavoriteService, useValue: spyFavoriteService },
      ],
    })
      .compileComponents()
      .catch(console.log);
  }));

  beforeEach(async(() => {
    fixture = TestBed.createComponent(FavoritesComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

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

Answer 1

//Mock

const favouriteData = {
  tickerTypeName: 'Market Price',
  type: 'MP',
  headers: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
  data: [
    [1, '1.020'],
    [0, '-0.250'],
    [-5, '-4.560'],
    [-149, '-149.000'],
  ],
  isFavorite: true,
};

//test

it(
'should set the favorite to true onload',
fakeAsync(() => {
  spyOn(spyFavoriteService, 'getData').and.returnValue(of(favouriteData));
  component.ngOnInit();
  expect(component.isFavorite).toBeTruthy();
 //test your other logic 
})
);

No need to spy on beforeEach , Mock it on test level. Not sure what you are trying to do inside handle function, if you have a component variable like isFavorite then it should work.

if using Angular 12 use waitForAync instead of fakeAsync .