CODEWITHSUNDEEP
unit-testingangulartypescriptjasmine
donggaolao
donggaolao

Reputation: 43

How to write unit test for a subscribe function with filter in Angular 2?

Right now I am writing an unit test for this kind of situation like below: 

public div: HTMLDivElement;
public currentEvent: EventType;

public listenToRender() {
    this.adsService.render.filter((event: EventType) => {
            return this.div.id === event.slot.getSlotElementId();
        }).subscribe((event: EventType) => {
            let custom_event = new CustomEvent('render', {
                detail: event
            });
            this.currentEvent= event;
        });
}

During the unit test, I mock the render with subject, but I don't know how I can make it pass the filter

return this.div.id === event.slot.getSlotElementId();

and go to the subscribe function.

class MockAdsService {
   render = new Subject();
}

class MockEventType {
   name: 'test_event';
   slot: {
      getSlotElementId = function() {return 'test_id'}
   };
}

describe('test', () => {
    let mockAdsService: MockAdsService,
        mockEventType: MockEventType;

    beforeEach(() => {
        mockAdsService = new MockAdsService();
        mockEventType = new MockEventType();
    });

    it('listenToRender fired correctly', () => {
        mockAdsService.render.next(mockEventType);
        component.listenToRender();
        expect(component.currentEvent).toEqual(mockEventType);
    });
});

Do I need to set up something in subject.next for passing the filter?

Upvotes: 0

Views: 2329

Answers (1)

Alexander Leonov
Alexander Leonov

Reputation: 4794

It's very simple. You're subscribing your component after your event has already happened. It's too late for cold observable. Just switch render.next() and component.listenToRender() calls and everything should work just fine:

it('listenToRender fired correctly', () => {
    component.listenToRender();
    mockAdsService.render.next(mockEventType);
    expect(component.currentEvent).toEqual(mockEventType);
});

Upvotes: 1

Related Questions