e2e testing angular 7: Failed: Cannot read property 'fetchData' of undefined

Question

I'm trying to do some e2e testing for my service in angular 7, the method return Observable, this is my methode:

import { Injectable } from '@angular/core';
import { UrlDecoratorService } from "../../common/url-decorator.service";
import { APIFetcherService } from "../common/api-fetcher.service";
import { Observable } from 'rxjs';
import { IALChrono, ALChrono } from '../../common/IALChrono.interface';

@Injectable()
export class AnnonceChronoDetailService {
    private months: string[];
    constructor(private urlDecoratorService: UrlDecoratorService, private apiFetcher: APIFetcherService) {
    }

    fetchData(chronoInfo: ALChrono): Observable<any> {
        // construct API parameters and URL
        var URL: string = this.urlDecoratorService.urlAPIDecorate("AL", "GetAccessChrono");

        var params = this.urlDecoratorService.generateParameters({
            year: chronoInfo.year,
            month: chronoInfo.month,
            sortBy: chronoInfo.sortBy,
            sortDirection: chronoInfo.sortDirection,
            pageNumber: chronoInfo.currentPage,
            pageSize: chronoInfo.pageSize
        });

        return this.apiFetcher.fetchJson(URL, params);
    }
}

and this is my test :

import { AppPage } from './app.po';
import { AnnonceChronoDetailService } from '../../src/app/services/annonce-legale/annonce-chrono-detail.service';
import { ALChrono } from '../../src/app/common/IALChrono.interface';
import { APIResponse } from '../../src/app/common/api-response.interface';
import { Observable } from 'rxjs';

describe('workspace-project App', () => {
  let page: AppPage;
  let service: AnnonceChronoDetailService;
  this.chronoInfo = new ALChrono(); //it's a class

  beforeEach(() => {
    page = new AppPage();
  });

  it('should display welcome message', () => {
    page.navigateTo();
    expect(page.getParagraphText()).toEqual('Welcome to MyProject!');
  });


  it('#getObservableValue should return value from observable', (done: DoneFn) => {
    service.fetchData(this.chronoInfo).subscribe((resp: APIResponse) => {
      expect(resp.dataCount).toBe(5);
      done();
    });
  });
});

and this is my terminal error :

DevTools listening on ws://127.0.0.1:53112/devtools/browser/2a1d94b2-ef47-4910-9ee2-e875b615ed45
Jasmine started

  workspace-project App
    √ should display welcome message
    × #getObservableValue should return value from observable
      - Failed: Cannot read property 'fetchData' of undefined
          at UserContext.<anonymous> (D:\Front\e2e\src\app.e2e-spec.ts:34:13)
          at new ManagedPromise (D:\Front\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:1077:7)
          at ControlFlow.promise (D:\Front\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:2505:12)
          at TaskQueue.execute_ (D:\Front\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:3084:14)
          at TaskQueue.executeNext_ (D:\Front\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:3067:27)
          at asyncRun (D:\Front\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:2974:25)
          at D:\Front\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:668:7
          at <anonymous>
      From: Task: Run it("#getObservableValue should return value from observable") in control flow
          at ControlFlow.emit (D:\Front\node_modules\protractor\node_modules\selenium-webdriver\lib\events.js:62:21)
          at ControlFlow.shutdown_ (D:\Front\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:2674:10)
          at shutdownTask_.MicroTask (D:\Front\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:2599:53)
      From asynchronous test:
      Error
          at Suite.<anonymous> (D:\Front\e2e\src\app.e2e-spec.ts:33:3)
          at Object.<anonymous> (D:\Front\e2e\src\app.e2e-spec.ts:7:1)
          at Module._compile (module.js:635:30)
          at Module.m._compile (D:\Front\node_modules\ts-node\src\index.ts:439:23)
          at Module._extensions..js (module.js:646:10)
          at Object.require.extensions.(anonymous function) [as .ts] (D:\Front\node_modules\ts-node\src\index.ts:442:12)

**************************************************
*                    Failures                    *
**************************************************

1) workspace-project App #getObservableValue should return value from observable
  - Failed: Cannot read property 'fetchData' of undefined

Executed 2 of 2 specs (1 FAILED) in 6 secs.
[10:02:20] I/launcher - 0 instance(s) of WebDriver still running
[10:02:20] I/launcher - chrome #01 failed 1 test(s)
[10:02:20] I/launcher - overall: 1 failed spec(s)
[10:02:20] E/launcher - Process exited with error code 1
An unexpected error occurred: undefined

i want to test the real value of my return methode not like the unit testing, and they don't know my method fetchData.

if you need some more information please tell me😁.

thanks a lot.

Answer 1

You have not created an instance of AnnonceChronoDetailService (just the reference is created), that is why service variable is undefined

let page: AppPage;
let service: AnnonceChronoDetailService;
this.chronoInfo = new ALChrono(); //it's a class

beforeEach(() => {
    page = new AppPage();
    service = new AnnonceChronoDetailService(); // create service instance
});