Angular testing mock subscribed property

Question

I have a service with 2 properties:

Service

...
public usernameAnnounced;
private username: Subject<string> = new Subject<string>();

constructor() {
    super();
    this.usernameAnnounced = this.username.asObservable();
}

On my component I want to subscribe to the property:

Component

    public ngOnInit(): void {
    this.service.usernameAnnounced.subscribe((username: string) => {
        this.username = NavbarComponent.capitalizeFirstLetter(username);
    });
}

I emit to the username on another comp. but its irrelevant for this question. Now I want to mock usernameAnnounced but I have difficulties with it. I tried it with spyOn and it throws me a: 'usernameAnnounced is not a function.' with spyOnProperties it throws me a : 'property is not a getter'.

Tested comp.

so far my approach looks as follows:

    beforeEach(async(() => {
    TestBed.configureTestingModule({
        ...
        declarations: [NavbarComponent],
        providers: [
            ...,
            {provide: service, useValue: authenticationMock}
            ]
        })
        .compileComponents();

    fixture = TestBed.createComponent(NavbarComponent);
}));
...
    it('should render username',() => {
    const underTest = fixture.componentInstance;

    spyOnProperty(authenticationMock, 'usernameAnnounced').and.returnValue({
            subscribe: () => {'boboUser'}}); <== important part here

    underTest.ngOnInit();
    fixture.detectChanges();

    const compiled: HTMLElement = fixture.debugElement.nativeElement.querySelector('#userName');
    const rendered: string = compiled.textContent;

    expect(rendered).toMatch(`Logged in as: ${underTest.username}`);
});

Does someone has any hints?

score 11 · Accepted Answer · answered Jul 05 '18 at 14:02

11

I figured out the solution with: First of all creating a jasmine.spyObj like this:

    const authenticationMock: AuthenticationService = jasmine.createSpyObj('AuthenticationService',
    ['usernameAnnounced']);

Assign it to the mocked service: {provide: AuthenticationService, useValue: authenticationMock}. And it the unit test itself just assign the property with ur expected result:

const spy = TestBed.get(AuthenticationService);
    spy.usernameAnnounced = Observable.of('dummyUser');

answered Jul 05 '18 at 14:02

MarcoLe

2,309
6
36
74

3

Thanks for this, I wish I had found this anser 3 hours ago – RasMason Sep 16 '19 at 14:46
Actually the best approach I found in the last several hours! – bakunet Jan 22 '21 at 16:20

JanRecker · Answer 2 · 2018-07-05T18:51:33.647

3

I always had to build an Subject (or BehaviorSubject) on my mock.

class authenticationMock{ // is the mock of AuthenticationService
    public usernameAnnounced:Subject<string> = new Subject<string>();
}

...

// in Test
let authenticationService = TestBed.get(AuthenticationService)
...
authenticationService.next('myNewUser');

warm regards

edited Jul 05 '18 at 18:51

answered Jul 05 '18 at 12:57

JanRecker

1,787
13
17

Thanks mate, with ur approach I got somehow 'undefined' as the result. But you led me in the right direction. – MarcoLe Jul 05 '18 at 14:03

Angular testing mock subscribed property

Service

Component

Tested comp.

2 Answers2