Angular Testing - TypeError: Cannot read property '7' of undefined

Question

I'm new to the Angular Testing and I'm trying to make this test work, but can't find a way to solve this. If anyone has any thoughts, please.

TypeError: Cannot read property '7' of undefined at at AnaliseContasTitularComponent.ngOnInit (http://localhost:9876/karma_webpack/src/app/extratos-mensais-interno/analise-contas-titular/analise-contas-titular.component.ts:103:2)

Executing this command to execute the test:

ng test --codeCoverage=true --progress=false --watch=false

My test unit file:

import { Overlay } from '@angular/cdk/overlay';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { InjectionToken } from '@angular/core';
import { MAT_DIALOG_SCROLL_STRATEGY, MatDialog } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
import { RouterTestingModule } from '@angular/router/testing';
import { AnaliseContasTitularComponent } from './analise-contas-titular.component';

import { ExtratosMensaisInternoService } from '../extratos-mensais-interno.service';

describe('AnaliseContasTitularComponent', () => {
  let component: AnaliseContasTitularComponent;
  let fixture: ComponentFixture<AnaliseContasTitularComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ RouterTestingModule, HttpClientTestingModule ],
      declarations: [ AnaliseContasTitularComponent ],
      providers: [ MatDialog, Overlay, MatSnackBar,
        { provide: InjectionToken, useValue: {} },
        { provide: MAT_DIALOG_SCROLL_STRATEGY, useValue: {} },
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AnaliseContasTitularComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
  

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

the ngOnInit methor on the .ts file:

ngOnInit(): void {
    const competencia: CompetenciaInterno = this.serv.getCompetenciaSelecionada();

    this.serv.getExtratoMensal(competencia[7]).subscribe((res: ExtratoMensalData) => {
      this.extratoMensal = res.data;
    }, (error: HttpErrorResponse) => {
      this.utils.showDialogError(error);
    });

  }

And the service file, with the method that is called by the ngOnInit:

getCompetenciaSelecionada(): CompetenciaInterno {
    return JSON.parse(sessionStorage.getItem('competenciaInterno'));
  }

I can't find an example on the internet dealing with the mocking data in a way that works.

I just need to stop this error, because I have multiple files ocurring that same error. For me to proceed with other tests.

Thank you

Answer 1

I assume getCompetenciaSelecionada lives in ExtratosMensaisInternoService, if so you have to have mock this service.

You could attach the items in sessionStorage and maybe that would work but I like mocking external dependencies.

Try this:

// import of to be able to mock respond with an observable for getExtratoMensal
import { of } from 'rxjs';
import { Overlay } from '@angular/cdk/overlay';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { InjectionToken } from '@angular/core';
import { MAT_DIALOG_SCROLL_STRATEGY, MatDialog } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
import { RouterTestingModule } from '@angular/router/testing';
import { AnaliseContasTitularComponent } from './analise-contas-titular.component';

import { ExtratosMensaisInternoService } from '../extratos-mensais-interno.service';

describe('AnaliseContasTitularComponent', () => {
  let component: AnaliseContasTitularComponent;
  let fixture: ComponentFixture<AnaliseContasTitularComponent>;
  // create a mock, where the first string 'serv' is what you want the mock to be named.
  // and the array of strings are the public methods you would like to mock
  let mockExtratosMensaisInternoService = jasmine.createSpyObj('serv', ['getCompetenciaSelecionada', 'getExtratoMensal']);

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ RouterTestingModule, HttpClientTestingModule ],
      declarations: [ AnaliseContasTitularComponent ],
      providers: [ MatDialog, Overlay, MatSnackBar,
        { provide: InjectionToken, useValue: {} },
        { provide: MAT_DIALOG_SCROLL_STRATEGY, useValue: {} },
      // now that we are providing a mock for ExtratosMensaisInternoService, I think you can get rid of HTTPClientTestingModule import.
       { provide: ExtratosMensaisInternoService, useValue: mockExtratosMensaisInternoService },
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AnaliseContasTitularComponent);
    component = fixture.componentInstance;
    mockExtratosMensaisInternoService.getCompetenciaSelecionada.and.returnValue([0, 1, 2, 3, 4, 5, 6, 7]); // you can mock the array to what you need, I assume you need at least 8 elements because of the 7.
    mockExtratosMensaisInternoService.getExtratoMensal.and.returnValue(of({ data: 'hello world' }));
    // mock the data to be whatever you would like.
    fixture.detectChanges();
  });
  

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