Unit testing my login component : "TypeError: Cannot read properties of undefined (reading 'subscribe')"

hello guys i am new to the angular. Please notify where i have missed or committed mistake. As I am unit testing the Login component.

Here is the "loginservice.ts"

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class LoginService {
 public loginStatusSubject = new Subject<boolean>();
  static generateToken: any;
  static getCurrentUser: any;
  constructor(private http:HttpClient) { }

  public getCurrentUser(){
    return this.http.get("http://localhost:8010/current-user");
  }

  public generateToken(loginData:any){
   return this.http.post("http://localhost:8010/generate-token",loginData);
  }
   //login user: to set up token in local storage
   public loginUser(token){
       localStorage.setItem('token', token);
       return true;
   }
  //isLogin: user is logged in or not
  public isLoggedIn(){
    let tokenStr = localStorage.getItem('token');
    if(tokenStr == undefined || tokenStr == '' || tokenStr==null)
    {
      return false;
    } else {

      return true;
    }
  }

  //logout: remove toke from local storage
  public logout()
  {
    localStorage.removeItem('token');
    localStorage.removeItem('user');
    return true;
  }

  //get token
  public getToken(): string{
    return localStorage.getItem('token');
  }

  //set user in local storage
  public setUser(user): void
  {
    localStorage.setItem('user',JSON.stringify(user));
  }

  //get user
  public getUser()
  {
    let userStr = localStorage.getItem('user');
    if(userStr!=null)
    {
      return JSON.parse(userStr);
    }
    else {
      this.logout();
      return null;
    }
  }
  
  //get user role
  public getUserRole()
  {
    let user = this.getUser();
    return user.authorities[0].authority;
  }
}

Here is "my login.component.ts"

import { Component, OnInit } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Router } from '@angular/router';
import { LoginService } from 'services/login.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
 
loginData={
  username:'',
  password:'',
 };

 constructor(private snack:MatSnackBar,private loginService:LoginService,private router:Router){}
  ngOnInit(): void {}
  

  login(){
    console.log("User btn clicked");

    if( this.loginData.password.trim()==''||this.loginData.password==null)
    {
      this.snack.open('password is required','',{
        duration:3000,
      });
      return;
    }
    // request to generate token from which we can access another apis using this token.
    this.loginService.generateToken(this.loginData).subscribe(
      (data:any)=>{ 
       console.log('success');
       console.log(data);
        //login ...

       this.loginService.loginUser(data.token);
       this.loginService.getCurrentUser().subscribe(
       (user)=>{
        this.loginService.setUser(user);
        console.log(user);
      //redirect:ADMIN dashboard
      //redirect : USER dashboard
      if(this.loginService.getUserRole()=="ADMIN")
      {//admin dashboard
        //window.location.href="/admin";
        this.router.navigate(['admin']);
        this.loginService.loginStatusSubject.next(true);

      }else if(this.loginService.getUserRole()=="USER")
      {//user dashboard
        //window.location.href="/user";
        this.router.navigate(['user']);
        //user subscribes it and sends notification after giving data
        this.loginService.loginStatusSubject.next(true);
      }else
      {
        this.loginService.logout();
      }
     }
    );

      },
      (error)=>{
        console.log('error!!');
       console.log(error);
       this.snack.open("Invalid Details!! Try again",'',{
        duration:3000,
       });
      }
    );
  }

}

Here is my testing component code :login.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Router } from '@angular/router';
import { of } from 'rxjs';
import { LoginComponent } from './login.component';
import { LoginService } from 'services/login.service';
import { MatFormFieldModule } from '@angular/material/form-field';
import { FormsModule } from '@angular/forms';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { MatInputModule } from '@angular/material/input';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

