Angular, Jasmine, Jest and Sinon.JS all provide APIs for running tests with fake time. Their APIs differ, but they are broadly similar:
setTimeout
and setInterval
are patched to use fake time instead of actual time.Running tests with fake time avoids having to wait for actual time to elapse and it also makes the tests much simpler, as they run synchronously.
So what does this have to do with RxJS?
RxJS has its own concept of fake time — which is named virtual time. In RxJS, all time-related functionality is implemented in schedulers and there is a particular scheduler for virtual time: the [VirtualTimeScheduler](https://github.com/ReactiveX/rxjs/blob/6.2.1/src/internal/scheduler/VirtualTimeScheduler.ts)
.
To test RxJS-based code with virtual time, any schedulers used — either explicitly or implicitly — need to be swapped for an instance of the VirtualTimeScheduler
.
Unfortunately, that’s not always easy to do. And using the VirtualTimeScheduler
won’t help if the code under test also includes time-related, non-RxJS code, as the virtual and fake time concepts differ significantly.
To solve this problem, I’ve added a [fakeSchedulers](https://github.com/cartant/rxjs-marbles#fakeschedulers)
function to [rxjs-marbles](https://github.com/cartant/rxjs-marbles)
, so that tests can use fake time for situations in which a marble test would be too complicated to write.
Let’s have a look at how it can be used.
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Observable } from 'rxjs';
import { debounceTime, distinctUntilChanged, pluck } from 'rxjs/operators';
@Component({
selector: 'some-component',
template: `
<form [formGroup]="form">
<input formControlName="term" type="text">
</form>
<div class="searching" *ngIf="term$ | async as term">
<span>Searching for {{ term }}</span>
</div>
`
})
export class SomeComponent {
form: FormGroup;
term$: Observable<string>;
constructor(formBuilder: FormBuilder) {
this.form = formBuilder.group({
term: ['']
});
this.term$ = this.form.valueChanges.pipe(
pluck('term'),
debounceTime(400),
distinctUntilChanged()
) as Observable<string>;
}
}
fakeschedulers-ng-component.ts
Whenever the search term’s input
changes, the form’s value is debounced and repeated values are ignored. If the resultant search term isn’t an empty string, the searching indicator is shown. The component doesn’t do anything useful; it does just enough to give us something to test.
We could test that the searching indicator exhibits the expected behaviour with a test something like this:
import { TestBed, async } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { fakeSchedulers } from 'rxjs-marbles/jasmine/angular';
import { SomeComponent } from './some.component';
describe("SomeComponent", () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [SomeComponent],
imports: [FormsModule, ReactiveFormsModule]
}).compileComponents();
}));
it('should indicate when searching', fakeSchedulers(() => {
const fixture = TestBed.createComponent(SomeComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
const input = compiled.querySelector('input');
expect(compiled.querySelector('.searching')).toBeNull();
input.value = 'foo';
input.dispatchEvent(new Event('input', { bubbles: true }));
fixture.detectChanges();
expect(compiled.querySelector('.searching')).toBeNull();
tick(400);
fixture.detectChanges();
expect(compiled.querySelector('.searching')).not.toBeNull();
expect(compiled.querySelector('.searching span').textContent).toMatch(/foo/);
}));
});
fakeschedulers-ng-spec-event.ts
Internally, fakeSchedulers
calls Angular’s fakeAsync
, so fake time is advanced the same way: by calling tick
.
The above test triggers the form’s valueChanges
by dispatching an event. It could also trigger the change using an explicit call to the form’s patchValue
method, like this:
it('should indicate when searching', fakeSchedulers(() => {
const fixture = TestBed.createComponent(SomeComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
const input = compiled.querySelector('input');
expect(compiled.querySelector('.searching')).toBeNull();
fixture.componentInstance.form.patchValue({ term: 'foo' });
fixture.detectChanges();
expect(compiled.querySelector('.searching')).toBeNull();
tick(400);
fixture.detectChanges();
expect(compiled.querySelector('.searching')).not.toBeNull();
expect(compiled.querySelector('.searching span').textContent).toMatch(/foo/);
}));
fakeschedulers-ng-spec-patch.ts
Here’s a React version of the Angular component:
import * as React from "react";
import { componentFromStream, createEventHandler } from "recompose";
import { from } from "rxjs";
import { debounceTime, distinctUntilChanged, map, startWith } from "rxjs/operators";
export const SomeComponent = () => {
const { handler, stream } = createEventHandler();
const SearchingComponent = componentFromStream(props => from(stream).pipe(
map(event => event.target.value),
debounceTime(400),
distinctUntilChanged(),
startWith(""),
map(term => !term ? null : (
<div className="searching">
<span>Searching for {term}</span>
</div>
))
);
return (<>
<input onChange={handler} type="text"/>
<SearchingComponent/>
</>);
};
fakeschedulers-react-component.tsx
It uses the [createEventHandler](https://github.com/acdlite/recompose/blob/master/docs/API.md#createeventhandler)
and [componentFromStream](https://github.com/acdlite/recompose/blob/master/docs/API.md#componentfromstream)
functions from [recompose](https://github.com/acdlite/recompose)
to compose an observable-based component that emits DOM elements when the input
changes.
If you’ve not seen how recompose
can be used to compose observable-based components in React, this talk by Andrew Clark is well worth watching.
To test the component with fake time, we could do something like this:
import { mount } from "enzyme";
import * as React from "react";
import { fakeSchedulers } from "rxjs-marbles/jest";
import { SomeComponent } from "./SomeComponent";
describe("SomeComponent", () => {
beforeEach(() => jest.useFakeTimers());
it("should indicate when searching", fakeSchedulers(advance => {
const wrapper = mount(<SomeComponent />);
expect(wrapper.find('.searching')).toHaveLength(0);
wrapper.find("input").simulate("change", { target: { value: "foo" } });
advance(400);
wrapper.update();
expect(wrapper.find('.searching')).toHaveLength(1);
expect(wrapper.find(".searching").html()).toMatch(/foo/);
}));
});
fakeschedulers-react-test.tsx
Unlike Angular, Jasmine and Sinon.JS, Jest does not patch Date
. In particular, it does not patch Date.now
.
That means fakeSchedulers
needs to keep track of the current fake time — as the RxJS scheduler implementations depend upon Date.now
. To do this, fake time needs to be advanced by calling the advance
function that’s passed to the test, instead of jest.advanceTimersByTime
.
These test frameworks don’t include built-in support for testing with fake time, but Sinon.JS supports it and it’s easy to use.
For example, this is what testing with fake time using Sinon.JS looks like in Mocha:
import { expect } from "chai";
import { fakeSchedulers } from "rxjs-marbles/mocha";
import { timer } from "rxjs";
import * as sinon from "sinon";
describe("timer", () => {
let clock: sinon.SinonFakeTimers;
beforeEach(() => {
clock = sinon.useFakeTimers();
});
it("should be testable with fake time", fakeSchedulers(() => {
let received: number | undefined;
timer(100).subscribe(value => received = value);
clock.tick(50);
expect(received).to.be.undefined;
clock.tick(50);
expect(received).to.equal(0);
}));
afterEach(() => {
clock.restore();
});
});
fakeschedulers-mocha.ts
After writing this article, a related PR was merged into the RxJS repository. The PR fixes the one problem that prevented the RxJS schedulers from working with Angular’s fakeAsync
. The problem was that RxJS captured Date.now
before it could be patched by fakeAsync
.
So with RxJS versions later than 6.2.1, fakeSchedulers
should not be required for Angular tests — just use fakeAsync
, instead. However, fakeSchedulers
will still be necessary for any non-Angular tests run using Jasmine and for any tests run using other frameworks, when fake time is needed.
☞ Test Driven Development with Angular
☞ JavaScript Programming Tutorial Full Course for Beginners
☞ Learn JavaScript - Become a Zero to Hero
☞ JavaScript Testing - Mocking Async Code