Testing asynchronous RxJs operators

Time traveling with virtual time and time progression syntax

AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev. Thanks for being part of indepth movement!

Are you working with RxJS? Yes, everybody does those days! Have you already heard about marble diagrams? Yes, since you work with RxJS 😉 Did you know that you can apply marble diagrams in tests? Probably.

But have you already heard about “time progression syntax”?

Time-traveling become real

With version 6, RxJS introduced new testing utilities and with it a new syntax called “time progression syntax”. It’s a syntax which allows us to jump forward in time by skipping a given amount of time.

The time progression notion is deeply inspired by CSS duration syntax. It’s always written in the following format.

number + time unit

The number needs to be a float or an int. The time unit can either be ms (milliseconds), s (seconds) or m (minutes).

Let’s have a look at some examples:

200ms, 9.5s, 8m