angular unit test:Cannot read property 'subscribe' of undefined issue

Question

I am trying to write unit test for my code. component

import {Component, Input, OnInit} from '@angular/core';
import {MainStorageService} from '@globals/storage/services/main-storage.service';
import {getSystemState, getWebcastState} from '@globals/store/main-reducer';
import {WebcastHelper} from '@webcast/webcast.helper';
import {DeviceInfoService} from '@core/services/device-info.service';


@Component({
    selector: 'app-presentation',
    templateUrl: 'presentation.component.html',
    styleUrls: ['presentation.component.scss']
})
export class PresentationComponent implements OnInit {

    assetPath: string;
    fileName: string;
    @Input() footerIsHigh: boolean;

    constructor(private store: MainStorageService,
                private device: DeviceInfoService) {
    }

    ngOnInit() {
        this.device.initInstance();
        this.device.destroyInstance();
        this.store.get(getSystemState).subscribe(appState => {
            this.fileName = appState.activeSlide.filename;
        });
        this.store.get(getWebcastState).subscribe(webcastData => {
            this.assetPath = WebcastHelper.generateAssetPathForSlides(webcastData);
        });
    }
}

spec

import { async, ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
import { PresentationComponent } from './presentation.component';
import { MainStorageService } from '@globals/storage/services/main-storage.service';
import { DeviceInfoService } from '@core/services/device-info.service';
import { of } from 'rxjs';

const mockStore = {
  get() {
    return of({})
  }
}
const mockdevice = {
  initInstance() {},
  destroyInstance() {}
}
describe('PresentationComponent', () => {
  let component: PresentationComponent;
  let fixture: ComponentFixture<PresentationComponent>;
  let store: MainStorageService;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ PresentationComponent ],
      providers: [ { provide: MainStorageService, useValue: mockStore}, {provide: DeviceInfoService, useValue: mockdevice}]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(PresentationComponent);
    component = fixture.componentInstance;
     store = TestBed.get(MainStorageService);
    // fixture.detectChanges();
  });


  it('should get file name and asset path', fakeAsync(() => {
    const mockWebcastData: any = {webcast: {company_id: 900, id: 300}, language: 'en', assetsDomain: 'https://testDomain.com'};
    const mockSystemData: any = {activeSlide: {fileName: 'logo.png'}};
    spyOn(store, 'get').and.returnValues(of(mockSystemData),of(mockWebcastData));
    component.ngOnInit();
    fixture.detectChanges();
    expect(component.fileName).toEqual('logo.png');
  }));
});

In the above code I need to write unit test for checking the fileName variable in the component should be equal to my dummy data. But it's not working. But when I run the test it shows following error. I can't figure out the issue.

   TypeError: Cannot read property 'subscribe' of undefined
            at PresentationComponent../src/app/shared/desktop-presentation-area/components/presentation/presentation.component.ts.PresentationComponent.ngOnInit (src/app/shared/desktop-presentation-area/components/presentation/presentation.component.ts:26:39)

angular unit test:Cannot read property 'subscribe' of undefined issue

0 Answers0