How to test code inside Observable subscription with jasmine marbles

Question

I have a component that subscribes to observable returned from service in ngOnInit. I also have method (updateData) which subscribes to observable from service but also updates some property inside subscription. I need to create a test to check if this property is changed to correct value when updateData is called.

Component snippet:

ngOnInit() {
    this.myService.loadData().subscribe() => {
        // some code here
    });
}

...

public updateData() {
    this.myService.updateData(this.data).subscribe(() => {
        this.dataUpdated = true;
    });
}

Test setup

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;
  let myServiceSpy: jasmine.SpyObj<MyService>;

  const dataMock = {};
  const updateResponseMock = {};

  beforeEach(async(() => {
    myServiceSpy = jasmine.createSpyObj('DesignPickerService', [
      'loadData',
      'updateData'
    ]);
    myServiceSpy.loadData.and.returnValue(
      cold('-a|', { a: dataMock })
    );
    myServiceSpy.updateData.and.returnValue(
      cold('--b|', { b: updateResponseMock })
    );
    TestBed.configureTestingModule({
      declarations: [
        MyComponent,
      ],
      providers: [
        {
          provide: MyService,
          useFactory: () => {
            return myServiceSpy;
          }
        }
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
  describe('Tests', () => {
    it('updateData should set dataUpdated to true', () => {
      ??? // some code to wait for myService.loadData to finish
      component.dataUpdated = false;
      component.updateData();
      ??? // some code to wait for myService.updateData to finish
      expect(component.dataUpdated).toBe(true);
    })
  });
});

I want to add those missing lines so the test would pass. Any help would be appreciated.

Answer 1

I'm sorry i tought you're talking about an http call, you can try this way but i didn't use service, you can easily mock it.

fit('should return correct data', (done) => {

expect(component.dataUpdated).toEqual(false);

component.getData().subscribe(data => {
  expect(data).toEqual([1, 2, 3, 4]);
  expect(component.dataUpdated).toEqual(true);
  done();
}
  );

  });


export class ObservableTddComponent implements OnInit {

  dataUpdated;

  constructor() {
    this.dataUpdated = false;
  }

  ngOnInit() {
    this.getData().subscribe( (x) => {
      this.dataUpdated = true;
    });
  }

  getData(){
    return of([1,2,3,4]).pipe(delay(500));
  }

}

You can find more about it, reading this article: https://itnext.io/a-quick-tip-on-testing-observables-e2fbdebef4c