I am trying to test below code.

sample.component.ts :

import { CsSidenavService } from '@cs/ngui';

@Component({
  selector: 'sample-navbar',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.scss'],
})
export class NavbarComponent {
 toggleSideNav() {
    this.sideNavService.toggleState();
  }

In .spec file I am trying to do something like below-

sample.component.spec.ts :

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        CsNavigationModule,
        AppRoutingModule,
        BrowserAnimationsModule,
      ],
      declarations: [
        NavbarComponent,
      ],
      providers: [CsSidenavService],
    }).compileComponents();
  });
beforeEach(() => {
    fixture = TestBed.createComponent(NavbarComponent);
    component = fixture.componentInstance;
    compiled = fixture.nativeElement as HTMLElement;
    sideNavService= new CsSidenavService();
    fixture.detectChanges();
  });

 it('should check working of toggleSideNav function', () => {
    const spy = jest.spyOn(sideNavService,'toggleState')
    sideNavService.toggleState();
    fixture.detectChanges();

    expect(spy).toHaveBeenCalled();
    expect(spy).toBeCalledTimes(1);
  });

Below is the service file which I am importing to toggle the state of side navbar-

sidenav.service.ts :

import { Observable } from 'rxjs';
import { CsSidenavItemComponent } from './cs-sidenav-item.component';
import * as ɵngcc0 from '@angular/core';
export declare enum CsSidenavState {
    HIDDEN = 0,
    EXPANDED = 1
}
export declare enum ScreenSize {
    SMALL = 0,
    LARGE = 1
}
export declare class CsSidenavService {
    private selectedItem$;
    private sidenavState$;
    private screenSize$;
    private items;
    registerItem(item: CsSidenavItemComponent): void;
    unregisterItem(item: CsSidenavItemComponent): void;
    selectItem(item: CsSidenavItemComponent): void;
    selectItemByName(name: string): void;
    getSelectedItem(): Observable<CsSidenavItemComponent>;
    getSidenavState(): Observable<CsSidenavState>;
    getScreenSize(): Observable<ScreenSize>;
    setScreenSize(size: ScreenSize): void;
    toggleState(): void;
    getItems(): CsSidenavItemComponent[];
    setSidenavState(state: CsSidenavState): void;
    static ɵfac: ɵngcc0.ɵɵFactoryDeclaration<CsSidenavService, never>;
    static ɵprov: ɵngcc0.ɵɵInjectableDeclaration<CsSidenavService>;
}

Issue which I am facing - Test case is getting passed successfully. But test coverage is showing the below line not covered.

this.sideNavService.toggleState();

Can someone suggest what can be done?

CodePudding user response：

After testing few things out. I am now able to get the test coverage to 100%. Below is the code I have now in place.

describe('NavbarComponent', () => {
  let component: NavbarComponent;
  let fixture: ComponentFixture<NavbarComponent>;
  let compiled: HTMLElement;
  **const mockSideNavService:Partial<CsSidenavService> = {
    toggleState: jest.fn(()=>true)
  }**

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        CsNavigationModule,
        AppRoutingModule,
        BrowserAnimationsModule,
      ],
      declarations: [
        NavbarComponent
      ],
      **providers: [{provide:CsSidenavService, useValue:mockSideNavService }],**
    }).compileComponents();
  });
  it('should check working of toggleSideNav function', () => {
    const spy = jest.spyOn(mockSideNavService,'toggleState')
    component.toggleSideNav()
    fixture.detectChanges();

    expect(spy).toHaveBeenCalled();
  });

CodePudding user response：

I would call component.toggleSideNav() in the test, instead of sideNavService.toggleState();