#Unit test a declared observable with unique return values?

2 messages · Page 1 of 1 (latest)

true isle
#

Below is some generic code showing a compoenent with a declared var called myData which I'm trying to unit test. Problem is that I can't get "getQuote()" to return the different kinds of mock data that I need. Inside of a unit test, if I do somthing like getQuoteSpy.and.returnValue(of(var)); then it does not return my var. I assume because the component has already been initialized with the value given in "beforeEach()". I also can't call "getQuote()" in ngOnInit because of my linter which is limiting. Any ideas?

Also to note: myData is using the async pipe in my template

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.sass']
})
export class HomeComponent implements OnInit, OnDestroy {

    public myData : Observable<myData> = this.TwainService.getQuote();
    ...
    ...
beforeEach(() => {
  testQuote = 'Test Quote';
  const twainService = jasmine.createSpyObj('TwainService', ['getQuote']);
  getQuoteSpy = twainService.getQuote.and.returnValue(of(testQuote));

  TestBed.configureTestingModule({
    declarations: [TwainComponent],
    providers: [{provide: TwainService, useValue: twainService}]
  });

  fixture = TestBed.createComponent(TwainComponent);
  component = fixture.componentInstance;
  quoteEl = fixture.nativeElement.querySelector('.twain');
});```
torpid crystal
#

Make it return a Subject in beforeEach, and call next() on that subject in your tests. Or make it return of(something), but initialize the component in the test rather than doing it in beforeEach.