Unit test Angular 2 service subject

Question

I'm trying to write a test for an angular service which has a Subject property and a method to call .next() on that subject.

The service is the following:

@Injectable()
export class SubjectService {
  serviceSubjectProperty$: Subject<any> = new Subject();

  callNextOnSubject(data: any) {
    this.serviceSubjectProperty$.next(data);
  }
}

And the test file for that service:

import { TestBed, inject } from '@angular/core/testing';

import { SubjectService } from './subject.service';

describe('SubjectService', () => {

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        SubjectService
      ]
    });
  });

  it('callNextOnSubject() should emit data to serviceSubjectProperty$ Subject',
    inject([SubjectService], (subjectService) => {
      subjectService.callNextOnSubject('test');

      subjectServiceProperty$.subscribe((message) => {
        expect(message).toBe('test');
      })
  }));
});

The test always passes event if I change the argument of subjectService.callNextOnSubject from 'test' to anything else.

I have also tried wrapping everything with async and fakeAsync, but the result is the same.

What would be the correct way to test if callNextOnSubject is emitting data to the serviceSubjectProperty$ Subject?

You should subscribe *before* calling the method, that subject doesn't have any replay/buffer behaviour. — jonrsharpe, Jul 14 '17 at 20:58
When you are unit testing a _service_ you should not be using the angular test infrastructure. All it does is make your test code longer and more error-prone. — Aluan Haddad, Jul 15 '17 at 01:51

score 20 · Accepted Answer · answered Mar 02 '18 at 10:09

I found this article while searching for the solution:

http://www.syntaxsuccess.com/viewarticle/unit-testing-eventemitter-in-angular-2.0

and it worked well for me (it's very short, don't be afraid to open it).

I'm pasting it here so maybe it will help those which came to this site looking for answer.

Regarding the question asked - I think that you need to change:

  subjectService.callNextOnSubject('test');

  subjectServiceProperty$.subscribe((message) => {
    expect(message).toBe('test');
  })

to

  subjectServiceProperty$.subscribe((message) => {
    expect(message).toBe('test');
  })

  subjectService.callNextOnSubject('test');

, so subscribe at first, then emit an event.

If you emit 'test' before subscription, then nothing will "catch" that event.

score 2 · Answer 2 · answered Jan 18 '18 at 11:15

You should test the data which changed in component after your subject is called. Should testing only public variables, not private or protected; For example:

service:

@Injectable()
export class SomeService {
    onSomeSubject: Subject<any> = new Subject();

    someSubject(string: string) {
        this.onSomeSubject.next(string);
    }
}

component:

export class SomeComponent {
    @Input() string: string;

    constructor(private service: SomeService) {
        service.onSomeSubject.subscribe((string: string) => {
            this.string = string;
        }); //don't forget to add unsubscribe.
    }
}

test:

...
describe('SomeService', () => {
    let someService: SomeService; // import SomeService on top
    let someComponent: SomeComponent; // import SomeService on top

    beforeEach(() => {
        TestBed.configureTestingModule({
            providers: [SomeService, SomeComponent]
        });
        injector = getTestBed();
        someService = injector.get(SomeService);
        someComponent = injector.get(SomeComponent);
    });

    describe('someSubject', () => {
        const string = 'someString';

        it('should change string in component', () => {
            someService.someSubject(string);
            expect(someComponent.string).tobe(string);
        });
    });
});

score 2 · Answer 3 · answered Apr 17 '18 at 22:16

2

Using jasmine 'done' callback will do the trick so far, check the documentation below: https://jasmine.github.io/api/edge/global (see implementationCallback(doneopt))

Below an example using your test case:

it('callNextOnSubject() should emit data to serviceSubjectProperty$ Subject', (done) => {
    inject([SubjectService], (subjectService) => {
      subjectService.callNextOnSubject('test');

      subjectServiceProperty$.subscribe((message) => {
        expect(message).toBe('test');
        done();
      })
  }) // function returned by 'inject' has to be invoked
});

answered Apr 17 '18 at 22:16

mth khaled

337
4
13

Hey @mth khaled, great explanation, however, I get a TypeError: Cannot read property 'subscribe' of undefined `fit('callNextOn_page() should emit page data', (done) => { inject([searchOrderSpy], (_page) => { searchOrderSpy._page(5) }) searchOrderSpy._page.subscribe((page) => { expect(page).toBe(5); done(); }) })`and the one below is the implementation in the service `changePage(newPage: number) { this._page.next(newPage); }` – Girum Jan 15 '20 at 22:53

score 0 · Answer 4 · answered Jan 06 '22 at 14:13

subscribe must come before, and then call method

it(`#${YourCompoent.prototype.yourMethod.name} subscribe must come before, and then call method`, fakeAsync( () => {
    yourServiceSubject.filter$.subscribe(ev => {
      expect(ev).toEqual(mock.mockFilterDefault())
    });
    component.sendFilterForm();
  }));

Unit test Angular 2 service subject

4 Answers4

Linked