describe('LoginComponent', () => {
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;
  let loginService: LoginService;
  let router: Router;
  let snackBar: MatSnackBar;

  beforeEach(async () => {
    loginService= jasmine.createSpyObj('LoginService', ['generateToken', 'loginUser', 'getCurrentUser', 'setUser', 'getUserRole', 'logout']) ;
    await TestBed.configureTestingModule({
      declarations: [ LoginComponent ],
      imports:[MatFormFieldModule,FormsModule,HttpClientTestingModule,MatInputModule,BrowserAnimationsModule],
      providers: [
        { provide: LoginService, useValue: loginService },
        { provide: Router, useValue: jasmine.createSpyObj('Router', ['navigate']) },
        { provide: MatSnackBar, useValue: jasmine.createSpyObj('MatSnackBar', ['open']) }
      ]
    })
    .compileComponents().then(()=>{
      fixture = TestBed.createComponent(LoginComponent);
      component = fixture.componentInstance;
      loginService = TestBed.inject(LoginService);
      router = TestBed.inject(Router);
      snackBar = TestBed.inject(MatSnackBar);
      fixture.detectChanges();
    });
  });


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

  describe('#login', () => {
    it('should show an error message if the password is empty or null', () => {
      component.loginData.password = '';
      component.login();
      expect(snackBar.open).toHaveBeenCalledWith('password is required', '', { duration: 3000 });
    });

    it('should generate a token and log in the user if the password is not empty or null', () => {
      component.loginData.password = 'password';
      component.loginData.username='myadmin';
      component.login();
     loginService.generateToken(component.loginData);
      expect(loginService.getToken).toEqual('token');
      expect(loginService.generateToken).toHaveBeenCalledWith(component.loginData);
      expect(loginService.loginUser).toHaveBeenCalledWith('token');
      expect(loginService.getCurrentUser).toHaveBeenCalled();
      expect(loginService.setUser).toHaveBeenCalled();
      expect(router.navigate).toHaveBeenCalledWith(['admin']);
   });
  });

});

Here is my "login.component.html"

<div class="bootstrap-wrapper">
<div class="container">
    <div class="row" style="margin-top:50px">
        <div class="col-md-6 offset-md-3">
            <div class="box">
                <div class="container text-center">
                    <img src="../../../assets/CTSH-82a8444b.png" width="100" height="100"  style="vertical-align:middle">
                </div>
            
                <h3 class="text-center"> Login Here!!</h3>
                <form (ngSubmit)="login()">
                    <mat-form-field class ="full-width" appearance="outline">
                        <mat-label>Username</mat-label>
                        <input matInput type="text" 
                        [(ngModel)]= "loginData.username"
                        name="username" 
                         placeholder="Enter username" required>
                        <span style="color:red" ng-show="register.user.$dirty && register.user.$invalid">
                            <span ng-show="register.user.$error.required"></span>
                            <mat-hint>Valid username please</mat-hint>
                            </span>
                      </mat-form-field>

                      <mat-form-field class ="full-width" appearance="outline">
                        <mat-label>Password</mat-label>
                        <input  matInput
                        [(ngModel)]= "loginData.password"
                        type="password" 
                        name="password" 
                        placeholder="Enter password" required>
                        <span style="color:red" ng-show="register.user.$dirty && register.user.$invalid">
                            <span ng-show="register.user.$error.required"></span>
                           
                            </span>
                      </mat-form-field>  
                      <div class="container">
                        <button type="submit" mat-raised-button color="primary">Login</button>
                        <button mat-raised-button style="margin-left:10px">Reset</button>
                      </div>
                </form>
            </div>
        </div>
    </div>
</div>
</div>

My code is running normally, able to login . As i am unit testing it in Karma, is showing the error which is mentioned in title.
Please let me know guys. as i m stuck for couple days. It would be great help

Without knowing what exactly is causing the error, reading the headline and looking at your LoginService, I assume that in your test file (login.component.spec.ts), you need to return an actual Observable for getCurrentUser() and generateToken().

You could try using jest's mock functions and make sure that the mocked function returns a stream. For more, take a look here: https://webtips.dev/webtips/jest/mock-function-return-values

Example:
jest.spyOn(TestBed.inject(LoginService), 'getCurrentUser').mockReturnValue(of( // your observable here ))