Having trouble accessing the undefined property 'ngOnInit' and 'getData' in Angular while conducting unit tests with Jasmine

Question

Having trouble accessing the undefined property 'ngOnInit' and 'getData' in Angular while conducting unit tests with Jasmine

Looking to write a unit test for my component file that subscribes to a method in the service layer

Homecomponent.ts

import { Data } from './../model/data.model';
import { DataService } from './../services/data.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {
  data: Data[];
  constructor(private service: DataService) {}

  ngOnInit() {
    this.getData();
  }
  getData() {
    this.service.getData().subscribe(
      (data) => {
        console.log(data);
        this.data = data;
      },
      (err) => {
        console.log(err);
      },
    );
  }
}

HomeComponent.spec.ts

import { Data } from './../model/data.model';
import { HttpClientModule } from '@angular/common/http';
import { HomeComponent } from './home.component';
import { ComponentFixture, async, TestBed } from '@angular/core/testing';
import { DataService } from '../services/data.service';
import { Observable } from 'rxjs';
import 'rxjs/add/observable/of';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { results } from '../model/home';

class MockMyService {
  public data: Data[];
  public getData(): Observable<Data[]> {
    this.data = results;
    return Observable.of(this.data);
  }
}

describe('HomeComponent', () => {
  let component: HomeComponent;
  let fixture: ComponentFixture<HomeComponent>;
  let mockSomeService: MockMyService;
  describe('Async', () => {
    beforeEach(async(() => {
      TestBed.configureTestingModule({
        declarations: [HomeComponent],
        providers: [
          {
            provide: DataService,
            useValue: mockSomeService,
          },
        ],
        imports: [HttpClientModule],
        schemas: [CUSTOM_ELEMENTS_SCHEMA],
      });
      TestBed.compileComponents();
      fixture = TestBed.createComponent(HomeComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
      mockSomeService = fixture.debugElement.injector.get(DataService);
      spyOn(mockSomeService, 'getData').and.returnValue(Observable.of(results));
      component.ngOnInit();
      fixture.detectChanges();
    }));
  });

  // afterEach(() => {
  //   fixture = undefined;
  // });

  it('method should be called', async () => {
    component.ngOnInit();
    mockSomeService.getData();
    expect(fixture.debugElement.componentInstance.data.length).toEqual(2);
  });
});

When I use component.ngOnInit(); it gives an error as

TypeError: Cannot read property 'ngOnInit' of undefined

When I'm not using component.ngOnInit() it gives me an error as

TypeError: Cannot read property 'getData' of undefined

How can I solve this issue? Appreciate any help in advance.

angular typescript unit-testing jasmine karma-jasmine

Answer 1

Answer №1

Almost there, but not quite!

Make sure your TestBed configuration is not nested in a describe block that other describe blocks cannot access
When using a mock service, use useClass: instead of useValue:
No need to spyOn the service method when mocking out your service
Instead of testing ngOnInit, test the getData method to ensure it sets the data attribute on your component correctly. This is because you can't be sure when ngOnInit completes running your asynchronous code
Since getData is asynchronous, pass the done() callback into your it block to notify the test when asynchronous code should be completed

It looks like you may be using an older version of Angular, as your RXJS version is pre-version 6. Your code uses Observable.of() instead of the updated syntax, which is just of(). Consider upgrading!

Hope this explanation clarified things for you! :)

Here is the corrected test code:

class MockMyService {
  public data: Data[];
  public getData(): Observable<Data[]> {
    this.data = results;
    return Observable.of(this.data);
  }
}

describe('HomeComponent', () => {
  let component: HomeComponent;
  let fixture: ComponentFixture<HomeComponent>;
  let dataService: DataService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [HomeComponent],
      providers: [
        {
          provide: DataService,
          useClass: MockMyService
        }
      ],
      imports: [HttpClientModule],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    }).compileComponents();
    fixture = TestBed.createComponent(HomeComponent);
    component = fixture.componentInstance;
    dataService = TestBed.get(DataService);
    fixture.detectChanges();
  });

  describe('Given the component is loaded', () => {
    describe('When getData returns mock data', () => {
      it('Then the data attribute has a length of 2', (done) => {
        dataService.getData().subscribe(() => {
          expect(component.data.length).toEqual(2);
          done();
        });
      });
    });
  });
});

Answer 2

Almost there, but not quite!

Make sure your TestBed configuration is not nested in a describe block that other describe blocks cannot access
When using a mock service, use useClass: instead of useValue:
No need to spyOn the service method when mocking out your service
Instead of testing ngOnInit, test the getData method to ensure it sets the data attribute on your component correctly. This is because you can't be sure when ngOnInit completes running your asynchronous code
Since getData is asynchronous, pass the done() callback into your it block to notify the test when asynchronous code should be completed

It looks like you may be using an older version of Angular, as your RXJS version is pre-version 6. Your code uses Observable.of() instead of the updated syntax, which is just of(). Consider upgrading!

Hope this explanation clarified things for you! :)

Here is the corrected test code:

class MockMyService {
  public data: Data[];
  public getData(): Observable<Data[]> {
    this.data = results;
    return Observable.of(this.data);
  }
}

describe('HomeComponent', () => {
  let component: HomeComponent;
  let fixture: ComponentFixture<HomeComponent>;
  let dataService: DataService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [HomeComponent],
      providers: [
        {
          provide: DataService,
          useClass: MockMyService
        }
      ],
      imports: [HttpClientModule],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    }).compileComponents();
    fixture = TestBed.createComponent(HomeComponent);
    component = fixture.componentInstance;
    dataService = TestBed.get(DataService);
    fixture.detectChanges();
  });

  describe('Given the component is loaded', () => {
    describe('When getData returns mock data', () => {
      it('Then the data attribute has a length of 2', (done) => {
        dataService.getData().subscribe(() => {
          expect(component.data.length).toEqual(2);
          done();
        });
      });
    });
  });
});

Having trouble accessing the undefined property 'ngOnInit' and 'getData' in Angular while conducting unit tests with Jasmine

Answer №1

Similar questions

Is it possible to deactivate the error message related to "Unable to ascertain the module for component..."?

Issue with uncaught exceptions in promise rejection test

Struggling with getting render props to work in Next.js version 13

Retrieve a multitude of nested Records within the returnType that correlate with the number of arguments provided to the function

CORS policy preventing successful POST request

Implementing child components rendering in a React application using TypeScript

Is there a way to prevent the splash screen from appearing every time I navigate using a navbar link in a single page application (SPA)?

Displaying a specific item with an icon in a list for user interaction in Ionic 3

Guide to limiting interceptor scope to a specific module in Angular

Encountered an issue when attempting to post to an ASP.NET Core Web API utilizing Windows authentication

Using Angular2's *ngIf directive to conditionally display content based on the length of

Enhance your app with the seamless navigation experience using Ionic 2

Why do I keep getting errors in TypeScript when I manipulate DOM elements using getElementsByClassName(), even though my application still functions properly?

Managing the closest element depending on the selected option in Angular 5

Exploring ngTemplateOutlet and ngtemplate in complex nested forms with Angular

Angular encountering a 405 Method not allowed error along with the "Provisional Headers are shown" message

Angular Module without any components

The offsetWidth of the nativeElement in Angular 2's ElementRef is consistently returning a value

``When the checkbox component is clicked in a table, it shifts position

When accessing an Angular 7 page directly through the URL in the browser, it becomes unresponsive. However, the page works perfectly fine when navigating