How to mock service responses in Angular unit test

I have an ngOnInit() function in a component that checks session storage via a StorageService to see if a user is logged in, and what their account type is. It will then assign an isAdmin bool to true if account type is 0, or isGuest true if isLoggedIn() returns false.

Here is the relevant code:

Component

import { Component, OnInit } from '@angular/core';
import { StorageService } from '../_services/storage.service';
import { AuthService } from '../_services/auth.service';
import { Router } from '@angular/router';

@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrl: './navbar.component.css'
})
export class NavbarComponent implements OnInit {
isLoggedIn = false;
isAdmin = false;
isGuest = true;

constructor(private authService: AuthService, private storageService: StorageService, private router: Router) { }

ngOnInit(): void {
if (this.storageService.isLoggedIn()) {
this.isLoggedIn = true;
this.isGuest = false;
if (this.storageService.getAccountType() == 0) {
this.isAdmin = true;
}
}
}

logout(): void {
sessionStorage.clear();
this.reloadPage();
}

search(text: string): void {
this.router.navigate(['/library', {search: text}])
}

reloadPage(): void {
window.location.reload();
}
}


StorageService

import { Injectable } from '@angular/core';

const USER_KEY = 'auth-user';

@Injectable({
providedIn: 'root'
})
export class StorageService {
constructor() { }

clean(): void {
window.sessionStorage.clear();
}

public saveUser(user: any): void {
window.sessionStorage.removeItem(USER_KEY);
window.sessionStorage.setItem(USER_KEY, JSON.stringify(user));
}

public getUser(): any {
const user = window.sessionStorage.getItem(USER_KEY);
if (user) {
return JSON.parse(user);
}

return {};
}

public isLoggedIn(): boolean {
const user = window.sessionStorage.getItem(USER_KEY);
if (user) {
return true;
}

return false;
}

public getAccountType() {
const user = window.sessionStorage.getItem(USER_KEY);
if (user) {
var parsedUser = JSON.parse(user);
return parsedUser.accountType;
}
}
}


I'm having trouble mocking this service. I want to mock the return values from isLoggedIn() and getAccountType() methods called in the component ngOnInit() to simulate an admin account type. How would I do this? First time trying unit tests with Jasmine.

My current attempt:

Unit Test File

import { FormsModule } from "@angular/forms";
import { NavbarComponent } from "./navbar.component";
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { provideHttpClient } from "@angular/common/http";
import { StorageService } from "../_services/storage.service";

describe('NavbarComponent', () => {
let component: NavbarComponent;
let fixture: ComponentFixture<NavbarComponent>;
let mockStorageService: jasmine.SpyObj<StorageService>;

beforeEach(async () => {
mockStorageService = jasmine.createSpyObj('StorageService', ['isLoggedIn', 'getAccountType']);
mockStorageService.isLoggedIn.and.returnValue(true);
mockStorageService.getAccountType.and.returnValue(0);

await TestBed.configureTestingModule({
declarations: [NavbarComponent],
imports: [FormsModule],
providers: [{ provide: StorageService, useValue: mockStorageService }]
})
.compileComponents();

fixture = TestBed.createComponent(NavbarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});

it('should set isLoggedIn to true on init', () => {
component.ngOnInit();
expect(component.isLoggedIn).toBe(true);
});

it('should detect admin', () => {
component.ngOnInit();
expect(component.isAdmin).toBe(true);
});
});

Continue reading...