Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

222
Views
Unit test Observable with delay operator

I have a hard time getting my unit test to work together with an Observable with delay operator. The application is built on Angular 2 and the tests are running in karma/jasmine. I've tried the async and fakeAsync helper methods but none of them are working.

Here's a simplified code block (without Angular 2) explaining my issue.

let mouseDownStream = Rx.Observable.fromEvent(document.body, 'mousedown');
let haveBeenCalled = false;
mouseDownStream.delay(200).subscribe(() => haveBeenCalled = true);

describe('mouse down event', () => {
  it('it should emit an event stream after 200ms', (done) => {
    document.body.dispatchEvent(new MouseEvent('mousedown'))
    expect(haveBeenCalled).toBeFalsy();

    // Don't want this setTimeout should use Angular's tick(200) method instead but it's not working.
    setTimeout(() => {
      expect(haveBeenCalled).toBeTruthy();
      done();
    }, 200)
  });
});

JSBin

about 4 years ago · Santiago Trujillo
2 answers
Answer question

0

Here is an example on how to unit test an Observable with a delay operator in Angular 2+, should anyone still be looking for the answer:

import { fakeAsync, tick } from "@angular/core/testing";

import { fromEvent } from "rxjs";
import { delay } from "rxjs/operators";

describe("mouse down event", () => {
  it("should emit an event stream after 200ms", fakeAsync(() => {
    let mouseDownStream = fromEvent(document.body, "mousedown");
    let haveBeenCalled = false;

    const subscription = mouseDownStream.pipe(delay(200)).subscribe(() => (haveBeenCalled = true));
    document.body.dispatchEvent(new MouseEvent("mousedown"));

    expect(haveBeenCalled).toBeFalsy();

    tick(200);

    expect(haveBeenCalled).toBeTruthy();

    subscription.unsubscribe();
  }));
});

about 4 years ago · Santiago Trujillo Report

0

Using rxjs 6 with angular 12, fakeAsync doesn't work for me. Only using the TestScheduler did. Modifying Ritchie's sample:

describe("mouse down event", () => {
    let testScheduler: TestScheduler;
    beforeEach(() => {
      testScheduler = new TestScheduler((act, exp) => expect(exp).toEqual(act) as any);      
    });

    fit("should emit an event stream after 200ms", () => {
      let mouseDownStream = fromEvent(document.body, "mousedown");
      let haveBeenCalled = false;
  
      testScheduler.run(() => {
        const subscription = mouseDownStream.pipe(delay(200)).subscribe(() => (haveBeenCalled = true));
        document.body.dispatchEvent(new MouseEvent("mousedown"));
        expect(haveBeenCalled).toBeFalsy();
        testScheduler.createTime('200|');
        testScheduler.flush();
        expect(haveBeenCalled).toBeTruthy();
        subscription.unsubscribe();
      });
    });
});
about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!