Marble testing observable that changes after a method call?

Question

In Angular 8, I have a service with a readonly Observable property, spawned from a BehaviorSubject<string> that contains a string describing the service's state. Also in the service are methods that change the state of the service.

export class StateService {
  private _state = new BehaviorSubject<string>('before');

  readonly state$ = this._state.asObservable();

  constructor () { }

  begin() { this._state.next('during'); }

  finish() { this._state.next('after'); }

  reset() { this._state.next('before'); }
}

What I want to do is write marble tests in my Jasmine suite to elegantly test the value of this observable as it would change.

let scheduler: TestScheduler;

beforeEach(() => {
  scheduler = new TestScheduler((actual, expected) => {
    expect(actual).toEqual(expected);
  });
});

it('should flow states correctly', () => {
  scheduler.run(({expectObservable, flush}) => {
    const svc = setupSvc(); //Call to a function in the suite that sets up the StateService

    svc.begin();
    svc.finish();
    svc.reset();

    flush();

    expectObservable(svc.state$).toBe('a-b-c-d', {
      a: 'before',
      b: 'during',
      c: 'after',
      d: 'before'
    });
  });
});

I've tried varying combinations of calling begin, finish, reset, and the scheduler's flush helper, but the expectation always reports just the one initial value (the a marble) and no others.

What am I missing to be able to pull this off? Or are marbles the wrong way to go about testing this?

are you sure it is a and not d? not sure about rxjs-marbles(used only jasmine's), but seems '10ms(-)' is not "working here" and it could emit only last value - d — andriishupta
assumption: after calling all method state$ would be only the last one, such as BehaviourSubject asObservable is a single value — andriishupta
@andriishupta That is possible, hard to tell in this case since a and d have the same value and the reporter is only showing one value emitted from the observable regardless of where I put flush() — p0lar_bear

NickL NickL · Accepted Answer · 2020-02-06T11:23:40

Subscribing to a cold observable produced via the test helper seems to work:

it('should flow states correctly', () => {
  scheduler.run(({ expectObservable, cold }) => {
    const svc = new StateService();

    cold('--a-b-c', {
      a: 'begin',
      b: 'finish',
      c: 'reset'        
    }).subscribe(methodName => {
      svc[methodName]();
    })

    expectObservable(svc.state$).toBe('a-b-c-d', {
      a: 'before',
      b: 'during',
      c: 'after',
      d: 'before'
    });
  });
});

Stackblitz

Marble testing observable that changes after a method call?

1 Answers