Unable to Cover Test Case with both debounce and takeUntil,filter Angular

Question

Here is the code from component that i have written it has simple code to fetch the api data and console here.

sample project

realtime project

Here is the test case i have tried using tick and fakeasync as well still no use.but when i remove filter from the component code,code coverage is happening.

sample project test case

import { fakeAsync, TestBed, tick } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { of } from 'rxjs';
import { ApiService, API_DATA } from './api.service';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  let apiService: jasmine.SpyObj<ApiService>;
  beforeEach(async () => {
    apiService = jasmine.createSpyObj('ApiService', ['getData','filter']);
    apiService.getData.and.returnValue(of());
    await TestBed.configureTestingModule({
      imports: [
        RouterTestingModule, HttpClientTestingModule

      ],
      declarations: [
        AppComponent
      ],
      providers: [{ provide: ApiService, useValue: apiService }]
    }).compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'free-case'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.title).toEqual('free-case');
  });
  it('should render title', fakeAsync(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const response: API_DATA[] = [{
      login: '',
      id: 1,
      node_id: '',
      url: '',
      repos_url: '',
      events_url: '',
      hooks_url: '',
      issues_url: '',
      members_url: '',
      public_members_url: '',
      avatar_url: '',
      description: '',
    }];
    apiService.getData.and.returnValue(of(response));
    fixture.detectChanges();
    expect(apiService.getData).toHaveBeenCalled()
  }));
});

Realtime poject test case :

  it('should call the getDealState  THRU_DATES', fakeAsync(() => { 
    dealService = jasmine.createSpyObj('DealService', ['getGridTogglesState', 'getDealRequest', 'getDealState', 'setDealRequest','filter']);
    const data:ThruDates ={
      digital: {
        firstParty: '',
        thirdParty: '',
      },
      linearRatings: {
        commercial: '',
        program: ''
      }
    }
    const fixture = TestBed.createComponent(GridViewComponent);
    dealService.getDealState.withArgs(STATE.THRU_DATES).and.returnValue(of(data));  
    dealService.getDealState(STATE.THRU_DATES).pipe(filter(item => Boolean(item))).subscribe((item:ThruDates) => {
      expect(item).toEqual(data);
    })    
    tick(2000)
    fixture.detectChanges();
    expect(dealService.getDealState).toHaveBeenCalledTimes(1)
  })) ```

That last assertion does not make any sense since you are calling it in the test anyway. If everything will go as expected, it will fail as you will get 2 calls. — Antoniossss, Jan 22 '22 at 09:39
Yes, I know it doesn't make sense calling twice same subscription but was trying the different approaches. — Krishna Kanth, Jan 22 '22 at 09:42

Antoniossss · Answer 1 · 2022-01-22T09:41:29.573

1

filter(item=>!item) means that it will only passtrought FALSY values (null,undefined,false,""). What you want is the other way around - pass only truthy values

filter(item=>item) or filter(item=>!!item)

After OP editing question:

Swap detectChanges and tick

it should be

fixture.detectChanges();  //kicks in ngOnInit
tick(2000); // simulates passage of time

edited Jan 22 '22 at 09:41

answered Jan 22 '22 at 09:13

Antoniossss

31,590
6
57
99

#Antoniosss i really appriciate your time i have realised that i missed it while replication but still it was not getting covered in the realtime project i have update the question.please have a look if you have time. – Krishna Kanth Jan 22 '22 at 09:30
Is it in ngOnInit? You need to stop pasting what is in your opinion relevant parts of the code, and share complete example. – Antoniossss Jan 22 '22 at 09:36
Yes inside ngOnInit,will try to do that. – Krishna Kanth Jan 22 '22 at 09:36
@Krishna YOu need to swap detectChanges and tick – Antoniossss Jan 22 '22 at 09:41
i have tried the method in ealier and now as well the result is same but i found something that might help you to suggest the answer.when i change the order of the debouceTime and filter in pipe it was now covering the filter but still unable to cover subscribe. – Krishna Kanth Jan 22 '22 at 09:49

Unable to Cover Test Case with both debounce and takeUntil,filter Angular

1 Answers1