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);
  });
});

You have done it correctly once correction is to perform the mocking either in it block, or group the test cases by category, such as admin describe block, then using beforeEach to call the mocks before each test case.

import { TestBed, ComponentFixture, waitForAsync } from '@angular/core/testing';
import { AppComponent, StorageService } from './app.component';
import { AppModule } from './app.module';
import { FormsModule } from '@angular/forms';

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

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

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

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

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

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

  it('should set isLoggedIn to false on init, when not logged in', () => {
    mockStorageService.isLoggedIn.and.returnValue(false);
    component.ngOnInit();
    expect(component.isLoggedIn).toBe(false);
  });

  it('should set isGuest to true on init, when not logged in', () => {
    mockStorageService.isLoggedIn.and.returnValue(false);
    component.ngOnInit();
    expect(component.isGuest).toBe(true);
  });

  // admin test case
  describe('admin test cases', () => {
    beforeEach(() => {
      mockStorageService.isLoggedIn.and.returnValue(true);
      mockStorageService.getAccountType.and.returnValue(0);
    });

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

  it('should detect normal user', () => {
    mockStorageService.isLoggedIn.and.returnValue(true);
    mockStorageService.getAccountType.and.returnValue(1);
    component.ngOnInit();
    expect(component.isAdmin).toBe(false);
  });
});